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

Angular4+Koa2+MongoDB how to develop personal blog, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

In fact, there have been several versions of personal blog, there has been no very satisfactory version, so it has been constantly improving and testing has not been officially launched. I still remember that the first version was developed in April and May last year. At that time, it was written in jsp, while UI adopted the style of Baidu Tieba pc version, but it was used for a few months. Because the front and rear ends of jsp were not separated and difficult to maintain, and the projects without separation of front and rear ends were of little value, I gave up maintenance. The later work uses the vue framework, because of the singleness of vue components, the rewritten interface effect does not reach its satisfactory state, so I abandoned the second version before it was launched. The third edition of personal blog is designed at the beginning of the annual leave. At first, it is set to Vue.js + Node.js + Angular.js, but later I want to know about the new framework, so I use Angular4 instead of Vue.js. The interface is relatively simple, because I personally prefer a simpler page.

This is the front home page, which realizes the classification of the home page about the development of these three functions. At present, I separate the foreground display from the background management system. In the early stage, I mainly send my own articles, and the background management system is not open to the public for the time being.

The project is divided into three servers for development: client foreground display function, interface using 4200, the main functions as shown above, admin background management system, interface using 4201, mainly used to add and delete new articles, add new tags, server service functions, provide services for the front end and backstage at the same time, database operations, etc., interface uses 4001.

At present, I store the data directly in MongoDB, and later on, it may be transferred to mysql for storage. The whole project environment is set up: Node.js + MongoDB. After setting up the environment, you need to enable the MongoDB service first.

Because both the foreground system and the backend management system depend on the server service, you need to start the server service first. There is an operation on MongoDB in the server service, so you need to open MongoDB first, and then npm run dev to open the server service.

In fact, the server service mainly encapsulates all the database operations displayed in the foreground and managed in the background. Because the current work is responsible for server-side development using Node.js, so their own projects also use Node.js as the development language. In order to facilitate my maintenance, I write all three parts of client,admin,server code in a project structure, which is shown in the server service structure.

Client foreground display interface, using the Angular4 framework for architecture, because the client server port 4200 server service port 4001, if direct access will lead to cross-domain problems. So I use Proxy as a proxy to proxy all operations of the front desk on port 4200 to query the database to port 4001, so the server service must be turned on, otherwise there will be a warning of agent failure.

I started the client service without opening the server service, and it started successfully, but a warning was reported at the bottom: unable to request to localhost:4001 from the localhost:4200 agent, so although it was started successfully, I could not read any data from the database. In fact, the reason is that your server service has not been started, so port 4001 is not open. When you restart the client service after opening the client service, you will find that the foreground interface can be displayed normally. Because there will be a large number of mobile users, so take the time to adapt the blog to the mobile, in fact, there are many ways to use, BootStrap or rem, my project is actually relatively simple. I designed css for the mobile display of all interfaces, and the use of the framework does improve the development efficiency a lot, but the purpose of the development project is to enable myself to learn something, so in the end, I did not use the framework.

As the front desk shows more functions, so the project structure is more complex. The specific process is to design the navigation bar in app.component.html, in which different css styles are designed for the PC side and the mobile side, and then click on the navigation bar different functions will jump to different interfaces in src/app/page to show different effects. The article browsing and comment function uses a Github Issues-based comment system-gitment. For more information, please see an article on my official account: https://mp.weixin.qq.com/s?__biz=MzU5MTc1ODA0OQ==&mid=2247483833&idx=1&sn=ce7dee57c3836ffba2aae3088ff8c3cd&chksm=fe2b5637c95cdf21c29feb442e7a33da7aa10ac435dfe37e14744829b5118d5d13aaea86801c&token=2114299132&lang=zh_CN#rd.

The front desk shows screenshots (including PC and mobile):

Admin background management interface, using Angular4 for architecture, Admin server port 4201 and server port 4001, just like client server, cross-domain problems will occur if you directly access it. So I also use Proxy as a proxy to proxy the background management port 4201 for all database operations to server service port 4001, so the premise must be to open the server service, otherwise there will be a warning of agent failure.

Admin service project structure:

Admin background management is mainly for the release of posts, as well as the preservation of tags, the current background management interface is not open to the public, so the current background management interface designed a login interface, set an administrator account to log in.

Login verification will enter the background management interface, you can publish posts, the input box is integrated into the MarkDown plug-in, you can use the functions supported by MarkDown.

The second function of the background management system is to add notes. There is nothing to say about this function, but to save data operations.

The last function of background management is to view archived articles, which can be found by tag classification.

Because the background management system is used for the release of new articles and other purposes, it is mainly suitable for the PC side, and the mobile end is not adapted.

In fact, the blog function of the personal blog has now been realized. It was originally planned to conduct private network penetration and generate a test address for testing, and the test was ready to be released online without a problem, but it seems that because the agent has a bit of bug, there is no problem in local testing, and the access speed of the private network will be very slow after penetration, so recently it is being debugged and has not been officially launched yet.

This is the answer to the question about how to develop a personal blog in Angular4+Koa2+MongoDB. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.