// 分頁exports.pageQuery = function (page, pageSize, Model, populate, queryParams, projection, sortParams, callback) { var start = (page - 1) * pageSize; // 根據 page 和 pageSize 得到 skip 要跳過的記錄量 var $page = {  pageNumber: page }; async.parallel({  count: function (done) { // 查詢到總共有count條數據   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); // 總頁數  $page.results = list; // 單頁結果  $page.count = count; // 總記錄量  callback(err, $page); });};

// 數據庫命令，就是個正則表達式： / 參數 /db.getCollection('jobs').find({company: /網易/})// js里如果直接寫 /data.company/會是個字符串，Model.find({})函數識別不了，只能用 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) {  ... })}

// 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   // 單頁查詢結果 this.page.count = res.data.pageCount   // 總頁數 console.log('總頁數' + this.page.count)  // 總數據量 ...}).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: '標題', value: item.posname },  { title: '公司', value: item.company },  { title: '月薪', value: item.money },  { title: '地點', value: item.area },  { title: '發布時間', value: item.pubdate },  { title: '最低學歷', value: item.edu },  { title: '工作經驗', value: item.exp },  { title: '詳情', value: item.desc },  { title: '福利', value: item.welfare },  { title: '職位類別', value: item.type },  { title: '招聘人數', value: item.count } ] this.showMsg = true},// 關閉詳情框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">關注</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>

<!-- 底部頁號欄 --><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, // 選中頁數  count: 0,  // 總頁數  size: 10  // 最大顯示頁數  },  pageList: [  {active: false, value: 1} // 默認包含頁數1  ] } }, methods: {  // index 代表從左到開始第index個頁號，好吧我也搞混了，最多10個 onSubmit (index) {  if (index === -1) { // index為-1代表直接點擊查詢按鈕觸發的事件，初始化數據  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 // 總頁數  let pageNumber = 1 // 默認第1頁  // 若index >= 6且顯示的最后一個頁號小于總頁數，則整體向后移動1，選中的頁號相應向左移動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，之后會重新渲染  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)  }  // 改變當前選中頁號下標樣式，index 代表從左到開始第index個頁號，最多10個  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)  }) } }}