Implementing MySQL fuzzy search with node and express

This article has participated in 「 New people's creation ceremony 」 Activities , Start the road of nuggets creation together .

node and express Realization mySql Fuzzy search

As a front-end Developer What are the disadvantages of missing the back-end So I am also learning express On the way .

1. Realization way

The search of the server is mainly realized by calling mySql sentence , To query the desired data in the database . Ideas ：

1. Parameters passed from the front end to the back end

2. Back end get parameters

3. Get the parameters and splice them into usable ones mysql sentence

4. express Return the response result to the front end

Specifically, the above four steps , How to achieve it ？ Step by step .

1. Parameters passed from the front end to the back end

ad locum this.queryInfo The parameters that the front end needs to pass to the back end .

2. Back end get parameters

The red box shows the parameters that the back end gets from the front end

3. Get the parameters and splice them into usable ones mysql sentence

When you get the parameters Get all the parameters Spliced into the final sql sentence below sql You can get Telephone number band 11 All mobile phone numbers .

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

4.express Return the response result

express Through the callback Return the query results to the front end for use

mysql Return to express The data of express Return to the front end through callback , The front end gets this data to render the table .

Finally, post all the codes I hope it works for you

Server code

	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: ' Login information has expired , Please login again '
        })
        return
    }
    // let sql = sqlMap.item.findAllInfo;
    let sql = 'select * from userlist ';
    var params = req.body
    console.log(params, ' Parameters ')
    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;// Expose this route 

Client code

	<template>
  <div>
    <el-card>
      <el-form
        :inline="true"
        :model="queryInfo"
        ref="queryInfoRef"
        class="demo-form-inline"
      >
        <el-form-item label=" user name ">
          <el-input
            v-model="queryInfo.username"
            placeholder=" user name "
          ></el-input>
        </el-form-item>
        <el-form-item label=" Telephone ">
          <el-input v-model="queryInfo.phone" placeholder=" Telephone "></el-input>
        </el-form-item>
        <el-form-item label=" type ">
          <el-select v-model="queryInfo.account" placeholder=" type ">
            <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"> Inquire about </el-button>
          <el-button @click="onReset('queryInfoRef')"> Reset </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="userList" border style="width: 100%">
        <el-table-column fixed prop="username" label=" user name " min-width="150">
        </el-table-column>
        <el-table-column prop="phone" label=" Telephone " 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=" operation " min-width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              > see </el-button
            >
            <el-button type="text" size="small"> edit </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>