写接口加调用（页面用的是jQuery）-demo（一部分增查）
新建文件后
输入命令 “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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<h1>宠物列表h1>
<a href="/new.html">【新增】a>
<ul id="list">ul>
<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 += `${item.name}`));
$("#list").html(strHtml);
},
});
script>
body>
html>
new.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>