As front-end development engineers, in addition to the accumulation of javascript, CSS and HTML, we also need to have some knowledge of HTTP, browser rendering principles and even some knowledge of the back end, which will be more helpful to our career development.

Project background

As I am very interested in the front-end field and have been exposed to front-end early, I usually use front-end technology to do some interesting things, including H5 games, some simple framework packaging, scaffolding design and so on, which have been described in detail in my previous articles. Recently, I want to make a summary of node server technology, VUE, React hooks and other technical practices. I also hope I can make some practical projects, which can be improved, optimized and iterated together by open source.

So based on this idea, I thought of CMS, can we do such a system, through some configuration, generate their own blog site? While there are a number of good blogging systems available, such as Hexo, you can also look at the good open source sources and reap the benefits.

The technical architecture

I adopted the way of separating the front and back ends for development. The specific technology stack is as follows:

  • Server: NodeJs + Koa + redis + json-schema
  • Manage background: vue-cli3 + Vue + vuex + typescript + AXIos + ANTd
  • Foreground page: WP (own webpack-based development scaffolding) + React + Axios + ANTD
  • Deployment online: PM2 + nGINx
  • Code management: Git

We’ll use the latest react-hooks basics, and we’ll also teach you some basic usage. Technical Architecture Diagram:

The realization effect and key technology point are introduced

1. Establish the node server

Here we adopt Koa, a lightweight server framework of the Node community, and then the server middleware has:

  • Ramda function library, providing an elegant way to invoke business logic, address ramda
  • Koa-static provides static resource access, the specific purpose of which will be described in detail in the project implementation details
  • Koa-logger Console output request logs for debugging during development
  • Koa-body processes request packets and allows KOA to easily obtain POST/PUT data
  • Koa-session Processes session-related operations
  • Koa2-cors Cross-domain problems are handled in CORS mode
  • Ioredis nodeJs based Redis client, performance and operation is very good
  • Jsonschema validates the JSON data format, which I use to encapsulate the Redis schema
  • The multer handles file uploads
  • Koa-router is used to write server routing and apis
  • Bcrypt Encrypts the user password

The above is the main middleware used by our Web server. As for how to organize and structure each piece, including the implementation of error checking middleware, I will introduce one by one later. Since I have consulted a lot of information in the process of writing the server, if there is any shortage or need to be optimized, please feel free to communicate.

The server can be roughly divided into the following layers:

2. Background management system

The background management system mainly adopts VUE related ecology. I will use typescript and VUex to organize and manage code and project status. The main modules include login module, permission control, blog configuration page, article writing and modification page, data statistics page, etc. The third party UI adopts ANTD.

Login module:

Home page module:

Preview page: Supports preview on the PC and mobile devices

Then the key point is how to maintain the configuration data and the design of the config data structure. Considering the preview function and editing, the state designed is both synchronous state and asynchronous state, so 80% of our business is done in VUEX. Wangeditor is used for article editing, but you can also use other rich text editors to achieve more powerful features. The renderings are as follows:

In general, vUE’s background management system mainly uses the core libraries of VUex, VuE-Router, ANTD, AXIos, and WangEditor. Typescript is mainly used for type checking. It mainly involves the definition of interface types. But there’s a little bit of interface inheritance involved. The use of components in the page and the encapsulation of custom components will also be introduced in detail in the later stage. If you have better thinking and experience, you can communicate more.

3.CMS foreground implementation

For the foreground implementation, I mainly use react related ecology to implement, and vue is also ok for this part, mainly because I want to review and further use React hooks to implement some interesting things. The main techniques used are: React-router-dom, ANTD, Axios, React-hooks. If you want to try using redux, you can also use it. I will also summarize the related articles and technical tips later.

Theoretically, this will involve server rendering, because an important point of C-end products is SEO, so SSR related technologies will be added later. At present, pseudo SSR technology is realized by using skeleton screen.

Then, we adopted create-React-app as the scaffold of the project, instead, we summarized and developed the scaffold based on Webpack. If you are interested in Webpack, you can explore the mystery of Webpack together. Since everyone has a different configuration page, here is a blog site configured through our management system:

The last

Recently, I have spent my spare time in optimizing and adjusting the project code, nGINX server configuration and server performance, so I hope that interested friends can join us to create a more perfect CMS. Later, the specific implementation process and details of the system will be introduced in more detail, as well as server related configuration, including the open source address of the project. I will tell you before October 11. Welcome to join us in the public account “Interesting Talk Front” to discuss.

More recommended

  • “Javascript advanced programming” core knowledge summary
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • Remember an old project with cross-page communication issues and front-end implementation of file downloads
  • Write a mock data server using nodeJS in 5 minutes
  • JavaScript binary tree and binary search tree implementation and application
  • With JavaScript and C3 to achieve a turntable small game
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)
  • Exploration and summary of front-end integrated solutions based on React/VUE ecology
  • How to write your own JS library in less than 200 lines of code
  • A picture shows you how to play vue-Cli3 quickly
  • 3 minutes teach you to use native JS implementation with progress listening file upload preview component
  • Developing travel List with Angular8 and Baidu Maps API
  • Js basic search algorithm implementation and 1.7 million data under the performance test
  • How to make front-end code 60 times faster
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript