A hexo comment system (2)


Then the last article “handwritten a hexo comment system (1)”, this article mainly describes some specific design and technical details of the comment system implementation, convenient for later modification or reconstruction. There are also the deployment problems of the project, including domain name resolution, nginx configuration agent, and some problems in the purchase of cloud server. The pit for purchasing the server is really big, so you’d better choose a large factory as far as possible. If it’s more stable and easy to use, you don’t have to care about a few more yuan. Moreover, it’s more cost-effective to buy the configuration according to your own needs.

<!– more –>

Last time, the following requirements were listed. According to these requirements, we can imagine how to design:

1. Without login and verification code, you can comment directly

2. Support reply comments, and infinite recursive reply

3. Support comments and likes, sort by likes, sort by time if the same

3. Support article scoring, display the number of scoring and the average score of scoring

4. Support your own comments can be notified by email after they are replied by others

5. Support the review background management system, you can set the corresponding properties

6. Support comment export, and highly 100% recoverable data

Interface and UI design

A hexo comment system (2)

The first version of UI looks like this. The overall style is relatively simple, which is also my favorite style. After the article is loaded, the reviewer will get a random nickname and avatar. Click the nickname to switch the nickname and avatar, but they are all random. Then there are three input boxes: email input box, comment content and article score. So it is divided into two parts, one is the user information and comment box, the other is the specific comment display area. As long as you think clearly, you can start.

Anyway, it’s the Web UI of PC. It’s really suitable to go directly to elementui, especially when displaying specific comments according to the timeline. Moreover, the scoring component is also very OK, which is very good-looking. I’ll try other component libraries later!

Interactive process design

First of all, users need to get random avatars and nicknames as soon as they open a blog, and they need to keep the user’s status

A hexo comment system (2)

First of all, for a user who has never opened a blog page, the ClientID stored in the browser must not have this field, and can be directly determined as a new user. Therefore, go to the background to request a ClientID, assign a random nickname and avatar, and give the user information to the library. Even if the user clicks refresh nickname and avatar, the ClientID does not change With changes, user information is thus preserved. If the browser already has a ClientID, there should be corresponding user information in the database, so you can directly request the background to get the user data.

Second, how does the backend know which comments belong to which blogs? In fact, a relatively simple way is used here, that is, to judge directly according to the URL. The same URL must be the same blog, but it is also flawed, that is, it is easy to debug locally localhost:8080 At first, but remote is zouchanglin.cn In this way, the local test data will not be displayed in the official blog comments. and zouchanglin.cn and zouchanglin.gitee.io In fact, this is unreasonable. We should separate the domain name from the rest of the URL, so that the commonality will be better. I will refactor when I have time.

The third question is, how can users inform each other when they reply when they set up a mailbox? In fact, for such a client-side design, as long as the user fills in the mailbox and makes comments or replies, the mailbox can be set, because this can greatly reduce the business complexity. As long as your mailbox changes, your next comment will fill in a new mailbox when you get the notice, so that you can directly update the entire user’s email Box, very convenient.

Database design

The database uses MySQL 8.0. The first is to design the client information table, which represents the user information (mainly including client ID, email, nickname, creation time, avatar, client OS and other information, and other fields can be added if necessary)

A hexo comment system (2)Then there is the article information table (the main fields are the article URL and the number of article comments). One data corresponds to a blog, and there is also the total number of blog comments. In fact, you can use the URL as the primary key, but for the convenience of future changes, it is better to decide to generate a custom primary key.

Then there is the comment table. Here I divide the comments into two types. One is the article comment (the main fields are article ID and comment)_ Parent is the invalid field, comment client ID, comment content, number of likes, creation time and article score), which is the comment directly below the article; the other is the sub comment (the main fields are the comment ID, comment client ID, comment content, number of likes, reply client ID and creation time). This is just the reply of the article comment, of course Both the sub comments of the article comments and the reply comments of the sub comments are stored as sub comments, and all of them are divided into two tables. The only difference is that the article comment will store the comment under which article it is, while the sub comment will store the comment under which article it is located, and who the reply client is, so the reply is also stored_ The client field.

Back end system design

Click here until the back-end code warehouse: https://gitee.com/zouchanglin/comment-box

The back-end system is also a back-end service based on spring boot. In fact, it uses common technologies, such as spring MVC and spring datajpa. Usually, it uses less mail sending service. In fact, it’s not easy to use spring boot starter mail to send mail. What we need to pay attention to is the cross domain problem of the back-end. We need to configure a configuration class that allows cross domain deployment. However, we recommend using nginx to deploy in the same domain later, and the cross domain problem does not exist. This is my favorite solution at present.

Project deployment issues

1. Cloud service purchase

Tencent cloud 88 / year is recommended. Baidu cloud is too expensive and Alibaba cloud has used it. Tencent cloud and students can still buy it. The configuration of 1-core 2G is actually enough. At the beginning, my brain twitched. I bought tianyiyun. Although it’s only 77 yuan per year, it’s very difficult to use. Moreover, the highest speed is 130K / s. who can stand such a slow speed. I’d rather spend a few more yuan to buy a better one. After all, big factories are reliable.Don’t buy tianyiyun, don’t buy tianyiyun, don’t buy tianyiyunSay important things three times.

2. Solve the problem of HTTPS

In fact, the whole code has been written, and there is only one deployment left. But because my website is all HTTPS, the comment system must also be HTTPS, otherwise the comment module cannot be loaded due to the browser’s security policy. So through the domain name resolution of a secondary domain name comment.zouchanglin.cn Go to the server and apply for a certificate for the secondary domain name. This is OK.

3. Nginx deployment

After the front-end project is packaged, it can be deployed directly with nginx. By the way, configure the HTTPS certificate, so that the front-end project can be accessed with HTTPS. What about the back-end? There can’t behttps://comment.zouchanglin.cn:8080This kind of URL exists, so it is very easy to solve this problem through nginx. As long as you configure a proxy through nginx, you can solve the cross domain problem completely and once and for all. You can also share domain names and hide the back-end address by using reverse proxy, which is more convenient for centralized management.

So I personally recommend using nginx to deploy the front and back end in the same domain. Nginx really helps!

Back end project application.yml The configuration is as follows. In fact, the access paths are changed tohttp://

    port: 8080
        context-path: /api

Remember to close the history mode for the front-end project, and then the requested basic URL is written as follows:

axios.defaults.baseURL = 'https://comment.zouchanglin.cn/api/'

The configuration file of nginx is as follows:

user  root;
worker_processes  2;

events {
    worker_connections  1024;

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    gzip  on;
    # HTTPS server
    server {
        listen       443 ssl;
        server_name  comment.zpuchanglin.cn;

        #Configure certificate
        ssl_certificate      /opt/ssl_file/cn_chain.crt;
        ssl_certificate_key  /opt/ssl_file/cn_key.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {           
            root /root/dist;
            try_files $uri $uri/ /index.html;

        location ^~/api/ {

What needs to be improved

Brainstorming, you can also comment on the message

  • Support background management
  • Support adaptive mobile terminal (width and height need to be adjusted)
  • Support one click deployment of docker
  • ……

Original address: handwritten a hexo review system (2)

Recommended Today

Deeply analyze the principle and practice of RSA key

1、 Preface After experiencing many dark moments in life, when you read this article, you will regret and even be angry: why didn’t you write this article earlier?! Your darkest moments include: 1. Your project needs to be connected with the bank, and the other party needs you to provide an encryption certificate. You have […]