index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>列表</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head> <body class="container"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">萌宠列表</h3> </div> <div class="panel-body"> <a href="/new.html" class="btn btn-danger btn-sm">新增</a> <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>序号</th> <th>头像</th> <th>名称</th> <th>技能</th> <th>操作</th> </tr> </thead> <tbody id="list"></tbody> </table> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> <script> axios.get("/api/v1/pets").then((res) => { var strHtml = ""; res.data.forEach((pet, index) => { strHtml += `<tr> <td>${index + 1}</td> <td>${pet.name}</td> <td><img src="${ pet.img }" style="width: 80px; max-height: 80px;"/></td> <td>${pet.skills}</td> <td> <button onclick="delOne('${ pet.id }')" class="btn btn-danger btn-sm">删除</button> <a class="btn btn-info btn-sm" href="/edit.html?id=${ pet.id }">修改</a> </td> </tr>`; }); document.querySelector("#list").innerHTML = strHtml; }); function delOne(id) { if (confirm("是否确认删除此项")) { // 删除操作 // 参数一 为地址 axios.delete("/api/v1/pets/" + id).then((res) => { window.location.reload(); }); } } </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> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head> <body class="container"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">萌宠新增</h3> </div> <div class="panel-body"> <legend>数据新增</legend> <div class="form-group"> <label for="">名字</label> <input type="text" class="form-control" id="txtName" placeholder="请输入名字" /> </div> <div class="form-group"> <label for="">头像</label> <input type="text" class="form-control" id="txtImg" placeholder="请输入头像" /> </div> <div class="form-group"> <label for="">技能</label> <textarea class="form-control" id="txtSkills" placeholder="请输入技能" rows="3" ></textarea> </div> <button onclick="saveHandle()" class="btn btn-primary btn-block"> 提交 </button> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> <script> function saveHandle() { var name = document.querySelector("#txtName").value; var img = document.querySelector("#txtImg").value; var skills = document.querySelector("#txtSkills").value; if (name && img && skills) { axios .post("/api/v1/pets", { name, img, skills, }) .then((res) => { // console.log(res); window.location.href = "/index.html"; }); } else { alert("请输入指定的内容"); } } </script> </body> </html>edit.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>新增</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head> <body class="container"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">萌宠新增</h3> </div> <div class="panel-body"> <legend>数据修改</legend> <div class="form-group"> <label for="">名字</label> <input type="text" class="form-control" id="txtName" placeholder="请输入名字" /> </div> <div class="form-group"> <label for="">头像</label> <input type="text" class="form-control" id="txtImg" placeholder="请输入头像" /> </div> <div class="form-group"> <label for="">技能</label> <textarea class="form-control" id="txtSkills" placeholder="请输入技能" rows="3" > </textarea> </div> <button onclick="saveHandle()" class="btn btn-primary btn-block"> 提交 </button> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> <script> // URLSearchParams可以获取当前url中的search值,通过get方法 var params = new URLSearchParams(window.location.search); var id = params.get("id"); var txtName = document.querySelector("#txtName"); var txtImg = document.querySelector("#txtImg"); var txtSkills = document.querySelector("#txtSkills"); // console.log(id); axios.get("/api/v1/pets/" + id).then((res) => { // console.log(res.data); txtName.value = res.data.info.name; txtImg.value = res.data.info.img; txtSkills.value = res.data.info.skills; }); function saveHandle() { axios .put("/api/v1/pets/" + id, { name: txtName.value, img: txtImg.value, skills: txtSkills.value, }) .then((res) => { console.log(res); window.location.href = "/index.html"; }); } </script> </body> </html>pets.js
const router = require("express").Router(); const fs = require("fs"); // /api/v1/pets router.get("/", (req, res) => { if (fs.existsSync("./db/pets.json")) { const str = fs.readFileSync("./db/pets.json").toString(); res.json(JSON.parse(str)); } else { fs.writeFileSync("./db/pets.json", "[]"); res.json([]); } }); // /api/v1/pets/1 router.get("/:id", (req, res) => { const pets = JSON.parse(fs.readFileSync("./db/pets.json").toString()); const pet = pets.find((item) => item.id == req.params.id); res.json({ code: 1, info: pet ? pet : {}, }); }); router.post("/", (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: "新增数据成功", }); }); router.put("/:id", (req, res) => { const pets = JSON.parse(fs.readFileSync("./db/pets.json").toString()); const index = pets.findIndex((item) => item.id == req.params.id); pets[index] = { id: req.params.id, ...req.body }; fs.writeFileSync("./db/pets.json", JSON.stringify(pets)); res.json({ code: 1, msg: "修改数据成功", }); }); router.delete("/:id", (req, res) => { const pets = JSON.parse(fs.readFileSync("./db/pets.json").toString()); const index = pets.findIndex((item) => item.id == req.params.id); pets.splice(index, 1); fs.writeFileSync("./db/pets.json", JSON.stringify(pets)); res.json({ code: 1, msg: "删除数据成功", }); }); module.exports = router;add.js
const express = require("express"); const app = express(); app.use(express.json()); const fs = require("fs"); if (!fs.existsSync("./db")) { fs.mkdirSync("./db"); } app.use("/", express.static("./public")); app.use("/api/v1/pets", require("./routes/api/v1/pets.js")); app.use("/api/v1/movies", require("./routes/api/v1/movies.js")); app.listen(3336, () => { console.log("服务器运行在3335端口"); });package.json
{ "name": "day3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "nodemon app.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1" } }列表创建方式
