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> <table> <tbody> <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>