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

前言

vue.js是当下很火的一个javascript mvvm库，它是以数据驱动和组件化的思想构建的。相比于angular.js，vue.js提供了更加简洁、更易于理解的api，使得我们能够快速地上手并使用vue.js。

本文主要介绍的是关于利用vue.js实现职位查询功能的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

知识点：

v-on, v-for, v-if, props, $emit，动态prop， class 与 style 绑定

p1 分页查询

查询参数

查询参数：公司名称company, 职位类型type, 月薪范围salarymin salarymax

说明：通过axios.post携带参数发出请求，后端采取分页查询的方式向前台返回指定条数的数据。主要利用mongodb limit()限制读取的记录条数, skip()跳过指定数量的数据，数据量很小1w+。

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

有了分页函数，查询工作函数只要传入参数即可.

关于mongodb的模糊查询

// 数据库命令，就是个正则表达式： / 参数 /
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) {
  ...
 })
}

p2 展示查询结果

查询结果

数据结构

说明：查询到的数据结果是对象数组，通过嵌套使用v-for轻松实现内容的展示

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

p3 详情卡片

详情卡片

说明： 通过点击单行数据显示自定义的详情框组件descmsg来展示具体内容。

组成： 遮罩 + 内容框

思路： 点击父组件 searchjob 中的单行数据，通过 props 向子组件 descmsg传递选中行的数据 jobdesc 和 showmsg: true 显示子组件。点击子组件 descmsg 除详情框外的其余部分，使用 $emit('hidemsg') 触发关闭详情页事件，父组件在使用子组件的地方直接用 v-on 来监听子组件触发的事件，设置 showmsg: false 关闭详情页。

// 父组件中使用 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>

p4 页号

页号

说明： 根据查询得到的总页数 count，规定一次最多显示10个页号。

思路： 通过v-for渲染页号，即v-for="(item, index) of pagelist" ，并为每个li绑定class 即 :class="{active: item.active} 。当页数大于10时，点击大于6的第n个页号时，页数整体向右移动1，否则整体向左移动1。为点击某一页数后item.active = true ，该页数添加样式.active。

html

<!-- 底部页号栏 -->
<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, // 选中页数
  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)
  })
 }
 }
}

源码下载地址：github源码

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对的支持。