接口规范
服务器上每一种资源, 比如一个文件,一张图片,一部电影,都有对应的url地址,如果我们的客户端需要对服务器上的这个资源进行操作,就需要通过http协议执行相应的动作来操作它,比如进行获取,更新,删除。
一般情况下我们直接使用Get、Post来发送和接受请求就可以了,但是为了更规范的编码,我们可以按章RESTful架构
来编写请求。
RESTful架构内容:简单来说就是url地址中只包含名词
表示资源,使用http动词表示动作
(get、post、put、delete)进行操作资源
请求方式
有四种请求方式,不同的请求方式代表着不同的语义
- get:获取数据
- post:添加数据
- put:修改数据
- delete:删除数据
eg:
前端:index.ejs:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body>
<div>
<div>用户名:<input id="username" /></div>
<div>密码:<input type="password" id="password" /></div>
<div>年龄:<input type="number" id="age" /></div>
<div><button id="register">登录</button></div>
<hr />
<div>
<button id = "update" value="62c78b42494b8936a7947305">更新</button>
<button id = "delete">删除</button></div>
<br>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>用户</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
var register = document.querySelector("#register");
var username = document.querySelector("#username");
var password = document.querySelector("#password");
var update = document.querySelector("#update");
var mydelete = document.querySelector("#delete");
function updateFun(){
console.log(this.value)
fetch(`/api/user?id=${this.value}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: "名字",
password: "密码",
age: 1,
}),
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
};
register.onclick = () => {
console.log(username.value, password.value, age.value);
fetch("/api/user", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: username.value,
password: password.value,
age: age.value,
}),
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
};
update.onclick = updateFun
mydelete.onclick = () => {
fetch("/api/user/62c78b42494b8936a7947305",{
method:'DELETE'
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
};
// 第一页数据,要两条
fetch("/api/user?page=1&limit=2").then(res=>res.json()).then((res)=>{
console.log(res)
var tbody = document.querySelector("tbody")
// map映射
tbody.innerHTML = res.map(item=>`
<tr>
<td>${item._id}</td>
<td>${item.username}</td>
<td>${item.age}</td>
<td> <button class="update" value="${item._id}"">更新</button><button class="delete">删除</button> </td>
</tr>
`).join("")
})
</script>
</body>
</html>
后端:
index.js:
var express = require('express');
const UserModel = require('../model/UserModel');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
// 响应post请求,增加用户
router.post("/user", (req, res) => {
console.log(req.body)
// 插入数据库
//1.创建一个模型(user,限制filed类型),对应数据库的集合(users)
const { username, password, age } = req.body
// .create就相当于插入
UserModel.create({
username: username,
password: password,
age:age
}).then(data => {
console.log(data)
res.send({ok:1})
})
})
// 更新updateMany:修改多个,updateOne修改一个
// 动态路由获取id
router.put("/user", (req, res) => {
console.log(req.body, req.query)
const {username,password,age} = req.body
UserModel.updateOne({ _id: req.query.id }, {
username,password,age
}).then(data => {
res.send({
ok:1
})
})
})
router.delete("/user/:id", (req, res) => {
console.log(req.params)
UserModel.deleteOne({ _id: req.params.id}).then(data => {
res.send({
ok:1
})
})
})
router.get("/user", (req, res) => {
console.log(req.query)
const {page,limit} = req.query
UserModel.find ({},["username","age"]).sort({age:1}).skip((page-1)*limit).limit(limit).then(data => {
res.send(data)
})
})
module.exports = router;
参数规范
?limit=10
#指定返回记录的数量?offset=10
#指定返回记录的开始位置?page=2&per_ page=100
#指定第几页,以及每页的记录数?sortby=name&order=asc
#指定返回结果按照哪个属性排序,以及排序顺序?state=close
#指定筛选条件
业务分层
MVC设计模式
node.js中的具体体现
MVC设计模式示例
使用mvc实现增删改查:
db.config.js:
// 连接数据库
const mongoose = require("mongoose")
mongoose.connect("mongodb://127.0.0.1:27017/yang_project")
// 插入集合和数据,yang_project会自动创建
UserController.js:
const UserService = require('../services/UserService');
const UserController = {
addUser: async (req, res) => {
console.log(req.body)
// 插入数据库
const { username, password, age } = req.body
await UserService.addUser( username, password, age)
res.send({ok:1})
},
updateUser:async (req, res) => {
const {username,password,age} = req.body
await UserService.updateUser(req.query.id,username,password,age)
res.send({
ok:1
})
},
deleteUser: async (req, res) => {
console.log(req.query.id)
await UserService.deleteUser(req.query.id)
res.send({
ok:1
})
},
getUser: async (req, res) => {
const { page, limit } = req.query
const data = await UserService.getUser(page,limit)
res.send(data)
}
}
module.exports = UserController
UserModel.js:
// 使用mongos模块连接mongoDB
const mongoose = require("mongoose")
// 限制模型,必须和数据库一致
const UserType = {
username: String,
password: String,
age:Number
}
// 创建user模型
const UserModel = mongoose.model("user",new mongoose.Schema(UserType))
// 模型user将会对应 users集合(自动创建users集合)
module.exports = UserModel
user.js:
var express = require('express');
const UserModel = require('../model/UserModel');
const UserController = require('../controller/UserController');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
// 响应post请求,增加用户
router.post("/user",UserController.addUser)
// 更新updateMany:修改多个,updateOne修改一个
// 动态路由获取id
router.put("/user",UserController.updateUser)
// 删除
router.delete("/user", UserController.deleteUser)
// 查询
router.get("/user", UserController.getUser)
module.exports = router;
UserServer.js:
const UserModel = require('../model/UserModel');
const UserService = {
addUser: (username, password, age ) => {
// .create就相当于插入
return UserModel.create({
username: username,
password: password,
age:age
}).then(data => {
console.log(data)
})
},
updateUser: (id,username,password,age) => {
return UserModel.updateOne({ _id: id }, {
username,password,age
})
},
deleteUser: (id) => {
return UserModel.deleteOne({ _id: id})
},
getUser: (page,limit) => {
return UserModel.find ({},["username","age"]).sort({age:1}).skip((page-1)*limit).limit(limit)
}
}
module.exports = UserService
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body>
<div>
<div>用户名:<input id="username" /></div>
<div>密码:<input type="password" id="password" /></div>
<div>年龄:<input type="number" id="age" /></div>
<div><button id="register">登录</button></div>
<hr />
<div>
<button class="update" id="update" value="62c7c98e8e9c28077a53d4a7">
更新
</button>
<button class="delete" id="delete">删除</button>
</div>
<br />
<table border="1">
<thead>
<tr>
<td>id</td>
<td>用户</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
var register = document.querySelector("#register");
var username = document.querySelector("#username");
var password = document.querySelector("#password");
// var update = document.getElementsByClassName("update");
// var mydelete = document.querySelector("#delete");
function updateFun() {
console.log(this.value);
fetch(`/api/user?id=${this.value}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: "名字",
password: "密码",
age: 1,
}),
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
}
function deleteFun() {
console.log(this.value);
fetch(`/api/user?id=${this.value}`, {
method: "DELETE",
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
}
register.onclick = () => {
console.log(username.value, password.value, age.value);
fetch("/api/user", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: username.value,
password: password.value,
age: age.value,
}),
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
};
// 第一页数据,要两条
// fetch("/api/user?page=1&limit=2")
// .then((res) => res.json())
// .then((res) => {
// console.log(res);
// var tbody = document.querySelector("tbody");
// // map映射
// tbody.innerHTML = res
// .map(
// (item) => `
// <tr>
// <td>${item._id}</td>
// <td>${item.username}</td>
// <td>${item.age}</td>
// <td> <button class="update" value="${item._id}"">更新</button><button class="delete">删除</button> </td>
// </tr>
// `
// )
// .join("");
// });
var updates;
async function getButton() {
await fetch("/api/user?page=1&limit=2")
.then((res) => res.json())
.then((res) => {
console.log(res);
var tbody = document.querySelector("tbody");
// map映射
tbody.innerHTML = res
.map(
(item) => `
<tr>
<td>${item._id}</td>
<td>${item.username}</td>
<td>${item.age}</td>
<td> <button class="update" value=${item._id}>更新</button><button class="delete" value=${item._id}>删除</button> </td>
</tr>
`
)
.join("");
});
// 更新操作
updates = document.getElementsByClassName("update");
var i = 0;
for (i; i < updates.length; i++) {
updates[i].onclick = updateFun;
}
// 删除操作
mydeletes = document.getElementsByClassName("delete");
var i = 0;
for (i; i < mydeletes.length; i++) {
mydeletes[i].onclick = deleteFun;
}
}
getButton();
</script>
</body>
</html>