node的接口规范与业务分层

接口规范

服务器上每一种资源, 比如一个文件,一张图片,一部电影,都有对应的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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值