利用Vue.js實(shí)現(xiàn)求職在線之職位查詢(xún)功能

// 分頁(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) { // 查詢(xún)到總共有count條數(shù)據(jù)
   Model.count(queryParams).exec(function (err, count) {
    done(err, count);
   });
  },
  records: function (done) { // 查詢(xún)得到排序和排除字段的記錄
   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);
 });
};

// 數(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)

// 查詢(xún)工作
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) {
  ...
 })
}

// 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è)查詢(xún)結(jié)果
 this.page.count = res.data.pageCount   // 總頁(yè)數(shù)
 console.log('總頁(yè)數(shù)' + this.page.count)  // 總數(shù)據(jù)量
 ...
})
.catch(err => {
 console.log(err)
})

// 父組件中使用 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: '職位類(lèi)別', 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">
  <h5 class="msgTitle">詳情介紹</h5>
  <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>

<!-- 底部頁(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>

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)擊查詢(xú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)
  })
 }
 }
}