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


Posted in Javascript onJuly 03, 2017

前言

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 分页查询

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

查询参数:公司名称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 展示查询结果

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

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

数据结构

说明:查询到的数据结果是对象数组,通过嵌套使用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 详情卡片

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

说明: 通过点击单行数据显示自定义的详情框组件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 页号

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

说明: 根据查询得到的总页数 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源码

总结

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

Javascript 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
js实现列表按字母排序
Aug 11 Javascript
Swiper实现轮播图效果
Jul 03 #Javascript
jQuery实现点击关注和取消功能
Jul 03 #jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 #Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 #Javascript
Bootstrap按钮组实例详解
Jul 03 #Javascript
详解使用vue实现tab 切换操作
Jul 03 #Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
You might like
php 操作调试的方法
2012/07/12 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
函授本科自我鉴定
2013/11/03 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
中国央视网签名寄语
2014/01/18 职场文书
小学语文教学反思
2014/02/10 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
承诺书样本
2014/08/30 职场文书
天下第一关导游词
2015/02/06 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
Nginx进程调度问题详解
2021/09/25 Servers