【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连接数据库。

少年,继续加油吧!😀😀


相关文章
|
1月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
23天前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
38 12
|
29天前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
1月前
|
JSON JavaScript API
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。
|
1月前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
51 4
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
1月前
|
JavaScript 前端开发 NoSQL
深入浅出:使用Node.js构建RESTful API
【10月更文挑战第35天】在数字时代的浪潮中,后端技术如同海洋中稳固的灯塔,为前端应用提供数据和逻辑支撑。本文旨在通过浅显易懂的方式,带领读者了解如何利用Node.js这一强大的后端平台,搭建一个高效、可靠的RESTful API。我们将从基础概念入手,逐步深入到代码实践,最终实现一个简单的API示例。这不仅是对技术的探索,也是对知识传递方式的一次创新尝试。让我们一起启航,探索Node.js的奥秘,解锁后端开发的无限可能。
|
2月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
26 0
|
2月前
|
JSON JavaScript API
Node.js RESTful API
10月更文挑战第8天
18 0
|
2月前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API
【10月更文挑战第3天】 使用 Node.js 和 Express 构建 RESTful API