知識(shí)點(diǎn)：
v-on,v-for,v-if,props,$emit肃廓，動(dòng)態(tài)Prop储矩，Class 與 Style 綁定
P1 分頁(yè)查詢
查詢參數(shù)
查詢參數(shù)：公司名稱
company, 職位類型type, 月薪范圍salaryMin salaryMax
說(shuō)明：通過(guò)
axios.post攜帶參數(shù)發(fā)出請(qǐng)求，后端采取分頁(yè)查詢的方式向前臺(tái)返回指定條數(shù)的數(shù)據(jù)宋欺。主要利用MongoDBLimit()限制讀取的記錄條數(shù),Skip()跳過(guò)指定數(shù)量的數(shù)據(jù)般码，數(shù)據(jù)量很小1w+。
// 分頁(yè)
exports.pageQuery = function (page, pageSize, Model, populate, queryParams, projection, sortParams, callback) {
var start = (page - 1) * pageSize; // 根據(jù) page 和 pageSize 得到 skip 要跳過(guò)的記錄量
var $page = {
pageNumber: page
};
async.parallel({
count: function (done) { // 查詢到總共有count條數(shù)據(jù)
Model.count(queryParams).exec(function (err, count) {
done(err, count);
});
},
records: function (done) { // 查詢得到排序和排除字段的記錄
Model.find(queryParams, projection).skip(start).limit(pageSize).populate(populate).sort(sortParams).exec(function (err, doc) {
done(err, doc);
});
}
}, function (err, results) {
var list = new Array();
for (let item of results.records) {
list.push(item.toObject())
}
var count = results.count;
$page.pageCount = parseInt((count - 1) / pageSize + 1); // 總頁(yè)數(shù)
$page.results = list; // 單頁(yè)結(jié)果
$page.count = count; // 總記錄量
callback(err, $page);
});
};
有了分頁(yè)函數(shù)蔚晨，查詢工作函數(shù)只要傳入?yún)?shù)即可.
關(guān)于MongoDB的模糊查詢
// 數(shù)據(jù)庫(kù)命令，就是個(gè)正則表達(dá)式： / 參數(shù) /
db.getCollection('jobs').find({company: /網(wǎng)易/})
// js里如果直接寫(xiě) /data.company/會(huì)是個(gè)字符串肛循，Model.find({})函數(shù)識(shí)別不了铭腕，只能用 new RegExp()
company: new RegExp(data.company)
// 查詢工作
exports.findJobs = function (data, cb) {
let searchItem = {
company: new RegExp(data.company),
type: new RegExp(data.type),
money: { $gte: data.salaryMin, $lte: data.salaryMax }
}
for (let item in searchItem) { // 若條件為空則刪除該屬性
if (searchItem[item] === '//') {
delete searchItem[item]
}
}
var page = data.page || 1
this.pageQuery(page, PAGE_SIZE, Job, '', searchItem, {_id: 0, __v: 0}, {
money: 'asc'
}, function (error, data) {
...
})
}
P2 展示查詢結(jié)果
查詢結(jié)果
數(shù)據(jù)結(jié)構(gòu)
說(shuō)明：查詢到的數(shù)據(jù)結(jié)果是對(duì)象數(shù)組，通過(guò)嵌套使用
v-for輕松實(shí)現(xiàn)內(nèi)容的展示
// html
<div class="searchResult">
<table class="table table-hover">
<tbody class="jobList">
<tr>
<th v-for="item in title">{{ item }}</th>
</tr>
<tr v-for="(item, index) in searchResults" @click="showDesc(index)">
<td v-for="value in item">{{ value }}</td>
</tr>
</tbody>
</table>
</div>
// onSubmit()
Axios.post('http://localhost:3000/api/searchJobs', searchData)
.then(res => {
this.searchResults = res.data.results // 單頁(yè)查詢結(jié)果
this.page.count = res.data.pageCount // 總頁(yè)數(shù)
console.log('總頁(yè)數(shù)' + this.page.count) // 總數(shù)據(jù)量
...
})
.catch(err => {
console.log(err)
})
P3 詳情卡片
詳情卡片
說(shuō)明： 通過(guò)點(diǎn)擊單行數(shù)據(jù)顯示自定義的詳情框組件
DescMsg來(lái)展示具體內(nèi)容多糠。
組成： 遮罩 + 內(nèi)容框
思路： 點(diǎn)擊父組件SearchJob中的單行數(shù)據(jù)累舷，通過(guò)props向子組件DescMsg傳遞選中行的數(shù)據(jù)jobDesc和showMsg: true顯示子組件。點(diǎn)擊子組件DescMsg除詳情框外的其余部分夹孔，使用$emit('hideMsg')觸發(fā)關(guān)閉詳情頁(yè)事件笋粟，父組件在使用子組件的地方直接用v-on來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件怀挠，設(shè)置showMsg: false關(guān)閉詳情頁(yè)。
// 父組件中使用 DescMsg
<DescMsg :jobDesc="jobDesc" :showMsg="showMsg" v-on:hideMsg="hideJobDesc"></DescMsg>
// 顯示詳情框
showDesc (index) {
let item = this.searchResults[index]
this.jobDesc = [
{ title: '標(biāo)題', value: item.posname },
{ title: '公司', value: item.company },
{ title: '月薪', value: item.money },
{ title: '地點(diǎn)', value: item.area },
{ title: '發(fā)布時(shí)間', value: item.pubdate },
{ title: '最低學(xué)歷', value: item.edu },
{ title: '工作經(jīng)驗(yàn)', value: item.exp },
{ title: '詳情', value: item.desc },
{ title: '福利', value: item.welfare },
{ title: '職位類別', value: item.type },
{ title: '招聘人數(shù)', value: item.count }
]
this.showMsg = true
},
// 關(guān)閉詳情框
hideJobDesc () {
this.showMsg = false
}
// 子組件 DescMsg
<template>
<div class="wrapper" v-if="showMsg">
<div class="shade" @click="hideShade"></div>
<div class="msgBox">
<h4 class="msgTitle">詳情介紹</h4>
<table class="table table-hover">
<tbody class="jobList">
<tr v-for="item in jobDesc" :key="item.id">
<td class="title">{{ item.title }}</td>
<td class="ctn">{{ item.value }}</td>
</tr>
</tbody>
</table>
<div class="ft">
<button type="button" class="btn btn-primary" @click="fllow">關(guān)注</button>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: {
jobDesc: {
type: Array,
default: []
},
showMsg: {
type: Boolean,
default: false
}
},
methods: {
hideShade () {
this.$emit('hideMsg')
},
fllow () {
alert('1')
}
}
}
</script>
P4 頁(yè)號(hào)
頁(yè)號(hào)
說(shuō)明： 根據(jù)查詢得到的總頁(yè)數(shù)
count害捕，規(guī)定一次最多顯示10個(gè)頁(yè)號(hào)绿淋。
思路： 通過(guò)v-for渲染頁(yè)號(hào)，即v-for="(item, index) of pageList"尝盼，并為每個(gè)li綁定Class即:class="{active: item.active}吞滞。當(dāng)頁(yè)數(shù)大于10時(shí)，點(diǎn)擊大于6的第n個(gè)頁(yè)號(hào)時(shí)盾沫，頁(yè)數(shù)整體向右移動(dòng)1裁赠，否則整體向左移動(dòng)1。為點(diǎn)擊某一頁(yè)數(shù)后item.active = true赴精，該頁(yè)數(shù)添加樣式.active佩捞。
html
<!-- 底部頁(yè)號(hào)欄 -->
<div class="pageButtons">
<nav aria-label="Page navigation">
<ul class="pagination">
<li :class="{disabled: minPage}">
<a aria-label="Previous">
<span aria-hidden="true">?</span>
</a>
</li>
<li v-for="(item, index) of pageList" :class="{active: item.active}">
<a @click="onSubmit(index)">{{ item.value }}</a>
</li>
<li :class="{disabled: maxPage}">
<a aria-label="Next">
<span aria-hidden="true">?</span>
</a>
</li>
</ul>
</nav>
</div>
js
export default {
data () {
return {
page: {
selected: 0, // 選中頁(yè)數(shù)
count: 0, // 總頁(yè)數(shù)
size: 10 // 最大顯示頁(yè)數(shù)
},
pageList: [
{active: false, value: 1} // 默認(rèn)包含頁(yè)數(shù)1
]
}
},
methods: {
// index 代表從左到開(kāi)始第index個(gè)頁(yè)號(hào)，好吧我也搞混了蕾哟，最多10個(gè)
onSubmit (index) {
if (index === -1) { // index為-1代表直接點(diǎn)擊查詢按鈕觸發(fā)的事件一忱，初始化數(shù)據(jù)
index = 0
this.page.selected = 0
this.pageList = [
{active: false, value: 1}
]
}
Axios.post('http://localhost:3000/api/searchJobs', searchData)
.then(res => {
this.page.count = res.data.pageCount // 總頁(yè)數(shù)
let pageNumber = 1 // 默認(rèn)第1頁(yè)
// 若index >= 6且顯示的最后一個(gè)頁(yè)號(hào)小于總頁(yè)數(shù)，則整體向后移動(dòng)1谭确，選中的頁(yè)號(hào)相應(yīng)向左移動(dòng)1帘营，即index--
if (index >= 6 && (this.page.count - this.pageList[9].value) > 0) {
pageNumber = this.pageList[1].value
index--
} else if (index < 6 && this.pageList[0].value !== 1) {
pageNumber = this.pageList[0].value - 1
index++
}
this.pageList = [] // 初始化 pageList，之后會(huì)重新渲染
this.page.size = (this.page.count > 10) ? 10 : this.page.count
for (let i = 0; i < this.page.size; i++) {
let item = {
active: false,
value: pageNumber
}
pageNumber++
this.pageList.push(item)
}
// 改變當(dāng)前選中頁(yè)號(hào)下標(biāo)樣式逐哈，index 代表從左到開(kāi)始第index個(gè)頁(yè)號(hào)芬迄，最多10個(gè)
this.pageList[this.page.selected].active = false
this.pageList[index].active = true
this.page.selected = index
console.log(searchData.page)
})
.catch(err => {
console.log(err)
})
}
}
}
