利用Vue.js实现求职在线之职位查询功能

前言

Vue.js是当下很火的一个MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的原料药，使得我们能够快速地上手并使用Vue.js。

本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

知识点：

v-on，v-for，v-if，props，$emit，动态道具，类与风格绑定

第一亲代分页查询

查询参数

查询参数：公司名称公司，职位类型类型，月薪范围salaryMin salaryMax

说明：通过axios.post携带参数发出请求，后端采取分页查询的方式向前台返回指定条数的数据。主要利用蒙古数据库限制()限制读取的记录条数，跳过()跳过指定数量的数据，数据量很小1w。

//分页出口。页面查询=函数(页面、页面大小、模型、填充、查询参数、投影、排序参数、回调){ var start=(page-1)*页面大小；//根据页，面，张，版和页面大小得到跳跃要跳过的记录量var $ page={页码： page }；async.parallel({ count:函数（完成){ //查询到总共有数数条数据Model.count(queryParams).exec(函数(错误，计数){完成(错误，计数)；});}，记录：函数（完成){ //查询得到排序和排除字段的记录Model.find(查询参数，投影).跳过（开始)。限制（页面大小)。填充（填充)。排序（排序参数)。exec(函数(错误，文档){完成(错误，文档)；});} },函数(错误，结果){ var list=new Array()；让结果项。记录){列表。推送(项目。TooObject())} var count=results。计数；$ page。页数=ParSeint((count-1)/页面大小1)；//总页数$ page.results=list//单页结果$ page.count=count//总记录量回调(err，$ page)；});};有了分页函数，查询工作函数只要传入参数即可。

关于MongoDB的模糊查询

//数据库命令，就是个正则表达式：/参数/db.getCollection('作业')。查找({company: /网易/})//js里如果直接写/data.company/会是个字符串，Model.find({})函数识别不了，只能用新RegExP()公司：新RegExP(数据。公司)//查询工作exports.findJobs=function(数据，CB){让搜索项={ company : new RegExp(数据。公司)，type: new RegExp(data.type)，money : { $ GTE : data。最低工资，$ LTE :数据。(让项目进入搜索项目){//若条件为空则删除该属性if(search item[item]==='/'){ delete search item[item]} } var PAGE=data。第| 1页|这个。PAGE查询(PAGE，PAGE_SIZE，Job ' '，搜索项，{ _ id : 0 0，_ _ v : 0 0 }，{ money: 'asc' }，函数(错误，数据){ }.})}P2展示查询结果

查询结果

数据结构

说明：查询到的数据结果是对象数组，通过嵌套使用v-for轻松实现内容的展示

//html div class='搜索结果' table class=' table-hover ' t body class=' job list ' tr th v-for='搜索结果'中title“{ item } }/th/tr v-for=“item”(项目，索引)中的项目“@”单击=' show desc(index)' TD v-for=' item“{ value } }/TD/tr/t body/table/div///OnSubmit()Axios。post(' http://localhost 33603000/API/然后(RES={ this。搜索结果=RES . data。结果/单页查询结果这个。佩奇。计数=RES . data。页数/总页数console.log('总页数this.page.count) //总数据量.}).catch(err={ console。log(err)})P3详情卡片

详情卡片

说明：通过点击单行数据显示自定义的详情框组件描述消息来展示具体内容。

组成：遮罩内容框

思路：点击父组件搜索作业中的单行数据，通过小道具向子组件描述消息传递选中行的数据作业描述和showMsg: true显示子组件。点击子组件描述消息除详情框外的其余部分，使用$emit('hideMsg ')触发关闭详情页事件，父组件在使用子组件的地方直接用v-on来监听子组件触发的事件，设置showMsg: false关闭详情页。

