Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to build a lightweight and naturally support SSR CMS system-SimpleCMS" from scratch. The content of the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to build a lightweight and natural SSR support CMS system-SimpleCMS" from scratch.

Technical architecture and implementation scheme

In order to reduce the cost of use and deployment, we have adopted the following technologies:

Service layer: koa2 + nodejs + jsonSchema (of course, a lot of nodejs middleware is also used)

Foreground page: pug (combined with nodejs to achieve front and rear isomorphism, and natural SSR)

Background management: umi3.0 + react + antd + axios + typescript (of course, many front-end plug-ins are also used, such as rich text, md editor)

System / server related: linux / pm2 / nginx

The basic architectural pattern is shown in the following figure:

System page architecture diagram:

Functional analysis

Next, the author will introduce the function points of simpleCMS. Let's first analyze the background management system.

Function Analysis of background Management system

Background management system is a necessary module of dynamic blog system, it can easily manage our website data. Here, the author takes you to take a look at the basic modules of the background management system:

Login page

Data market

Content management

Page configuration

Advertising configuration

User information management

Multilingual support

The above are the necessary modules of the cms management system. Here we basically use react hooks to write them. The specific pages are as follows:

1 login page

2 data market

3. Article management

4 content editing

5 multilingual support

Other pages will not be displayed one by one, interested friends can experience it. The main technology is realized by umi + antd + react + typescript. If you are interested, you can refer to and learn on github.

Analysis of the basic functions of the front desk

The front desk is mainly our blog website, here uses pug this template engine to realize, the interactive function uses everybody most familiar jquery. The basic modules of the foreground are:

Home page of the blog

Article list page

Article details page

The corresponding interactive functions include like, comment, article search and so on. The basic pages are as follows:

1 homepage

2 list page

3 details page

4 comments and likes

As the pug template engine is suitable for some display websites, it is very suitable for use in cms systems. We can also use template engines such as ejs.

Technical implementation details

Because the whole cms system is a complete technical closed loop and the data flow is related, the author mainly summarizes the technical details of implementing a cms.

Implementation of data statistics function-- using nodejs timing task (node-schedule)

Rich text and md editor implementation

Background multilingual implementation scheme

Content management process design

Pug templates and data interaction

Design of jsonSchema data structure

Handwritten simple encryption and decryption algorithm

Cross-domain solution and user rights design

Pm2 manages node processes and does load balancing

Design of concurrent Lock in Multi-process scenario

Realization of data statistics function

Data statistics are mainly the pv of the statistics website, the number of readings and likes of a single article, in order to better analyze, we need to statistics and store the data of a single day, the specific implementation is to use scheduled tasks to carry out data statistics before the end of the day, here we use node-schedule to achieve, the specific use of the author has also been introduced in the previous article, interested can refer to.

The basic uses are as follows:

Let schedule = require ('node-schedule'); let testJob = schedule.scheduleJob (' 42 *', function () {console.log ('this code will be executed at 42 at every moment in the future, such as 22:42, 23 node-schedule' 42');})

Implementation of rich text and md editor scheme

The rich text component we use here is braft, which basically meets the business needs in terms of function and expansibility. Md editor is the basic way for programmers to write blogs. For-editor is mainly used here, followed by secondary packaging to support the clipboard function.

Internationalization plan

React-intl, which is mainly used in multiple languages, is well integrated by umi, so we only need to build basic multilingual rules. For example, create a locales folder in the project directory, and then store the zh (Chinese) / en (English) files. The basic code is as follows:

/ / locales/en/user export default {simpleCMS_DESC: 'Easy to use CMS system, help everyone to have their own website blog.', CopyrightText:' SimpleCMS rusted team',} / / locales/zh/user export default {simpleCMS_DESC: 'easy-to-use cms system helps everyone to have their own website blog.' CopyrightText: 'SimpleCMS R & D team'} Thank you for your reading. The above is the content of "how to build a lightweight and natural SSR-supporting CMS system-SimpleCMS" from scratch. After the study of this article, I believe you have a deeper understanding of how to build a lightweight and natural SSR-supporting CMS system-SimpleCMS from scratch, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.