node+vue实现搜索效果

用element-ui搭建搜索页面

 <!-- 搜索 -->
    <el-input placeholder="请输入内容" v-model="input" class="input-with-select">  
      <el-button slot="append" icon="el-icon-search" @click="userlist"></el-button>
  </el-input>

效果如下

输入框input中v-model绑定的input在data里面定义一下，在我们获取页面数据的时候传一个参数到后端，跟分页的数据一起传给后端

   // 获取数据
    async userlist(){
      var r=await this.http.get('getlist',{
          params: {
            pagenum: this.pagenum,
            pagesize: this.pagesize,
            input:this.input
          },
        })
      console.log(r);
      if(r.data.code==200){
        this.datalist=r.data.data
        this.total=r.data.count
      
      }
    }

后端使用find方法，使用RegExp模糊查找

router.get('/getlist',async(req,res)=>{
  var limit = req.query.pagenum;
  var page = req.query.pagesize;
  var sk = (page - 1) * limit;
  var input=RegExp(req.query.input)
 var count = await user.find({username:input}).count();
//username是要搜索的字段
  var r = await user.find({username:input}).skip(sk).limit(limit);
  res.json({code:200,data:r,count})
})