【node进阶】深入浅出---MVC设计模式&RESTful风格

简介: 【node进阶】深入浅出---MVC设计模式&RESTful风格

0.gif

接口规范

RESTful架构


  • 为什么要用RESTful


在以往我们去写接口的时候,我们总是自己去命名,虽然不影响正常的使用,但是当你进入到一个大一点的开发团队里面你得遵循团队的接口规范,大多数团队用的就是RESTful规范(当然,不是所有的团队都是,但是你通过学习RESTful就可以轻松入手其他的规范,道理是相差无几的),为了能够无缝衔接的进入到团队开发,RESTful架构是值得学习的。


  • 通俗理解RESTful


RESTful就是对自己写的接口进行规范化,使用RESTful架构可以充分的发挥GET、POST、PUT、DELETE 四种请求方式的意义,简单的来说url地址中只包含名词表示资源,使用http的动词(GET | POST | PUT | DELTE)表示要进行的动作进行操作资源


  • 举例


错误的设计方式


//添加用户
router.post('/user/addUser',(req,res)=>{
  //...
})
//更新用户信息
router.put('/user/updateUser',(req,res)=>{
  //...
})
//删除用户
router.delete('/user/delUser',(req,res)=>{
  //...
})
//获取用户信息
router.get('/user/getUser',(req,res)=>{
  //...
})


正确的设计方式


//添加用户
router.post('/user',(req,res)=>{
  //...
})
//更新用户信息
router.put('/user/:id',(req,res)=>{
  //...
})
//删除用户
router.delete('/user/:id',(req,res)=>{
  //...
})
//获取用户信息
router.get('/user',(req,res)=>{
  //...
})


注意:后端要跟前端进行语义化的规定,统一战线!例如:想要获取用户信息,前端发送GET请求即可…


使用方式


REST要求,必须通过统一的接口来对资源执行各种操作:


image.png

image.png


过滤信息


一般情况下我们只是把?简单的当做是参数的传递,很容易造成url过于复杂、难以理解。可以把?用于对资源的过滤.

例如:


image.png


注意:我们在进行筛选的时候一定要与后端做好约定。


业务分层


MVC设计模式


MVC应该是编程界众所周知的,M即Model,V即View,C即Controller。分别对应我们的业务模型,用户界面和控制器。用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。


上面一直用官方的话来说,大家肯定觉得比较抽象,下面我以画图的形式展现了出来(画的不好,大家应该可以看懂),MVC每层之间的逻辑关系:


1.png


controller:C层负责业务逻辑(view与model之间的桥梁)

view:V层负责展现页面

model:M层负责处理数据(连接数据库进行增删改查)


node中使用MVC思想


在这里先分享一下node中的MVC是怎么样实现的,如下图所示:


2.png


node中MVC实现代码(RESTful+MVC)


通过上图我们了解到了MVC思想在node中怎么执行的,接下来,我们通过代码进行分析:


1.代码架构


/

3.png


