前言
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+。
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的模糊查询
// js里如果直接写 /data.company/会是个字符串,Model.find({})函数识别不了,只能用 new RegExp()
company: new RegExp(data.company)
P2 展示查询结果
查询结果
说明:
查询到的数据结果是对象数组,通过嵌套使用v-for轻松实现内容的展示P3 详情卡片
详情卡片说明:
通过点击单行数据显示自定义的详情框组件DescMsg来展示具体内容。组成:
遮罩 + 内容框思路:
点击父组件 SearchJob 中的单行数据,通过 props 向子组件 DescMsg传递选中行的数据 jobDesc 和 showMsg: true 显示子组件。点击子组件 DescMsg 除详情框外的其余部分,使用$emit('hideMsg')
触发关闭详情页事件,父组件在使用子组件的地方直接用 v-on 来监听子组件触发的事件,设置 showMsg: false
关闭详情页。
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
// 若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源码
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对编程之家的支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。