//父组件中使用desmsgdescmsg : jobDesc=' jobDesc ' : showMsg=' showMsg ' v-: hidesg=' hideJobDesc '/desmsg/显示详情框showDesc(index){ let item=this。搜索结果[索引]这个。jobdesc=[{ title : '标题，value: item.posname }，{ title: '公司，value: item.company }，{ title: '月薪，value: item.money }，{ title: '地点，value: item.area }，{ title: '发布时间，值：项。公开日期}，{ title: '最低学历，值： item.edu，{ title: '工作经验，value: item.exp }，{ title: '详情，value: item.desc }，{ title: '福利，值：项。福利}，{ title: '职位类别，value: item.type }，{ title: '招聘人数，值：项。计数}]这个。showmsg=true }，//关闭详情框hideJobDesc(){ this。showmsg=false }//子组件desmsgtemplate div class=' wrapper ' v-if=' showMsg ' div class=' shade ' @ click=' hide shade '/div class=' msgBox ' H4 class=' msgTitle '详情介绍/H4 table class=' table table-hover ' t body class='作业列表' tr-for='作业desc '中的项：键=' item。id ' TD class=' title ' { item。title } }/TD TD class=' ctn ' { item。value } }/TD/tr/t body/table div class=' ft ' button type=' button ' class=' BTN BTN-primary ' @ click=' fllow '关注/button/div/div/templatescript导出默认值{ data(){ return } }，prop : { job desc : { type : Array，default: [] }，showMsg: { type: Boolean，default: false } }，methods: { hideShade () { this .$emit('hideMsg') }，fllow(){ alert(' 1 ')} } }/script 4页号

页号

说明：根据查询得到的总页数数数，规定一次最多显示10个页号。

思路：通过v-for渲染页号，即v-for='(项目，索引)的页面列表，并为每个里绑定班级即：类=' {活动项：活动}。当页数大于10时，点击大于6的第n个页号时，页数整体向右移动1,否则整体向左移动1。为点击某一页数后item.active=true，该页数添加样式。活跃的。

超文本标记语言

！-底部页号栏-div class=' Page buttons ' nav aria-label=' Page navigation ' ul class=' pagining ' Li : class=' { disabled : minPage } ' a aria-label=' Previous ' span aria-hidden=' true '/span/a/Li Li v-for='(项目，索引)的page LiST ' : class=' { active : item。active }“a @ click=”on submit(索引)' {{ item.value }}/a /li li

导出默认{ data(){ return { page : { selected : 0，//选中页数count: 0，//总页数尺寸： 10 /最大显示页数}，页面列表：[{ active : false，value: 1} //默认包含页数1 ] } }，methods: { //index代表从左到开始第指数个页号，好吧我也搞混了，最多10个onSubmit(index){ if(index===-1){//index为-1代表直接点击查询按钮触发的事件，初始化数据索引=0。佩奇。selected=0 this。页面列表=[{ active : false，value : 1 }]} Axios。post(' http://localhost :3000/API/search jobs '，searchData).然后(RES={ this。佩奇。计数=RES . data。页数/总页数让页码=1 //默认第一页//若指数=6且显示的最后一个页号小于总页数，则整体向后移动1,选中的页号相应向左移动1,即index-if(index=6(这个。佩奇。数数这个。页面列表[9]).值)0) {页码=this.pageList[1].value index-} else if(index 6 this。页面列表[0].价值！==1) {页码=this.pageList[0]。value-1 index }这个。页面列表=[]//初始化页面列表，之后会重新渲染这个。佩奇。size=(这个。佩奇。数到10)？10 : this.page.count for(设I=0；我喜欢这个。佩奇。大小；i ) { let item={ active: false，value :页码}页码这个。页面列表。推送(项目)}//改变当前选中页号下标样式，索引代表从左到开始第指数个页号，最多10个这个。页面列表[这个。佩奇。选定的].active=false this。页面列表[索引].active=true this。佩奇。选定=索引控制台。日志(搜索数据。页)}).catch(err={ console。日志(错误)})} }源码下载地址：Github源码

总结

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