利用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源码

总结

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

(0)

相关推荐

  • 利用Vue.js框架实现火车票查询系统(附源码)

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js 今天,我就要基于这个库来搭建一个火车票查询系统.首先我们的机器上得有NodeJS环境,并且安装了npm包管理工具.因为vue是跑在node环境下的,并且我们需要用npm来安装vue. 在终端输入npm install --global vue-cli我们来全局安装vue-cli

  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>

  • 利用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 分页查询 查询参数 查询参数:

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • 利用vue.js实现被选中状态的改变方法

    在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &

  • 利用vue.js把静态json绑定bootstrap的table方法

    直接上代码 嘻嘻,发现bootstrap+vue.js拿来做原型效率挺高,以后就这样做原型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.b

  • 如何利用vue.js实现拖放功能

    前言 添加拖放功能是使你的程序更加自然和友好的方法.尽管有一些提供拖放功能的库,但是了解它们在底层的工作原理是非常有意义的. 在本文中,我们将用内置的 HTML 拖放 API 来实现简单的拖放系统.像这样: 拖放API HTML拖放API 是一种内置方法,它包含几个事件和属性,但是可以归纳为以两种类型的元素为思路来进行处理. 可拖动元素:可以被拖动的元素 可放置元素:可以接受被拖动元素的元素 如果这样分析,将会使分析拖放事件变得更加容易. 拖放事件 API 中有八个拖放事件可以用在我们程序中.

  • 利用Vue.js制作一个拼图华容道小游戏

    目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简

  • Vue.js实现可排序的表格组件功能示例

    本文实例讲述了Vue.js实现可排序的表格组件功能.分享给大家供大家参考,具体如下: 我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序:data 表示数据. html: <div id="app" v-cloak> <v-table :data="data" :columns

  • vue.js实现的经典计算器/科学计算器功能示例

    本文实例讲述了vue.js实现的经典计算器/科学计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分: <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <div id="app"> <div class="calculator"> <button @click="changeMod

  • Vue.js 实现数据展示全部和收起功能

    如图所示,当我们获取到数据后每个栏都只显示5条,多出的部分隐藏,点击显示全部将数据都展现出来,如图所示 首先我们的数据类型是这样的, tableData: [ { "comment": "", "lscm": [ { "count": "1268", "id": 1, "namech": "OGC WMTS", "nameen"

  • Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q

随机推荐