利用Vue.js实现求职在线之职位查询功能

// 分页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)  }) } }}