Node.js——浅谈Express的MVC(Model-View-Controller)模式使用

最新推荐文章于 2023-06-19 13:07:33 发布

fewuliu

最新推荐文章于 2023-06-19 13:07:33 发布

阅读量2.5k

点赞数 2

分类专栏： # Node.js web前端全栈

本文链接：https://blog.csdn.net/qq_42049445/article/details/99108101

版权

web前端全栈同时被 2 个专栏收录

38 篇文章

订阅专栏

Node.js

11 篇文章

订阅专栏

引言

相信学过ThinkPHP5之类的后端框架的盆友，都或多或少对MVC有些了解，而Express虽然官网给定生成应用模板中并没有相应的Model、Controller文件目录，但是当Express结合Mongoose的时候，MVC模式无疑是开发的首选。

路由

首先，任何一个后端，路由都是最重要的，而Express的路由就起着连接Controller的作用。接下来我们用一个简单的后端接口来讲解一下如何运用Express的MVC模式实现

应用的入口文件app.js

/**
	需要注意的是这次只展示部分代码
**/
//引入express
const express = require('express');
//引入写好的路由列表文件
const router = require('./routes/index');
const app = express();

router(app);

路由列表文件index.js

const ware = require('./ware');

//将所有的路由通过这个函数封装
module.exports = function  (app) {
	app.use('/ware', ware);
	//访问这个路由相当于/ware/list/:wareTypeId
}

路由文件 ware.js

const express = require('express');
const router = express.Router();
const WareHandler = require('../controllers/ware.js);

router.get('/list/:wareTypeId', WareHandler.getWare);
//向外暴露API
module.exports = router;

铺垫好了，进入正题了，控制器Controllers。控制器主要是通过操作Model对数据库进行增删改查操作，并且返回数据给前端。

在这里插入图片描述

//引入model
const Ware = require('../models/ware.js')

//返回数据
function getWare(req, res, next) {
	//接收请求参数

	const wareTypeId = req.params.wareTypeId;
	console.log(wareTypeId);

	//暂时定义一个北京的坐标
	const supportAreaId = "56c80e0c789b068408ab5a6f";

	try {
		// if (filter.where.supportAreaId === supportAreaId) {
			switch (wareTypeId) {
				case '56c80da883af652643474b6b': //水果
					//对Model进行查询操作
					Ware.find(
						{
							supportAreaId: supportAreaId,
							wareTypeId: '56c80da883af652643474b6b'
						}, 
						(err, data) => {
						if (err) {
							console.log('该类商品无数据');
							res.send({
								status: 0,
								type: 'ERROR_DATA',
								message: '获取数据失败'
							});
						}
						//将数据返回前端
						res.send(data);
						//也可以将数据返回到页面
						res.render('index', {
							data: data
						})
						// console.log(data);
					})
					break;
				case '56c80db78d04c83d3d1dedea': //食材
					break;
				case '56c80dc031da9e480de1cb49': //零食
					break;
				case '56c80dc031da9e480de1cb49': //牛奶
					break;
				default: //蔬菜
					break;
			}
		// }
	} catch(err) {
		res.send({
			status: 0,
			name: 'ERROR_DATA',
			message: '获取数据失败'
		})
	}
}
//向外暴露API  需要注意的是此时暴露的是一个对象，外部文件使用的时候需要.getWare()的方式使用
module.exports = {
	getWare
}

Models

const mongoose = require('mongoose')
const db = require('../mongodb/db.js')
const Schema = mongoose.Schema
//获取写好的JSON数据  用于填充Schema
const wareData = require('../data/ware.js')

//创建schema
const wareSchema = new Schema({
	"id": String,
	"unit": String,
	"originPrice": Number,
	"price": Number,
	"stock": Number,
	"name": String,
	"description": String,
	"thumbnail": {
		"url": String,
		"name": String,
		"id": String
	},
	"showType": Number,
	"supportAreaId": String,
	"wareTypeId": String,
	"createdAt": String,
	"updatedAt": String,
	"supportArea(uz*R*id)": String,
	"wareType(uz*R*id)": String,
	"wareInfo": String
})

//创建模型
const Ware = mongoose.model('Ware', wareSchema)

//如果模型中没有数据则将Json数据插入Model
Ware.find((err, data) => {
	if (!data) {
		for (let i = 0; i < wareData.length; i++) {
			Ware.create(wareData[i]);
		}
		console.log('数据初始化成功');
	}
});

//向外暴露API
module.exports = Ware

视图 index.ejs(本次用的ejs模板)

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <p>Welcome to <%= data%></p>
  </body>
</html>

好了由Express+Mongoose构成的MVC的开发模式就形成了，如果有所欠缺欢迎大家提出修改，共同进步。