Koa RESTful Demorestful.html

const users = [{id: 1, name: 'tom'}, {id: 2, name: 'jerry'}];
router.get('/', ctx => {
  console.log('GET /users');
  const { name } = ctx.query; // ?name=xx
  let data = users; // 查询数据库
  if(name){
    data = users.filter(u => u.name === name);
  }
  ctx.body = {ok: 1,data };
});
router.get('/:id', ctx => {
  console.log('GET /users/:id');
  const { id } = ctx.params; // /users/1
  const data = users.find(u => u.id == id);
  ctx.body = { ok: 1, data };
});
router.post('/', ctx => {
  console.log('post /users');
  const { body: user } = ctx.request; // 请求body
  user.id = users.length+1;
  users.push(user);
  ctx.body = { ok: 1 };
});
router.put('/', ctx => {
  console.log('put /users');
  const { body: user } = ctx.request; // 请求body
  const idx = users.findIndex(u => u.id == user.id);
  if(idx > -1){
    users[idx] = user;
    ctx.body = { ok: 1 };
  }
});
router.delete('/:id', ctx => {
  console.log('delete /users/:id');
  const { id } = ctx.params; // users/1
  const idx = users.findIndex(u => u.id == id);
  if(idx > -1){
    users.splice(idx, 1);
    ctx.body = { ok: 1 };
  }
});

restful.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <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="姓名"></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="doDelete">DELETE</el-button>
        <el-button v-on:click="put">PUT</el-button>
        <el-button @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:'name',
              id:1
            },
            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 doDelete() {
                const res = await axios.delete("/users/3");
            },
        }
    });
</script>
</body>
</html>