2.db.config.js(连接数据库



//链接数据库
const mongoose = require("mongoose")
mongoose.connect("mongodb://127.0.0.1:27017/lzq_project")
//插入集合和数据,数据库lzq_project会自动创建


3.UserService.js(创建模型,配置数据库信息)



const mongoose = require('mongoose')
const UseeType = {
    username : String,
    password : String,
    age : Number
}
const UserModel = mongoose.model('user',new mongoose.Schema(UseeType))
//模型user 将会对应 users 这个集合,
module.exports = UserModel


4.user.js(用户路由模块)



var express = require('express');
const UserController = require('../controllers/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)
//动态路由,获取id
router.put('/user/:id',UserController.updateUser)
//删除请求  restful
router.delete('/user/:id',UserController.delUser)
router.get('/user',UserController.getUser)
module.exports = router;


5.UserModel.js(M层,业务逻辑实现数据库增删改查)


const UserModel = require("../model/UserModel")
const UserService = {
    addUser : (username,password,age) => {
        return UserModel.create({username,password,age})
    },
    updateUser : (_id,username,password,age)=>{
        return UserModel.updateOne({_id},{
            username,password,age
          })
    },
    delUser : (_id) => {
        return UserModel.deleteOne({_id})
    },
    getUser : (page,limit) => {
        return UserModel.find({},["username","age"]).skip((page-1)*limit).limit(limit).sort({age:-1})//年龄倒序排列---  -1   正序   1
    }
}
module.exports = UserService


6.UserController.js(C层,把M层的数据给V层)


const UserService = require("../services/UserService");
const UserController = {
    addUser: async (req,res)=>{
        console.log(req.body);
        //插入数据库
        // 1.创建模型,一一对应数据库的集合(users)
        const {username,password,age} = req.body
        await UserService.addUser(username,password,age)
        res.send({
            ok:1
          })
    },
    //更新用户信息的回调函数
    updateUser: async (req,res)=>{
        console.log(req.body,req.params.id);
        const {username,password,age} = req.body
        await UserService.updateUser(req.params.id,username,password,age)
        res.send({ok:'ok'})
    },
    delUser : async (req,res)=>{
        await UserService.delUser(req.params.id)
        res.send({ok:'1'})
    },
    getUser : async (req,res)=>{ 
        console.log(req.query);
        const {page,limit} = req.query
        const data = await UserService.getUser(page,limit)
        res.send(data)
      }
}
module.exports = UserController


7.index.ejs(V层,前端显示的页面)


<body>
  <h1>mongoDB增删改查的演示</h1>
  <div>
    <div>用户名:<input id="username" /></div>
    <div>密码:<input type="password" id="password" /></div>
    <div>年龄:<input type="age" id="age" /></div>
    <div><button id="register">注册</button></div>
  </div>
  <hr>
  <div>
    <button id="update">更新</button>
    <button id="del">删除</button>
  </div>
  <hr>
  <table border="1">
    <thead>
      <tr>
        <td>id</td>
        <td>用户名</td>
        <td>年龄</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    let name = document.querySelector('#username')
    let psd = document.querySelector('#password')
    let age = document.querySelector('#age')
    register.onclick = () => {
      console.log(name.value, psd.value, age.value);
      fetch("/api/user", {
        method: 'post',
        body: JSON.stringify({
          username: name.value,
          password: psd.value,
          age: age.value
        }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json())
        .then(res => {
          console.log(res);
        })
    }
    update.onclick = () => {
      fetch("/api/user/634f5d8ed2922eaf4a9972b1", {
        method: 'put',
        body: JSON.stringify({
          username: "修改的名字",
          password: "修改的密码",
          age: 20
        }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json())
        .then(res => {
          console.log(res);
        })
    }
    del.onclick = () => {
      fetch("/api/user/634f5d8ed2922eaf4a9972b1",{
        method:'DELETE'
      }).then(res => res.json())
        .then(res => {
          console.log(res);
        })
    }
    fetch("/api/user?page=1&limit=5").then(res => {
      return res.json()
    }).then(res => {
      console.log(res);
      let tbody = document.querySelector('tbody')
      tbody.innerHTML = res.map(item => {
        return `<tr>
              <td>${item._id}</td>
              <td>${item.username}</td>
              <td>${item.age}</td>
              <td><button data-id="${item._id}" id="btn">更新</button> <button data-id="${item._id}" id="del">删除</button></td>
             </tr>`
      }).join('')
      tbody.onclick = (event) => {
        console.log(event.target);
        if (event.target.id === "btn") {
          fetch(`/api/user/${event.target.dataset.id}`, {
            method: 'post',
            body: JSON.stringify({
              username: "以后绝不压竞猜&阿修",
              age: 22
            }),
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => res.json())
            .then(res => {
              fetch("/api/user?page=1&limit=5").then(res => res.json())
                .then(res => {
                  tbody.innerHTML = res.map(item => {
                    return `<tr>
              <td>${item._id}</td>
              <td>${item.username}</td>
              <td>${item.age}</td>
              <td><button data-id="${item._id}" id="btn">更新</button> <button data-id="${item._id}" id="del">删除</button></td>
             </tr>`
                  }).join('')
                })
            })
        }
        if (event.target.id === 'del') {
          console.log(event.target.id);
          fetch(`/api/user/${event.target.dataset.id}`).then(res => res.json()).then(res => {
            fetch("/api/user?page=1&limit=5").then(res => res.json())
              .then(res => {
                tbody.innerHTML = res.map(item => {
                  return `<tr>
              <td>${item._id}</td>
              <td>${item.username}</td>
              <td>${item.age}</td>
              <td><button data-id="${item._id}" id="btn">更新</button> <button data-id="${item._id}" id="del">删除</button></td>
             </tr>`
                }).join('')
              })
          })
        }
      }
    })
  </script>
</body>


最终效果


4.gif


MVC的优缺点


从上面的代码中可以观察得出来一个事情,我们的代码结构很清晰,分离一层一层去写,方便维护,但是同时发现项目明显的便复杂了,所以总结了MVC的优缺点


MVC的优点


  1. 耦合性低,方便维护,可以利于分工协作
  2. 代码的复用性比较强


MVC的缺点:


项目变得的确优点复杂,对书写代码的小伙伴们要求得比较多


小结


大家跟我的node专栏学习走到这里就可以发现一个有趣的事情:


node+express+RESTful+MVC嘎嘎好用,其实到这里你的node可以进行适当的开发了,后面的文章加一个身份验证以及写一个全栈项目,node就要完结了,所以下一篇就是我们的身份验证,同时还要更新【node番外】mongoDB和mysql两个数据库哦,以及node连接数据库。

少年,继续加油吧!😀😀


相关文章
|
2月前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
91 3
|
6天前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
23 3
|
30天前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API 服务器
【10月更文挑战第3天】使用 Node.js 和 Express 构建 RESTful API 服务器
|
21天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
14 0
|
26天前
|
JSON JavaScript API
Node.js RESTful API
10月更文挑战第8天
12 0
|
30天前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API
【10月更文挑战第3天】 使用 Node.js 和 Express 构建 RESTful API
|
30天前
|
Web App开发 JSON JavaScript
使用 Node.js 构建一个简单的 RESTful API
【10月更文挑战第3天】使用 Node.js 构建一个简单的 RESTful API
|
3月前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。
|
2月前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第34天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
3月前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第31天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!