利用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 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
浅析SVN常见问题及解决方法
2013/06/21 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
图解Python变量与赋值
2018/04/03 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Django  ORM 练习题及答案
2019/07/19 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
蛋糕店的商业计划书范文
2014/01/27 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
报关报检委托书
2014/04/08 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年宣传工作总结
2014/11/18 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python