Detailed explanation of blog content management system

1. Update content

1. The database was redesigned and changed to a subDocs database structure grouped by users

2. In response to database changes , all interfaces have been redesigned, and the interface style consistent with Lima Finance

3. is deleted, the original guest mode is added, the login registration function is added, and pop-up window login is supported.

4. Add a homepage to display the latest published articles and registered users

5. Add functions such as password modification, logout, and logout.

6. Optimize the pop-up window component, which is more intelligent, has more configuration items, and is close to the NetEase $.dialog component. And a set of codes only modified the css to realize the PC-side pop-up window and WAP-side toast functions under the same interface.

7. Add mobile terminal adaptation

8. Optimize the original code and fix some bugs.

For more updated content, please move to projects CMS-of-Blog_Production and CMS-of-Blog.

2. Core code analysis

1. Database

Redesign the original database and change it to user grouping The subDocs database structure. In this way, the database structure with users as a whole is clearer, and it is also easier to operate and read. The code is as follows:

At the beginning of the code, three new Schemas are defined: articleSchema, linkSchema and userSchema. ArticleSchema and linkSchema are nested in userSchema, forming a subDocs database structure grouped by users. Schema is a database model skeleton stored in file form and does not have the ability to operate the database. The Schema will then be published as a Model. Model is a model generated by Schema publishing, which is a pair of database operations with abstract properties and behaviors. Entities that can be created by Model. For example, an entity will be created when a new user is registered.

After the database is created, it needs to be read and operated. You can have a look at the code that sends the email verification code when registering to get a feel for it.

After receiving the request to send the email verification code, the background will initialize a tmp user. By new db.User(), a User instance will be created, and then the save() operation will be performed to write this data to the database. If the registration is not successful within half an hour, delete this data by matching the email address and db.User.remove(). For more specific usage, please go to Official Documents.

2. Background

Divides all requests into three types:

• ajax asynchronous request, unified path: /web/

• Public page parts, such as blog homepage, login, registration, etc., unified path: /

• The blog part related to the blog user ID, unified path: /:id/

So that each user can have his own blog page, The specific code is as follows:

For the specific ajax interface code, you can see the index.js file in the server folder.

3. pop/toast component

3.1 pop/toast component configuration parameter description

• pop: Whether the pop-up window is displayed or not, according to the content parameter, if there is content, it is true

• css: Customize the class of the pop-up window , the default is empty

• showClose: If it is false, the close button will not be displayed, the default is

• closeFn : The callback after clicking the close button of the pop-up window

• title: The title of the pop-up window, the default is 'warm reminder', if you don't want to display the title, pass it directly Empty

• content（required）: The content of the pop-up window supports passing html

• btn1: 'Button 1 copy | Button 1 style class', formatted to btn1Text and btn1Css

• cb1: Callback after button 1 is clicked, if cb1 does not have If true is returned explicitly, the pop-up window will be closed by default after clicking the button

• btn2: 'Button 2 copy|Button 2 style class', formatted to btn2Text and btn2Css

• cb2: Callback after button 2 is clicked. If cb2 does not explicitly return true, the pop-up window will be closed by default after the button is clicked. The button parameters are not passed, and the copy text defaults to 'I understand'. Click to close the pop-up window

• init: The initialization function after the pop-up window is created, which can be used to handle complex Interaction (note that the pop-up window must change from false to true before the pop-up window is executed)

• destroy: Callback function after the pop-up window disappears

• wapGoDialog: On the mobile terminal, whether to use the pop-up window, the default is false, use toast

3.2 pop/toast component code

3.3 pop/toast component parameter format code

For the convenience of use, we have abbreviated it when using it. In order for the component to be recognized, the incoming parameters need to be formatted in the vuex action.

In order to make the mobile terminal compatible with the pop-up window component, we use mediaQuery to change the mobile terminal style. Add parameter wapGoDialog to indicate whether we want to use the pop-up window when we are on the mobile terminal. The default is false and use toast. In this way, one set of code can be compatible with PC and WAP.

Postscript

Here we mainly analyze the background and database, and it is relatively simple. You can check the source code. In short, this is a good example of front-end starting with back-end and database. It has rich functions, and you can learn vue.js.

Related recommendations:

The most complete PHP open source content management system CMS

20 PHP CMS open source content management systems

Based on laravel framework content management system