1、一个操作的执行流程及模型图如下：

 2、搭建服务器及连接数据库，具体参考本人上两篇CSDN、CSDN

3、在html文件中画一个按钮，也可以不设置按钮，直接用axios调用接口加载数据。

<button id="searchBtn2">搜索2</button>
<input type="text" id="title2">

4、给按钮设置点击事件，并写点击事件的功能，此处为查询功能，接口请求方式为post方式，传递参数为input里输入的值。

$("#searchBtn2").click(function () {
        let titleval = $("#title2").val();
        axios.post("http://localhost:8848/getByTitle", { "title": titleval })
            .then(res => {
                console.log(res)
                insertData(res.data);
            })
            .catch(err => {
                console.error(err);
            })
    })

4、后台创建步骤3中的接口，post接口中，传递的参数用req.body获取，get用req.query获取，此处commodity是创建的数据库表名、app是封装导入的express。

// 根据标题模糊查询
app.post("/getByTitle",(req,res)=>{
    let {title} = req.body;
    let reg = new RegExp(`${title}`,"ig");
    commodity.find({"title":reg}).then(r => {
        // console.log(r);
        res.json(r);
    })
})

5、html拿到响应数据，调用渲染函数渲染页面。

// 页面数据渲染函数
    function insertData(arr) {
        let newarr = arr.map(item => {
            let i = item.lable.length;
            let str = '';
            for (let j = 0; j < i; j++) {
                str += `<span>${item.lable[j]}</span>`;
            }
            return `<div class="item flex j-s">
                <div class="img">
                    <img src=${item.imgurl} alt="" id="imgA" data-index=${item._id}>
                </div>
                <div class="list flex j-s">
                    <div class="title">${item.title}</div>
                    <div class="lable">${str}</div>
                    <div class="price">${item.price}</div>
                </div>
            </div>`;
        })
        $(".box").html(newarr.join(''));
    }

注意：1、一般是搭建服务器，创建表，写api接口并测试接口、在前端html中调用并渲染页面，本文步骤是根据操作流程来写的。

2、前端通过接口访问时，会存在跨域问题，此时需要在服务器添加如下代码解决跨域问题：

// app解决跨域设置 后台解决跨域
app.use((req, res, next) => {
    //设置请求头
    res.set({
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Max-Age': 1728000,
        'Access-Control-Allow-Origin': req.headers.origin || '*',
        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
        'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
        'Content-Type': 'application/json; charset=utf-8'
    })
    req.method === 'OPTIONS' ? res.status(204).end() : next()
})

3、前端向后台传递参数时，会存在传递格式问题，需在后台添加如下代码解决： 

// 解析请求的json格式数据
app.use(express.json()) // for parsing application/json
// 解析请求的表单数据
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded