Nodejs Project Summary

A few days ago spent 3 days, build, develop a client, CMS, server side of the project, also because of the previous development experience of PHP, as well as the design and application of SQL has not encountered any obstacles. As for the construction of the project Structure (architecture), it is also common, the premise of modularization, easy to collaborate and expand. and build tools, but also just Nodejs server side slightly unfamiliar, mastered the idea, it is simple.

First, the technology stack

Vue Family Bucket + element-ui + Axios + sass + webpack + ES6/ES7 + nodejs (Express) + MongoDB (Mongoose)

Element-ui: used to build the CMS UI.

Axios: The server-side data request uses Axios instead of vue-resource (Maintenance is stopped). Use its get/post/put/delete/(Patch unused) method, as defined by the RESTful API. When you perform post and update (Put, patch, update), you need to content-type by ' application/json ' = ' application/ X-www-form-urlencoded '; There are several ways to convert:

• A, window. Urlsearchparams (presence compatibility);
• B, Qs.stringify (): Converts the object to the form of a URL.

Tips: If the server is Nodejs, you can use the Body-parse middleware to convert post/update data into objects, which can be set by its Extened property, and when fetching req data, Use Req.body.paramsName rather than req.query in the Get method.

ES6/7: Because of the existence of Babel (and Polyfill supplement), the characteristics of ES6/7 can be better used, such as structural analysis, rest, promise, module management, async/await, symbol, set, etc. At the same time, because Nodejs is the event loop mechanism, it uses async/await to get the return result, which is a synchronous syntax but not a true synchronization, and does not affect concurrency (Nodejs advantage).

Express: a Web development framework consisting of routing and middleware, essentially, an Express application is invoking a variety of middleware. The middleware is: function (req, res, next) {...//next (); Execute next middleware}.

MongoDB: A document-based database, relatively stable relational database, the consistency and so on may be insufficient, not suitable for financial business. Excerpt

II. Structure of the project

Structure diagram

2.1, Build, Cms-build

Webpack configuration for client, CMS in Dev, production environment, respectively. Several important middleware in the dev environment are described below:

• webpack-hot-middleware: module Thermal loading;
• Webpack-dev-middleware: The compiled content is stored in memory;
• Http-proxy-middleware: implements interface proxy, which can access other interfaces across domains in the local environment: such as Rap API;
• Connect-history-api-fallback: When a refresh is controlled, the front-end route is accessed if the route does not exist.

2.2, client, CMS

Respectively, the client, the CMS source code, its subdirectories, the corresponding folder contents are:

• API: Save interface API and Axios encapsulation, here will handle the unified request time-out and other errors, the interface name is unified management;
• Assets: save style, Reset.scss, Common.scss, Style.scss, where a uniform variable is stored in style.scss (such as $mainbgcolor, $mainFontColor, $ Mainbordercolor, $designWidth, etc.), minxin, function, etc.;
• Components : public component library;
• Libs:Utils.js, preload.js and other tools functions, plug-ins, etc.;
• Router: routing, on-demand loading of routes, etc. previously collated, do not repeat);
• store:Vuex; (Vuex's modularity has also been collated, not repeat);
• Views :Vue business components.

2.3. config

Webpack differentiated configuration information and locally developed routing agent configuration information for each production environment.

2.4. Public

CMS: for the CMS in the production environment of the compilation generation, when the Nodejs server side capture to the path of/cms/* (CMS page refresh), directed to the folder;

main: for the client in the production environment of the build, when the Nodejs server to capture the/pages/* path (client page refresh), directed to the folder;

2.5. Server

Through the Nodejs Express framework of the service side, the Client\cms API and page access to provide data and files and other resources services.

• Controller: processing business, including res data validation, format processing, etc.;
• Models: A collection of database operations, including the scheme, model, and other declarations, definitions, etc.;
• Libs:utils, MSG (errormsg, code, etc.) common plug-ins, tool functions of the unified management;
• Router:Express routing, divided into API interface, CMS page response, client page response, etc.
• db.js: database Management (connectivity, etc.)
• app.js: server static service, cookie, session and other configuration and monitoring;
• Index.js: registers the corresponding configuration of Babel and Babel parsing, including ignoring. babelrc files, Commonjs compiling, asynchronous support, etc.; load the execution app; run the server through node./server/index.js. This method is a relatively simple method of compiling, which makes support ES6/7, of course, can also be webpack parse to get Nodejs execution script, but it is necessary to pay attention to set the target: ' Node ' property in Webpack so that the generated script node can run. When implementing an SSR, you can use the Webpack compilation parsing method, depending on the needs of the project.

2.6, Upload

For file, image upload location, using Express static server method for processing, can be accessed via HTTP.

Nodejs Project Summary