利用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源码
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对的支持。