Original article in Public number: ape Zhou Xiansen program. This platform is not updated regularly, like my article, I welcome attention to the micro-channel public number.
In fact, personal blog already has several versions, and has not been very satisfactory version, it is constantly evolving and constantly test has not yet formally launched. Remember the first edition was developed in April and May last year, was written by jsp, UI is used Baidu Post Bar pc version of the style, but for a few months, because the front and rear end does not separate jsp bad maintenance, plus front and rear end does not separation of the project is not much value, so give up maintenance. Vue working behind the use of the framework, since vue single component, rewritten interface effects did not meet their satisfaction with the state, the second edition has not been on the line I discard. Began to design the third edition of annual leave personal blog, initially set to Vue.js + Node.js + Angular.js, but thinking back to find out the new framework, so use Angular4 replaced Vue.js, the interface is relatively simple, because personally, I prefer a little simple page.
This is the home front desk, to achieve a classification · Home · About development of these three functions, I am currently show the foreground and background management system were isolated, mainly early, then made their own paper-based, back-end management system is temporarily closed to the public .
Server development project is divided into three: client reception display function, interface with 4200, the main function as shown above, admin background management system, interface with 4201, is mainly used to add new articles to delete, add a new label, server services, background to provide services at the same front end, database operation, using an interface 4001.
I currently data is stored directly in MongoDB, on line late may be transferred to mysql for storage. The entire project environment to build: Node.js + MongoDB, will build a complete environment, we need to open the MongoDB service.
Front and back office management system because the system relies on server service, so you need to start the server service, server service operation which has to MongoDB, so the first open MongoDB, then npm run dev open server service.
In fact, the main server service that encapsulates all database operations management background and foreground display. Because currently responsible for server-side development using Node.js, so their projects using Node.js as a development language. For convenience I maintain that I was the client, admin, server code is written in three parts in a project structure inside, server service structure shown in Figure
client reception display interface, with Angular4 framework architecture as client server ports 4200, 4001, if there will be direct access cross-domain problem server service port. So I use a Proxy proxy, the proxy foreground 4200 port operation of all database queries to port 4001, so the server must be turned on premise service, or agent fails warning will appear.
I open server without service started client service started successfully, but the bottom of the reported warning: not from localhost: 4200 proxy requests to localhost: 4001, so although the launch was successful but can not read any data in the database, actually, the reason is that you server service does not start, so it was not open port 4001, when the service is restarted after the open server client service will find a front-end interface can be a normal show. Because now the number of people using the mobile terminal will be more, so he will take the time to blog adapting the mobile side, in fact, there are many methods you can use, BootStrap or rem, my project is actually relatively simple, I moved the show to end all interfaces individually designed css, using a framework does a lot to improve the efficiency of development, but development project purpose is so that they can learn something, so in the end I did not use framework.
As the front desk to show more functional, so the project structure is more complex. Specific design process is app.component.html in the navigation bar, which for pc and mobile sides different design styles css respectively, then click on the different functions of the navigation bar will jump to src / app / page different interfaces to display different Effect. Post Views Comments feature uses based comment system --gitment Github Issues, concrete can look me an article on the public number: https://mp.weixin.qq.com/s?__biz=MzU5MTc1ODA0OQ==&mid=2247483833&idx = 1 & sn = ce7dee57c3836ffba2aae3088ff8c3cd & chksm = fe2b5637c95cdf21c29feb442e7a33da7aa10ac435dfe37e14744829b5118d5d13aaea86801c & token = 2114299132 & lang = zh_CN # rd
Reception shows screenshots (including the pc and mobile end):
admin admin interface, using Angular4 be architecture, Admin server port 4201, server port 4001 server, client and server, as if there will be direct access cross-domain problems. So I did use a Proxy proxy, the backstage management port 4201 for all agents to the operation of the database server 4001 service port, the server must be turned on premise service, or agent fails warning will appear.
Services admin structure:
admin Admin Posts mainly published here, as well as save the label, the admin interface is currently not in foreign open, so the current admin interface designed a login screen, set up an administrator account to log on.
Login authentication is successful will enter the admin interface, you can post the release, the input box integrated MarkDown plug-in, you can use MarkDown support functions.
Background Management System The second is the ability to add notes, this feature is nothing to say, is to save data operations only.
The last feature is the background management view archived articles to find support in accordance with label classification
Because the background management system is released for other uses new articles have been mainly applied to the pc side, not on the mobile terminal adaptation. In fact, the personal blog of the blog function has already been realized, was going to be these days within the network penetration, generating test addresses the test, the test no problem ready to publish on-line, but it seems because there is some proxy bug, not in the local test issue, there will be complete within the network penetration is very slow access problem, so the recent commissioning has not been formally launched. This article is not specific to explain the source, the source code may have wanted to contact me privately to source their own research. Welcome to my technical exchange group, regularly updated learning resources in the group. Look at public two-dimensional code group number.
No. I personally welcome attention to the public: Program ape Zhou Xiansen
