前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Express告诉你什么叫MVC?

Express告诉你什么叫MVC?

原创
作者头像
iwhao
发布2024-07-06 10:31:08
1630
发布2024-07-06 10:31:08

前言

如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architectural pattern),属于编程的方法论,VC模式就是架构模式的一种。

那什么叫做MVC 呢,其实MVC是 三个单词的简写,

分别是 Model(模型) View(视图) Controller(控制器)

分别解释一下

View视图,很好理解就是直接面向用户的视图层,它是供给用户操作的界面,是程序的外壳

Model模型 是核心的数据层,也是程序需要操作的数据

Controller 控制器层,介于视图和模型之间 负责根据用户从视图层的 输入操作,获取数据层(Model)中的数据,然后对其进行相应的操作->或处理数据库数据或回给用户对应反馈

这三层是紧密联系在一起的,但又是互相独立的,每一层内部的变化不影响其他层。每一层都对外提供接口,供上面一层调用。这样一来,软件就可以实现模块化,修改外观或者变更数据都不用修改其他层,大大方便了维护和升级

下面基于 Express框架 来具体实现 一个 基于 mvc 架构的 小例子

Model

上文提到,模型是 数据层,既然是数据层,就少不了数据库,这里以操作mysql 数据库 为例子

首先 要本机要装mysql 数据库的服务,这里不做过多介绍,大家可以网上查询安装方法

需要下载的插件

mysql2 数据库支持

sequelize 操作mysql的ORM框架

async 异步处理方法库

代码语言:node.js
复制
    npm i mysql2
    npm i sequelize
    npm i async

创建 User数据库

创建 user 数据表

添加模拟数据

新增数据库配置文件

为了便于其他文件引用数据库对象,将数据库对象实例化放在一个单独的文件里,跟目录下创建 database目录,并在database目录下创建index.js文件 写入如下配置

代码语言:node.js
复制
var Sequelize = require('sequelize')
var Config = require('../config.js')
// 实例化数据库对象
var sequelize = new Sequelize(
  'user',
  'root',
  '12345678',{
    host: 'localhost',
    // 数据库类型
    dialect: 'mysql',
    // 是否打印日志
    logging: true,
    pool:{
      max: 5,
      min:0,
      idle: 10000
    },
    // 禁用所有时间戳开启
    define: {
      timestamps: false
    },
    // 市区设置
    timezone: '+08:00'    
  }
)
module.exports = sequelize

新增model文件(orm数据库映射文件)

对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术。简单的说,ORM是通过使用描述对象和数据库之间映射 的元数据,将程序中的对象自动持久化到关系数据库中

安装完后数据库支持并增加了数据库配置文件后,需要定义model 根目录下创建models目录,并在models目录下创建user.js文件 内容如下

代码语言:node.js
复制
const Sequelize = require('sequelize')
const db = require('../database/index.js')
// 定义model
const User = db.define('user', {
  // primaryKey:是否为主键 allowNull是否允许为空  autoIncrement 是否 自增
  id: {type: Sequelize.INTEGER, primaryKey: true, allowNull: false,autoIncrement:true},
  name: {type: Sequelize.STRING(20), allowNull: true},
  age: {type: Sequelize.INTEGER(2), allowNull: true},
})

module.exports = User

至此 model层 完成

View 视图层

视图层 上一下篇文章具体写过,详情请看 Express-视图模版

views目录下新建index.html

内容如下

代码语言:jade
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  {{each list as item}}
  <p>数字:{{item.id}} 名字: {{item.name}} 年龄:{{item.age }}</p>
  {{/each}}
</body>
</html>

Controller 业务流畅控制层

最关键的部分来了,上面说道,Controller层是视图和模型之间的桥梁

下面开始 Controller层的 创建

首先创建个常量配置 根目录下 新建constant 目录 并在此目录下 创建status.js 内容如下

代码语言:node.js
复制
const status = {
  SUCCESS: {
    code:200,
    msg:'成功'
  },
  ERROR:{
    code: 500,
    msg: '出现错误'
  },
  LACK:{
    code:403,
    msg:'缺少参数'
  }
}

module.exports = status

根目录下创建 controller目录 并在controller目录下创建 user.js 控制器

具体内容如下

代码语言:node.js
复制
const async = require('async')
const UserModel = require('../models/user')
const Constant = require('../constant/status')

let exportObj = {
  getList
}

// 获取用户列表
function getList (req,res,next){
  let task = {
    query: cb => {
    // 使用 sequelize的model 的findAll 方法查询数据
      UserModel.findAll({limit:10}).then((result) => {
      // 处理数据获取想要的字段
        cb(null,result.map(res => {
          return {
            id:res.id,
            name:res.name,
            age:res.age
          }
        }))
      }).catch((err) => {
        console.log(err)
        cb(Constant.ERROR)
      })
    }
  }
  async.auto(task, (err, result) => {
    if(err){
      console.log(err)
    }
    console.log(result['query'])
    // 输出数据到视图
    res.render('index', {list:result['query']})
  })
}

module.exports = exportObj

路由配置

引入控制器,绑定路由器地址

代码语言:node.js
复制
const user = require('../controllers/user')

router.get('/user', user.getList)

最终效果如下

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • Model
    • 新增数据库配置文件
      • 新增model文件(orm数据库映射文件)
        • 路由配置
    • View 视图层
    • Controller 业务流畅控制层
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档