This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge
preface
How to design the structure of a program, this is a specialized knowledge, called “architectural pattern” (ARCHITECTURAL pattern), belongs to the methodology of programming, MVC pattern is a kind of architectural pattern.
So what is MVC? MVC is a shorthand for three words, Model, View, Controller.
Explain each of them
A View is a View layer directly facing the user. It’s the interface that the user operates on. It’s the shell of the application
Model The Model is the core data layer and the data that the program needs to operate
Controller The Controller layer between the view and the Model is responsible for retrieving data from the data layer (Model) based on user input from the view layer, and then performing corresponding operations on it -> processing database data or returning feedback to the user
These three layers are closely linked, but they are independent of each other, and changes inside each layer do not affect the other layers. Each layer provides an external interface that can be invoked by the layer above. In this way, the software can be modularized, modifying the appearance or changing data without changing the other layers, greatly facilitating maintenance and upgrading
The following Express framework based on specific implementation of a small example based on MVC architecture
Model
As mentioned above, the model is the data layer. Since it is the data layer, the database is indispensable. Here, the operation of mysql database is taken as an example
First of all, this machine to install mysql database services, here do not do too much introduction, you can query the installation method online
Plug-ins that need to be downloaded
Mysql2 database support
Sequelize operates mysql’s ORM framework
Async Library of asynchronous processing methods
npm i mysql2
npm i sequelize
npm i async
Copy the codeCreate user database
Create user data table
Adding simulation Data
New database configuration file
To make it easier for other files to reference the database object, put the database object instantiation in a separate file, create the database directory under the database directory, and create the index.js file under the database directory and write the following configuration
var Sequelize = require('sequelize') var Config = require('.. Var sequelize = new sequelize ('user', 'root', '12345678',{host: 'localhost', // database type dialect: 'mysql', // whether to print logs logging: true, pool:{Max: 5, min:0, idle: }, // disable all timestamps define: {timestamps: false}, // set timeZone: '+08:00'}) module.exports = sequelizeCopy the codeNew model file (ORM database mapping file)
The Object Relational Mapping (ORM) pattern is a technique for resolving the mismatch between object-oriented and Relational databases. In simple terms, ORM automatically persists objects in a program into a relational database by using metadata that describes the mapping between objects and databases
After the database support is installed and the database configuration file is added, you need to create the Models directory under the Model root directory and create the user.js file under the Models directory
const Sequelize = require('sequelize') const db = require('.. /database/index.js') // define model const User = db.define(' User ', 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 = UserCopy the codeAt this point the Model layer is complete
View the View layer
The view layer is detailed in the next article, see the Express-View section for details
The contents of the new index. HTML in the views directory are as follows
<! 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, "> <title>Document</title> </head> <body> {{item as item}} <p> . {{item name}} age: {{item. Age}} < / p > {{/ each}} < / body > < / HTML >Copy the codeController Business process control layer
Now, the key part, it says, is that the Controller layer is the bridge between the view and the model
Create a constant directory in the root directory and create status.js
Const status = {SUCCESS: {code:200, MSG :' SUCCESS '}, ERROR:{code: 500, MSG :' SUCCESS '}, }, LACK:{code:403, MSG :' missing parameter '}} module.exports = statusCopy the codeCreate the controller directory in the root directory and the user.js controller in the controller directory
The details are as follows
const async = require('async') const UserModel = require('.. /models/user') const Constant = require('.. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} Cb => {userModel.findall ({limit:10}).then((result) => {// process the data to get the desired field 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']) // Output to view res.render('index', {list:result['query']}) }) } module.exports = exportObjCopy the codeThe routing configuration
Import the controller and bind the router address
const user = require('.. /controllers/user') router.get('/user', user.getList)Copy the codeThe final result is as follows
That’s all for this post, thank you very much for reading here, if this article is good or a little bit of help to you, please like, follow, share, of course, any questions can be discussed in the comments, I will actively answer, thanks again 😁