遵循Restful規范的簡單的栗子
- 前端代碼:
<html><head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /></head><body><div id="app"><div style="display: flex;flex-direction: column;"><el-input v-model="form.name" autocomplete="off" placeholder="姓名" style=""></el-input><el-button v-on:click="get">GET</el-button><el-button v-on:click="post">POST</el-button><el-button v-on:click="del">DELETE</el-button><el-button v-on:click="put">PUT</el-button><el-button v-on:click="logs=[]">Clear Log</el-button></div><!-- 日志部分 --><ul><li v-for="(log, idx) in logs" :key="idx">{{log}}</li></ul></div><script>axios.defaults.baseURL = "http://localhost:3000";axios.interceptors.response.use(response => {app.logs.push(JSON.stringify(response.data));return response;},err => {app.logs.push(JSON.stringify(response.data));return Promise.reject(err);})var app = new Vue({el: '#app',data: {form: {name: 'marron',id: 3},logs: []},methods: {async post() {const res = await axios.post("/users", this.form);},async get() {const res = await axios.get("/users");},async put() {const res = await axios.put("/users", this.form);},async del() {const res = await axios.delete("/users/3");}}})</script>
</body></html>
- 后端代碼
const Koa = require("koa");
const app = new Koa();
const Router = require("koa-router");
const router = new Router({ prefix: "/users" });
const cors = require("koa2-cors");
const bodyParser = require("koa-bodyparser");
app.use(cors());
app.use(bodyParser());const users = [{id:1 , name:"tom"}, {id:2, name: "jerry"}];// 查找數據 ?name = xx
router.get("/", ctx =>{console.log("GET /users");const {name} = ctx.query; // ?name = xxlet data = users;if (name) {data = users.filter (u => u.name === name);}ctx.body = {ok: 1, data};
});// 查找數據 /users/1 id = 1
router.get("/:id", ctx =>{console.log("GET /users/:id");const {id} = ctx.params; // /users/1const data = users.find(u => u.id == id);ctx.body = {ok:1 , data};
});// 新增用戶
router.post("/", ctx=>{console.log("POST /users");const {body: user} = ctx.request; // 請求bodyuser.id = users.length +1;users.push(user);ctx.body = { ok: 1};
});router.put("/", ctx => {console.log("PUT /users");const {body: user} = ctx.request; // 請求bodyconst idx = users.findIndex(u => u.id == user.id);if(idx > -1){users[idx] = user;}ctx.body = { ok: 1};
});// 刪除用戶 /users/1 刪除id為1
router.delete("/:id", ctx =>{console.log("DELETE /users/:id");const {id} = ctx.params;const idx = users.findIndex(u => u.id === id);if( idx > -1){users.splice(idx, 1);}ctx.body ={ ok: 1};
});app.use(router.routes());
app.listen(3000, ()=>{console.log("[Server] Server is running at http://localhost:3000");
})
Restful規范幾個注意:
- 動賓結構
客戶端發出的指令都是"動詞 + 賓語"的結構,如: “GET / articles” - 動詞的覆蓋
可以使用 X-HTTP-Method-Override屬性告訴服務器使用哪一個動詞覆蓋POST方法
POST /api/marron/1 HTTP/1.1
X-HTTP-Method-Override: PUT
上面指明了PUT方法.
在服務器端（koa2）使用下面方法接受
router.put("/api/marron:id", async ctx=>{
})
- 賓語必須是名詞,且盡量為復數
不要出現/getnames或/name之類的,盡量使用/names - 盡量扁平化
不要出現GET /authors/12/categories/2,如果可以,盡量使用GET /authors/12?categories=2
)
![[bzoj4003][JLOI2015]城池攻占_左偏樹](http://pic.xiahunao.cn/[bzoj4003][JLOI2015]城池攻占_左偏樹)
![【BZOJ1797】[AHOI2009]最小割（網絡流）](http://pic.xiahunao.cn/【BZOJ1797】[AHOI2009]最小割（網絡流）)
