"Web Development" Mean Web development 01-express Implementing MVC pattern Development

Introduction

Mean is a full stack development framework for JavaScript. More about

Implementing MVC pattern Development with Express is a part of mean web full stack development.

Express is a minimalist, flexible Web application Development framework based on the node. JS platform that provides a range of powerful features to help you create a wide variety of web and mobile device applications. Express website.

Two types of folder structure

Horizontal folder structure:

Categorized according to the functionality of the file. The entire application category is placed in a directory that is grouped by the MVC folder structure. For example:

The app folder is used to save the logical part of the Express app related code, including:

Controllers folder: Controller files for express apps

• Models folder: Store app model
• Routes folder: Storing routing middleware files
• Views folder: Store app view File

The Config folder is used to store the express configuration file. For example:

Env folder: Store Express Application Environment profile (test, development environment switch, etc.)

Config.js file: For Express application Configuration

Express.js file: For Express application initialization

The public folder user saves the browser-side static files and again follows the MVC pattern into:

• Config folder: A configuration file for storing Angularjs apps
• Controllers folder, user Store control file for Angularjs app
• CSS folders: Storing CSS Styles
• Directives folder: Command file for ANGULARJS application
• Filters folder: A filter file that holds the Angularjs app
• IMG folder: Storing pictures
• Views folder: The view file that holds the Angularjs app
• Application.js file: Initialization for ANGULARJS

Package.json file: Metadata for managing application dependencies

Server.js file: Is the main file of the node program, loading the boot of Express.js Boot Express app in a modular way

Vertical folder structure:

File and folder management according to the functions implemented by the file, each feature has its own MVC pattern organization directory structure, more suitable for large projects. Like what:

The server folder is used to store the logic of the servers, which can be divided internally according to MVC:

Controllers, models, routes, Views, config (EVN, feature.server.config.js) folders

The client folder is used to store clients ' files, which are categorized according to the MVC pattern:

Config, controllers, CSS, directives, filters, IMG, views, feature.client.module.js files and folders, etc.

take the horizontal folder structure as an example

1. First create the following directory:

2.package.json code content is as follows, temporarily unused dependencies can not write up.

{  "name": "Websiteframe03",  "version": "0.0.0",  true,  "Scripts": {    "start": "Node Server.js"  },  "dependencies": {     "Body-parser": "~1.16.0",    "Cookie-parser": "~1.4.3",    "Debug": "~2.6.0",     "Ejs": "~2.5.5",    "Express": "~4.14.1",
"Serve-favicon": "~2.3.2"  }}

3. In the App/controllers folder, create a name of Index_server_ Control.js files, note the naming method, because the project's front-end angularjs will also involve the MVC pattern, so try to distinguish the front-end and back-end MVC file naming way.

Controller: Index_server_control.js file inside the code is as follows:

/**/Exports.render=function(req,res) {    console.log (' Start Index_server_control_render ');     // res.send (' Hello World ');    Res.render (' index ', {title: ' Hello world title '});

4. Two ways of routing:

1.app.route (Path). VERB (callback)

2.app. VERB (Path,callback)

(verb to replace lowercase http method names, such as GET, post)

Create the route file Index_server_routes.js, and then add the following code:

/**/var index=require ('.. /controllers/index_server_control.js '); function index_server_routes (APP) {    console.log (' Start index_server_routes ');    App.get ('/', Index.render);     return app;} Module.exports=index_server_routes;

5. Next create the Express_config.js file to create the Express Application object in two steps:

• A. Creating an express application instance
• B. Call the route file created earlier to pass in the application instance as a function call

The functions in the routing file call the controller's render () method for the application instance to create a new routing configuration, and finally return to the processed application instance with the following code:

/** * Created by Goss on 2017/6/6. * Configure the Express app, and all configurations related to the Express app need to be added to this file*/varExpress=require (' Express ');varIndex_server_routes=require ('.. /app/routes/index_server_routes.js ');functionExpress_config () {Console.log (' Start Express_config '); varapp=Express (); App.set (' Views ', './app/views ');//set the view file storage directoryApp.set (' View engine ', ' Ejs ');//set Ejs as the template engine for express applications    Newindex_server_routes (APP); App.use (Express.static ('./public '));//specifies the path to the static file, which is to be placed under the routing middleware, i.e. the routing logic is executed first    returnapp;} Module.exports=express_config;

6. Finally write the main program code in the root directory of the Server.js file, by including Express configuration module, get Express Application object instance, and listen to 8080 port, the code is as follows:

var express_config=require ('./config/express_config.js '); var app=New  express_config (); App.listen (8080); Console.log (' server running at http://localhost:8080 '= app;

7. Add the Ejs view render file to the Views folder and add the App.set to the Express_config.js file to set the engine, the Index.ejs code is as follows:

<!DOCTYPE HTML><HTML>  <Head>    <title><%=title%></title>    <Linkrel= ' stylesheet 'href= '/stylesheets/style.css '/>  </Head>  <Body>    <H1><%=title%></H1>    <P>Welcome to<%=title%></P>  <imgsrc= "/images/timg.jpg"alt= "img">  </Body></HTML>

8. Static file path configuration, that is, add a static file path inside the express_config.js:

App.use (Express.static ('./public '));    // specifies the path to the static file, which is to be placed under the routing middleware, i.e. the routing logic is executed first

Last run: node server runs the service side, open in browser: http://localhost:8080

Next add: MongoDB

Web Development Mean Web Development 01-express Implementing MVC pattern Development