Personal blog system based on Vue and Django - graphic explanation

If you want to make a system: first, determine the UI design, that is, which pages to do, and then how to jump between pages; then start to determine the technology stack, that is, which technologies to use to complete the system, generally including front-end, Back-end, database, etc.; finally, the actual operation is started. The most important thing is to analyze the logic of the whole system, and then think about how to implement each part logically, so start to design the database and so on.

For this project, the technology stack I chose is:

Frontend: Vue.
Backend: Django.
Database: Mysql and Redis.

Since the front and back ends are not separated, let's take a look at Django's MTV mode first.

M represents the model (Model): the function that the program should have, and is responsible for the mapping (ORM) between the business object and the database.
T stands for Template: responsible for how to display the page (html) to the user.
V stands for View: responsible for business logic and calling Model and Template when appropriate.

Maybe this is the case, and it is a bit abstract, so let's analyze the user operation flow chart of the entire system.

insert image description here

I'll start now!

eight pages

The first page: the registration page.
The second page: the login page.
The third page: Forgot password page.
The fourth page: the user center page.
Fifth page: Home page.
Sixth page: Write a blog page.
Seventh page: Blog details page.
Eighth page: 404 page.

Of course, this is the page I have already written, and it can also achieve logical jumps. If you are just starting, after designing the page structure, you can write a static page first, and then change it later.

two sub-apps

From the above eight pages, we can probably know that there are a total of the following functions:

Registration function (picture verification code, SMS verification code)
Login function (mobile phone number, password)
Logout function (cleaning cookies and sessions)
Forgot password function (similar to registration function)
User Center Functions (Modify Image, Profile)
Homepage display function (column classification, blog list, paging function)
Write blog functionality (rich text editor)
Blog details function (article details, recommendation function, comment function)

Basically the above functions can be divided into two modules:

One is the user module, including user registration, login, logout, forgetting password, user center, and writing blog.
One is the home page module, including home page display, blog details (post comments).

In this way, we simplify the logic slightly, and divide it into user sub-application and home sub-application.

four entities

From the above pages and functions, we can abstract some entities to facilitate subsequent data access and so on.

The first entity is the user. Since it involves registration, login, forgotten password and personal center, the user table can define the following related fields.
The second entity is a category, and the category is relatively simple. Giving a category a name is almost the same, because the ORM that comes with Django will automatically help us create an id.
The third entity is the article. The article depends on how the individual designs it. Here I include the author of the article, the title image of the article, the title of the article, the category to which the article belongs, the summary of the article, the content of the article, and the number of page views of the article. , the number of comments on the article, etc.
The fourth entity is the review, which contains the reviewer, the article reviewed, the content of the review, the time of the review, etc.

At the beginning, I also felt that the design of this database was very complicated, but in fact, after the functional requirements and page structure were conceived, we could use the data required by these pages, and then where the data would come from and where it would go. You can design a basic form, and then you can add your own ideas after the main functions are implemented.

Meanwhile, pay attention! All operations involving the database need to be handled with exceptions to prevent "deleting the database and running away".

Ten view functions

The first view function: image verification code view ImageCodeView.

This is the image verification code required for the registration and forgot password pages. When the url is located to register or forget the password, the generate_image_code() method will be called in the mounted life cycle function, so the image_code_url is assigned as /imagecode/?uuid=, and the img tag is set at the image verification code in the html page. , bind src to image_code_url, then send a request to the url to locate the view function of this class.
```
该视图函数主要流程(get)：
①获取uuid。
②验证uuid。
③生成验证码。
④将键值对(uuid，text)保存到redis中。
⑤返回image。
```
The second view function: SMS verification code view SmsCodeView.

This is the SMS verification code required for the registration and forgot password pages. In the registration page, the value of each form is bound to the corresponding data, and then the form tag variable is used to display the form value error message accordingly. When you click to send SMS verification code, the mobile and image_code will be checked accordingly, and then proceed to '/smscode/?mobile=' + this.mobile + '&image_code=' + this.image_code + '&uuid=' + this.uuid Send the request, if it is successful, the countdown will be displayed on the button, and if there is an error, an error will be prompted in the corresponding place. The url of the above request will correspond to this type of view function.
```
该视图函数主要流程(get)：
①获取url？后面对应的三个参数。
②验证参数，比对image_code和从redis中取出的text。
③随机生成短信验证码。
④将键值对（mobile，sms_code）存入到redis中。
⑤发送短信。
```
The third view function: Register the view RegisterView.

For pages containing buttons: there are generally two processing functions, one is get, which mainly returns the corresponding page, and obtains the data required by the page before returning, and then passes it to the page; one is post, mainly When the relevant data is filled, after clicking the submit button, a series of processing, including database access and page jumping, are performed.
```
该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数（虽然前端也有验证）。
③验证成功后将数据存到数据库user表中。
④使用login进行状态保持（会生成唯一标识sessionid）。
⑤页面跳转重定向。
⑥设置cookie（方便后续在其他页面使用相关信息）。
```

The fourth view function: login view LoginView.

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③使用系统自带认证authenticate进行用户认证。
④使用login进行状态保持。
⑤根据next参数来进行页面的跳转（因为系统对于未登录会自动跳转到next）。
⑥页面重定向。

The fifth view function: logout of the logout view LogoutView.

该视图函数主要流程（get）：
①清理session。
②清理cookie。

The sixth view function: ForgetPasswordView ForgetPasswordView.

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③根据mobile参数查询数据库user表，如果没有就创建新的用户，反之则将修改数据保存到数据库对应用户字段上。
④重定向页面。

The seventh view function: UserCenterView UserCenterView.

该视图函数主要流程（post）：
①获取表单参数。
②修改保存到数据库user表。
③重定向页面。

The eighth view function: write blog view WriteBlogView.

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③验证成功的数据保存到数据库。
④重定向页面。

The ninth view function: Home view IndexView.

该视图函数主要流程（get）：
①获取所有分类和选中分类。
②查询点击分类对应的所有文章。
③获取分页处理对应的参数。
④返回页面。

The tenth view function: blog detail view DetailView.

该视图函数主要流程（post）：
①接收用户信息并且判断是否登录。
②未登录用户则跳转到登录页面。
③登录用户则可以接收form数据（包含评论文章id和评论内容content）。
④保存评论数据到数据库comment并且刷新页面。

It's almost finished! !

March 16, 2022 0:01 Wang Xiaoman! !

When you get up, concentrate on preparing for the re-examination. The last ten days are rushing! !