node和express实现mySql模糊搜索

原创已于 2022-05-27 16:11:05 修改 · 1.7k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#mysql #前端 #数据库 #node #vue

于 2022-05-27 16:04:47 首次发布

js 同时被 3 个专栏收录

28 篇文章

订阅专栏

vue

25 篇文章

订阅专栏

node

2 篇文章

订阅专栏

本文介绍如何使用Node.js和Express框架实现MySQL数据库的模糊搜索功能。具体步骤包括从前端获取搜索参数、构建SQL查询语句并执行查询，最后将结果返回给前端展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

node和express实现mySql模糊搜索

作为一名前端开发少了后端总觉的缺点什么于是也在学习的 express的路上。

1.实现方式

实现服务端的搜索主要是通过调用mySql语句，去查询数据库中想要的数据。
思路：

前端传给后端参数
后端拿到参数
拿到参数后把参数拼接成可以使用的mysql语句
express返回响应结果返回给前端

具体是上面四步，怎么实现呢？一步一步来。

1.前端传给后端参数

在这里插入图片描述

在这里this.queryInfo 就是前端需要传给后端的参数。

2.后端拿到参数

在这里插入图片描述

红框显示就是后端拿到前端穿过来的参数

3.拿到参数后把参数拼接成可以使用的mysql语句

在这里插入图片描述

拿到参数后拿到所有的参数拼接成最后的sql语句下面sql语句就能拿到电话号码带11的所有手机号码。

	select * from userlist  where phone like "%11%"  sql

在这里插入图片描述

4.express返回响应结果

在这里插入图片描述

express 通过回调返回查询结果给前端使用

在这里插入图片描述

mysql返回给express 的数据 express通过回调返回给前端，前端拿到这个数据去渲染表格。

最后贴下所有代码希望对你有用

服务端代码

	var express = require("express");
var router = express.Router();
var sqlMap = require('../../config/sqlMap');
var conn = require('../../config/db');
var verify = require('../../utils/utils');

router.post('/all', function (req, res) {
    if (req.header.token || verify(req.headers.token).code === '606') {
        res.json({
            code: 401,
            message: '登录信息已过期，请重新登录'
        })
        return
    }
    // let sql = sqlMap.item.findAllInfo;
    let sql = 'select * from userlist ';
    var params = req.body
    console.log(params, '参数')
    let arr = []
    for (var key in params) {
        arr.push(params[key])
    }
    console.log(arr, '000')
    if (params.username !== '') {
        if (arr[0] !== '') {
            sql += `where username like "%${params.username}%" `;
        } else {
            sql += '';
        }
    }
    if (params.phone !== '') {
        if (arr[0] === '') {
            sql += ` where phone like "%${params.phone}%" `;
        } else {
            sql += ` and phone like "%${params.phone}%" `;
        }
    }
    if (params.account !== '') {
        if (arr[0] === '' && arr[1] === '') {
            sql += ` where account like "%${params.account}%" `;
        } else {
            sql += ` and account like "%${params.account}%" `;
        }
    }
    console.log(sql, 'sql')

    conn.query(sql, (err, result) => {
        if (err) {
            console.log(err)
        }
        if (result) {
            res.json({
                code: 200,
                data: result
            })
        }
    })

})
module.exports = router;//暴露这个路由

客户端代码

	<template>
  <div>
    <el-card>
      <el-form
        :inline="true"
        :model="queryInfo"
        ref="queryInfoRef"
        class="demo-form-inline"
      >
        <el-form-item label="用户名">
          <el-input
            v-model="queryInfo.username"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="queryInfo.phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="queryInfo.account" placeholder="类型">
            <el-option label="admin" value="admin"></el-option>
            <el-option label="admin1" value="admin1"></el-option>
            <el-option label="admin2" value="admin2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset('queryInfoRef')">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="userList" border style="width: 100%">
        <el-table-column fixed prop="username" label="用户名" min-width="150">
        </el-table-column>
        <el-table-column prop="phone" label="电话" min-width="120">
        </el-table-column>
        <el-table-column prop="account" label="account" min-width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :total="this.userList.length"> </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
      queryInfo: {
        username: "",
        phone: "",
        account: ""
      }
    };
  },
  mounted() {
   this.getList()
  },
  methods: {
    getList(){
      this.$ajax
      .post("/item/all",this.queryInfo)
      .then(res => {
        this.userList = res.data;
      })
      .catch(err => {
        console.log(err);
      });
    },
    onSearch() {
      this.getList()
      console.log(this.queryInfo, "000");
    },
    onReset(resetName) {
      for (var key in this.queryInfo) {
        this.queryInfo[key] = "";
        this.getList()
      }
    }
  }
};
</script>