Ymx-rk-1102 NPM

npm i express mock axios

app.js

const fs = require("fs");
const express = require("express");
const app = express();

app.listen("9000", () => console.log("9000！！！！！！"))


app.use(express.static("public"));
app.use(express.json())

app.post("/api/filter", (req, res) => {
    let {
        val
    } = req.body;

    let data = JSON.parse(fs.readFileSync("mock/list.json"))

    res.send(data.filter(item => item.username.includes(val)))
})

data>data.js

const Mock = require("mockjs")
const fs = require("fs")


const data = Mock.mock({
    "list|20": [{
        username: "@cname"
    }]
})


fs.writeFileSync("list.json",JSON.stringify(data.list))

到node_modules找到axios.js和axios.map放到public>js文件夹里面

public>index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请搜索">
    <ul>
        <li></li>
    </ul>
    <script src="./js/axios.js"></script>
    <script>
        var ipt = document.querySelector("input"),
            ul = document.querySelector("ul"),
            timer = null;

        ipt.oninput = function () {
            clearTimeout(timer)
            timer = setTimeout(() => {
                axios.post("/api/filter", {
                    val: ipt.value
                }).then(result => {
                    ul.innerHTML = result.data.map(item => {
                        return `
                        <li>${item.username}</li>
                    `
                    }).join("")
                })
            }, 200)
        }


        axios.post("/api/filter", {
            val: ""
        }).then(result => {
            ul.innerHTML = result.data.map(item => {
                return `
                        <li>${item.username}</li>
                    `
            }).join("")
        })
    </script>
</body>

</html>

axios express mockjs

1.0.0

5 years ago