前端代码
<template>
<div class="main-box">
<!-- 卡片区 -->
<el-card>
<!-- 搜索 -->
<el-input
placeholder="请输入用户名"
v-model="goodQueryInfo.key_word"
clearable
class="input-with-select"
style="width: 600px"
>
<el-button
slot="append"
icon="el-icon-search"
@click="orderList"
></el-button>
</el-input>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="goodQueryInfo.currentPage"
:page-sizes="[2, 4, 6, 8]"
:page-size="goodQueryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
// 初始化参数
goodQueryInfo: {
key_word: "",
currentPage: 1,
pageSize: 2
},
total: 0,
},
created() {
this.orderList()
},
methods: {
// 分页
handleSizeChange(val) {
this.currentPage = 1
this.goodQueryInfo.pageSize = val
this.orderList()
},
handleCurrentChange(val) {
this.goodQueryInfo.currentPage = val
this.orderList()
},
// 获取数据
async orderList(){
var r=await this.$http.get('show',{ params: this.goodQueryInfo })
console.log(r);
if(r.data.code==200){
this.tableData=r.data.data,
this.total=r.data.total
}
}
},
};
</script>
<style lang="less" scoped>
.el-card {
margin-top: 30px;
}
.main-box {
overflow: auto;
}
</style>
后端接口代码
const express = require("express")
const {order}=require('../db/model')
const orderRouter = express.Router()
orderRouter.get("/show", async (req, res) => {
let key_word = req.query.key_word
let currentPage = parseInt(req.query.currentPage)
let pageSize = parseInt(req.query.pageSize)
// 如果有关键字，搜索关键字并进行分页
if ( key_word ) {
const orderData = await order.find( { "bianhao": { $regex: key_word }} , {}, { skip: ( (currentPage - 1 ) * pageSize ), limit: pageSize })
const totalData = await order.find( { "bianhao": { $regex: key_word }} )
res.json ({
msg: "ok",
code: 200,
data: orderData,
total: totalData.length
})
// 如果没有关键字，分页正常显示
}else {
const orderData = await order.find({},{}, { skip: ( (currentPage - 1 ) * pageSize ), limit: pageSize} )
const totalData = await order.find({})
res.json ({
msg: "ok",
code: 200,
data: orderData,
total: totalData.length
})
}
})
module.exports=orderRouter$regex运算符通过正则表达式来匹配模糊查询
语法
{ < field >： { $ regex ： / pattern / ， $ options ： ‘’ } }
{ < field >： { $ regex ： ‘pattern’ ， $ options ： ‘’ } }
{ < field > ： { $ regex ： / pattern / < options > } }
示例
查询以某字段开头的文档
db.member.find({"name":{$regex:/^XXX/}})
查询以某字段为结尾的文档
db.member.find({"name":{$regex:/XXX^/}})
查询忽略大小写
db.member.find({"name":{$regex:/XXX/i}})
某文档包含某字段的模糊查询
db.member.find({"name":{ $regex:/字段名/ }})
| 选项 | 描述 | 语法限制 |
| i | 不区分大小写以匹配大小写的情况。 | |
| m | 对于包含锚点的模式（即^，对于开始， $结束），在每行的开头或结尾处匹配具有多行值的字符串。如果没有此选项，这些锚点将在字符串的开头或结尾处匹配,如果模式不包含锚点或者字符串值没有换行符（例如\n），则该m选项无效。 | |
| x | $regex除非转义或包含在字符类中，否则“扩展”功能可忽略模式中的所有空格字符。 此外，它会忽略中间的字符，包括未转义的hash / pound（#）字符和下一个新行，以便您可以在复杂模式中包含注释。这仅适用于数据字符; 空格字符可能永远不会出现在模式中的特殊字符序列中。 该x选项不影响VT字符的处理（即代码11）。 ? | 需要$regex与$options语法 |
| s | 允许点字符（即.）匹配包括换行符在内的所有字符。有关示例，请参阅使用。点匹配新线。 | 需要$regex与$options语法 |
