The term “big front end” became popular in “Dev ER” a few years ago, but what technologies are included in the big front end? Traditional FE, Native (Hybrid), Node, graphics technology, VR… Today we are going to focus on one of the simple ones — Nodejs (Request forwarding).

demand

It’s important to know exactly what you use Node for.

  • Read the corresponding API from the background
  • Process the read data and send it to the front end (itself)

It was obvious that this would do away with the JSP language entirely and leave the front-end to itself.

The development of

Let’s roll up our sleeves and get to work. Here is an example of “Demo in blog (open source)” to introduce the Express framework.

The directory organization

. ├ ─ ─ app. Js / / entry documents ├ ─ ─ the config / / configuration file ├ ─ ─ controllers / / controller ├ ─ ─ logs / / log ├ ─ ─ models / / model ├ ─ ─ node_modules / / dependence ├ ─ ─ Package. The json ├ ─ ─ public / / static resource ├ ─ ─ routes / / routing ├ ─ ─ services / / service ├ ─ ─ utils/method/tools ├ ─ ─ views / / template │ └ ─ ─ index. The HTML └ ─ ─ yarn.lockCopy the code

The directory mechanism is relatively simple from the start. Ok, let’s go over the main functions in detail.

Create entry file

Go to the project directory, create a new file app.js and enter the following:

var express = require('express') var http = require('http') var path = require('path') var ejs = require('ejs') var router = require('./routes/index') var app = express(); router(app); / / split routing app. The set (' port 'process. The env. Port | | 3000); app.set('views', path.join(__dirname, 'views')); app.use(express.static(path.join(__dirname, 'public'))); // Static file service location app.engine('.html', ejs.__express); // use.html as suffix app.set('view engine', 'HTML '); // Use ejS as template engine http.createserver (app).listen(app.get('port'), function () { console.log('Express server listening on port http://localhost:' + app.get('port')); });Copy the code

Break up the routing

Create a new file /router.js:

var index = require('./.. /controllers/index') module.exports = (app) => { app.get('/', index.index); app.get('/api/get', index.get); }Copy the code

In the future, you can add any other routes by modifying router.js.

Break up the model

The Model model specializes in handling data, whether it’s a database or requesting remote API resources, and should be its business. Naturally, we can isolate the request and do this:

Create a new folder and file /models/index.js and cut and paste the following code:

var myFetch = require('./.. /utils/fetch') var config = require('./.. /config/config') var errCode = require('./.. /config/errCode') var Index = { //get get: , the callback function (the req) {/ / here using the API myFetch zhihu daily (' https://news-at.zhihu.com/api/4/news/before/ '+ the req. T, {}, function (err, data) { if (! err) { callback(null, data) } else { callback(null, errCode.SERVER_ERR) } }) } } module.exports = IndexCopy the code

Split controller

The controller is responsible for requesting data from the model and sending it to the front end, serving as the front end and back end dispatcher. Here, we extract the anonymous functions from the app.get method, place them in /controllers/index.js, and replace the request Api code with a model as follows:

var Indexs = require('./.. /models/index') var Index = { //get '/' index: function (req, res, next) { res.render('index', { title: 'Express' }); }, //api/get get: function (req, res) { Indexs.get(req.query, function (err, data) { console.log(req.query, err, data) if (err) { res.json({ status: 500, msg: err }) } else { res.json(data) } }) } } module.exports = IndexCopy the code

Note: By convention, the name of the controller is usually a plural of the corresponding model name (noun).

After such modular arrangement, we easily implemented a simple MVC framework, its ease of use, scalability has been greatly improved. We can quickly add more functionality.

conclusion

The code covered in this article is still very simple, and more sophisticated features will need to be dealt with yourself.

All the code in this article is from my BOLG, welcome STAR STAR STAR. Portal > >