前端（根据ID编号搜索）：
点1，就搜索出ID 是1，不填就空着点搜索全部数据
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body class="layui-fluid" style="padding-top: 20px;">
<form class="layui-form layui-row layui-col-space16">
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="id" value="" placeholder="请输入搜索内容" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-btn-container layui-col-xs12">
<button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
<table class="layui-hide" id="ID-table-demo-search"></table>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="./layui/layui.js"></script>
<script>
layui.use(function(){
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
// 创建表格实例
table.render({
elem: '#ID-table-demo-search',
url: '/byId', // 此处为静态模拟数据，实际使用时需换成真实接口
cols: [[
{
checkbox: true,
fixed: true
},
{
field: 'id',
title: '编号',
width: 80,
fixed: 'left',
totalRowText: '合计：'
},
{
field: 'name',
title: '商品名称',
width: 150
},
{
field: 'dw',
title: '单位'
},
{
field: 'sl',
title: '数量',
totalRow: true
},
{
field: 'dj',
title: '单价'
},
{
field: 'img',
title: '图片',
templet: '<div><img src="{
{= d.img}}" height="100%"></div>'
},
{
field: 'bdate',
title: '日期'
}
]],
page: true,
height: 310
});
// 日期
laydate.render({
elem: '.demo-table-search-date'
});
// 搜索提交
form.on('submit(demo-table-search)', function(data){
var field = data.field; // 获得表单字段
// 执行搜索重载
table.reload('ID-table-demo-search', {
page: {
curr: 1 // 重新从第 1 页开始
},
url: '/byId',
where: field // 搜索的字段
});
// layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
return false; // 阻止默认 form 跳转
});
});
</script>
</body>
</html>后端代码（重点位）
const mysql = require('mysql');
// 数据库配置
module.exports = {
config: {
host: "localhost",
port: "3306",
user: "root",
password: "123456",
database: "bpc"
},
// 连接数据库，使用连接池的方式
// 连接池对象
sqlConnect: function (sql, sqlArr, callback) {
var pool = mysql.createPool(this.config);
pool.getConnection((err, conn) => {
console.log("数据库连接池");
if (err) {
console.log("连接失败");
return;
} else {
console.log("连接成功...");
}
// 事件驱动回调
conn.query(sql, sqlArr, callback);
// 释放连接
conn.release();
})
}
}
// 中间件
----------------------------------------------------
// 根据id查
getGoodsId = (req, res) => {
let { id } = req.query;
// console.log(req.query);
// console.log({ id });
if (id !='' && id!= undefined){
var sql = "select * from Goods where id = ?";
} else {
var sql = "select * from Goods";
};
var sqlArr = [id];
var callBack = (err, data) => {
if (err) {
res.send({
code: 400,
msg: '获取出错！',
})
} else {
res.send({
msg: 'success',
'data': data,
code: 0
})
}
}
dbConfig.sqlConnect(sql, sqlArr, callBack);
}
// 路由
---------------------------------------------------------
//根据id查
router.get('/byId', goodsController.getGoodsId);