2. 技术
    3. 写接口加调用（页面用的是jQuery）-demo（一部分增查）

    写接口加调用（页面用的是jQuery）-demo（一部分增查）

    技术2022-07-10  103

    新建文件后 输入命令 “code .” 打开文件所在的vscode 然后在命令行中需要输入的有 npm init -y → 会出来一个package.json文件 npm i express → 会出来一个node_modules npm i nodemon -g → 之后执行用命令 “nodemon 文件名” 即可 可以让我们在修改代码之后自动进行服务器的重启操作

    express.js(自己根据老师的写的)

    const fs = require('fs'); const express = require('express'); const app = express(); //因为前面的html用的是jQuery，所以用的是下面代码 app.use(express.urlencoded()); //但如果前面的html用的是axios，需要用的是下面代码 // app.use(express.json()); app.use('/', express.static('./public')); //get-查 读取pets.json文件数据进行展示 app.get('/api/v1/pets', (req, res) => { const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString()); res.json(pets); }); // post-增 存储顾客的数据放在pets.json文件里 app.post('/api/v1/pets', (req, res) => { const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString()); pets.push({ id: Date.now(), ...req.body }); fs.writeFileSync('./db/pets.json', JSON.stringify(pets)); res.json({ code: 1, msg: '保存数据成功', }); }); // delete-删 app.delete('/api/v1/pets/:id', (req, res) => { const { id } = req.params; const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString()); const index = pets.findIndex(item => item.id == id); pets.splice(index, 1); fs.writeFileSync('./db/pets.json', JSON.stringify(pets)); res.json({ code: 1, msg: '删除成功', }); }); // put-修改 app.put('/api/v1/pets/:id', (req, res) => { const { id } = req.params; const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString()); const index = pets.findIndex(item => item.id == id); pets[index] = { ...{ id }, ...req.body }; fs.writeFileSync('./db/pets.json', JSON.stringify(pets)); res.json({ code: 1, msg: '修改成功', }); }); // 端口号 app.listen(3334, () => { console.log('服务器运行在3334端口'); })

    main.js

    const express = require("express"); const app = express(); const fs = require("fs"); // 可以获取请求体中使用了url编码的数据 app.use(express.urlencoded()); // 任何一个web服务器默认的入口文件叫index.html app.use("/", express.static("./public")); // 把public文件夹下的文件当做静态资源进行访问 // 参数一表示请求的地址 // 参数二表示请求的处理函数 // .get表示发起get请求 // .post delete put patch app.get("/", (req, res) => { res.send("战斗吧，暴龙兽!"); // 输出一个字符串 }); app.get("/api/v1/pets", (req, res) => { // 从文件中读取数据进行展示 const pets = JSON.parse(fs.readFileSync("./db/pets.json").toString()); res.json(pets); // 输出一个json数据 }); app.post("/api/v1/pets", (req, res) => { // 把当前客户端传递的数据存储在文件里 const pets = JSON.parse(fs.readFileSync("./db/pets.json").toString()); // ...js的扩展运算符，可以实现对象的浅拷贝 // Object.assign pets.push({ id: Date.now(), ...req.body }); fs.writeFileSync("./db/pets.json", JSON.stringify(pets)); res.json({ code: 1, msg: "保存数据成功", }); // 重定向 // res.redirect("/index.html"); }); // :id表示占位符，通过路由params进行传参 // 如果有多个参数，可以写多个占位符 // 路由的例子 /api/v1/pets/:id/:name/:dd // 对应的url信息 /api/v1/pets/1/2/345 app.delete("/api/v1/pets/:id", (req, res) => { const { id } = req.params; // 解构赋值, req.params是express中的一种传参形式 const pets = JSON.parse(fs.readFileSync("./db/pets.json").toString()); const index = pets.findIndex((item) => item.id == id); // 查找符合条件的数组下标 pets.splice(index, 1); // 根据索引删除一个元素 fs.writeFileSync("./db/pets.json", JSON.stringify(pets)); res.json({ code: 1, msg: "删除成功", }); }); // 修改 app.put("/api/v1/pets/:id", (req, res) => { const { id } = req.params; const pets = JSON.parse(fs.readFileSync("./db/pets.json").toString()); // findIndex 找到符合条件的索引 const index = pets.findIndex((item) => item.id == id); pets[index] = { ...{ id }, ...req.body }; fs.writeFileSync("./db/pets.json", JSON.stringify(pets)); res.json({ code: 1, msg: "修改成功", }); }); app.listen(3333, () => { console.log("服务器运行在3333端口"); });

    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> <h1>宠物列表</h1> <a href="/new.html">【新增】</a> <ul id="list"></ul> <!-- <form action="/api/v1/pets" method="POST"> <input type="text" name="name" placeholder="请输入名字" /> <input type="text" name="skills" placeholder="请输入技能" /> <input type="submit" value="提交" /> </form> --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $.ajax({ type: "GET", url: "/api/v1/pets", success: function (response) { var strHtml = ""; response.forEach((item) => (strHtml += `<li>${item.name}</li>`)); $("#list").html(strHtml); }, }); </script> </body> </html>

    new.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>宠物新增</title> </head> <body> <ul> <li><input type="text" id="name" placeholder="请输入宠物名字" /></li> <li> <input type="text" id="skills" placeholder="请输入宠物技能" /> </li> <li><button id="btnSave">保存</button></li> </ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function () { $("#btnSave").click(function () { if ($("#name").val() && $("#skills").val()) { $.post( "/api/v1/pets", { name: $("#name").val(), skills: $("#skills").val(), }, function (data, textStatus, jqXHR) { window.location.href = "/index.html"; } ); } else { alert("请输入内容"); } }); }); </script> </body> </html>
    Processed: 0.010, SQL: 9