前端之家收集整理的这篇文章主要介绍了
利用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 绑定
查询参数
查询参数：公司名称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轻松实现
内容的展示
{
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 关闭详情页。
显示详情框
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
}
Box">
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
js
{
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)
})
}
}
}
源码下载地址：nofollow" target="_blank" href="https://github.com/HZNU-QUANTA/NODE-HQY/tree/master/Vue-Test">Github源码
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对编程之家的支持。
