Design and implementation of blog system based on Vue+SpringCloud+Mysql (graduate thesis + program source code)
Hello everyone, today I will introduce to you the design and implementation of a blog system based on Vue+SpringCloud+Mysql. At the end of the article, the thesis and source code download address of this graduation project are attached. Friends who need to download the proposal report PPT template and thesis defense PPT template, etc., can go to my blog homepage to view the self-service download method in the bottom column on the left.
Article directory:
1. Project introduction
- Blogs are used to share one's moods and dynamics to bring people closer together. It has changed the way people communicate online and also made the Internet more interesting. "Microservices" have become popular in the past two years, but in fact, experts proposed it as early as 20 years ago, but the number of users at that time was not as high as it is now. For example: the richer the functions of a system, the more technical debt it will lead to. However, the code base developed based on a single application (a war package) is becoming more and more bloated, with poor maintainability, and "if the code is not broken, it will not be repaired." To this end, the introduction of a "microservice" architecture can improve this situation. Each microservice center is responsible for each function's business in an independent process, and a series of independently operating microservice centers jointly build the entire system. Nowadays, the separation of front and back ends of the web is a trend among enterprises, and the separation of front and back ends is also a manifestation of technological innovation. Thanks to the trend of development separation, the combination of Vue and Spring Cloud occupies an important position in today's Web website development.
2. Resource details
Project difficulty: medium difficulty
Applicable scenario: graduation project on related topics
Word count of supporting paper: 30,851 words and 99 pages< a i=3>Contains: full set of source code + completed thesisRecommended download method for ppt templates such as proposal report, thesis defense, project report, etc.:
3. Keywords
Microservices, Vue, SpringCloud4. Introduction to Bishe
Tip: The following is a brief introduction to the graduation thesis. The complete source code of the project and the download address of the complete graduation thesis can be found at the end of the article.
Introduction
1.1 Background of the research
In recent years, microservices have become popular in software system design. The architecture design has different styles, which completely splits the functions of a single application and assigns them to designated modules. This modular approach has become the mainstream design approach for enterprises.
Vue has shone in the front-end in recent years. Because Vue is a domestic componentable JavaScript library, it is easier to get started with Vue than other JavaScript frameworks. Vue's component library uses the latest MVVM design pattern, so Vue only focuses on changes in the front-end view and separates the control layer to modularize the front-end design, which is completely in line with mainstream software design methods.
SpringCloud is one of the pronouns of microservices. Only Dubbo can compete with SpringCloud. However, the update speed of SpringCloud is quite fast nowadays, and it has occupied a prominent position in microservice development. . SpringCloud is a tool set quickly built based on SpringBoot, and both of them are subsets of the Spring family. Therefore, they are also implemented based on the Java language, and Java is a cross-platform, suitable for distributed computer environments. Object programming language.
As mentioned above, both Vue and Spring Cloud have followed the mainstream trend, so this combination has become "hot potato" in JavaWeb development. They also promote the advancement of software development technology.
1.2 Purpose of the research
College students who want to quickly integrate into enterprises must spend a certain amount of time on self-study, or if they are not satisfied with what they have learned, they must participate in some competitions or do it themselves. Write a few projects. The employment difficulties of college students are also an increasingly obvious problem. They do not learn enough in school and are unwilling to spend time studying.
Therefore, the purpose of designing this blog is to strengthen the understanding of Java and JavaScript, enhance personal JavaWeb capabilities, and improve the understanding of system architecture. Writing a complete Web will greatly improve yourself. , in addition to improving personal skills, it will also enhance personal perseverance, which will have positive significance for future work.
2 Blog related theories and technologies
2.1 Theoretical analysis of blog system
This design uses the mainstream microservice architecture method in JavaWeb development , Microservices will definitely involve distribution. Generally speaking, microservices are mostly related to system logic and physical structure design, while distribution involves some machines or implementation technologies. Reading this chapter can understand the theories and techniques used in the entire blog. its technology.
2.1.1 Microservice analysis of blogs
Currently, microservices (SpringCloud) are a mainstream and popular technology in software development, and SpringCloud is just a microservice. An important subset of services. The concept of microservices can be defined like this: Microservices exchange data through some lightweight communications such as HTTP, and each microservice exists in its own process and independently undertakes certain business functions. In the end, all microservices aggregate together Set up the entire system.
Designing a microservice system needs to comply with the following principles:
1. The single principle of microservices: generally refers to a class that is only responsible for one complete function. It is best not to include functions that are not closely related to it, as it is not friendly to future functional expansion.
2． The isolation principle of microservices: It means that the functional code block of each microservice center runs independently in a module package. Multiple microservices have multiple module packages. They run independently together and will not interfere with each other. From microservices The logical design of the service to the development design are all in one independent package.
3. Communication principles of microservices: When data interaction occurs between multiple microservices, they should use lightweight communication services to interact. Lightweight communication needs to have cross-language and cross-platform characteristics.
4． Control principles of microservices: Each microservice needs to control the code amount of the service. It must be carefully considered when designing the logical structure. It is not just about reducing the code amount to make the microservice smaller and easier to control. Because the functional characteristics of each microservice are different, the amount of code to be written is also different. Therefore, when designing the logical structure, it is necessary to determine the boundaries of the business and maintain a relatively independent and loosely coupled relationship.
5. Microservice repair principle: It is best to write complete and stable high-availability components for microservices. In addition to the high availability of microservice components, you also need to consider "circuiting" the business of microservices to protect the system.
2.1.2 Distributed analysis of blogs
In addition to microservices, blog systems also involve distribution. The definition of distributed systems is mostly based on programs. It can be seen that it is the same program, such as the "cluster" method. It does not need to be the same program, and the interaction is completed through remote calls. Distribution can be considered as an effective management method for the machine.
There are five important characteristics that need to be understood about distribution:
1. Cohesion and transparency: Distributed systems are collaborative systems built using computer networks, so distributed systems usually have the characteristics of cohesion and transparency.
2. Independent scalability: First, vertical expansion means optimizing server performance or upgrading server hardware; second, increasing server horizontal expansion means increasing the number of servers.
3. Reliability and availability: Reliability is the average running time of the system without errors and obstacles within a specified period of time, and availability is the total running time without errors and obstacles within a certain period of time.
4. High performance: For high concurrency, the lower the average processing time, the better. The more characters can be processed per unit time, the better. Use more machines to achieve higher computing and storage capabilities.
5. Consistency: Under multi-node deployment, only one copy of data is guaranteed to be calculated and stored.
Since the aspects involved in distributed and microservices are somewhat similar, but the core essence of the two is different, here we need to explain in detail the specific differences between microservices and distributed ：
Microservices are an architectural design method. For example, the logical design of a blog needs to involve certain functions, how to divide the functions, the issue of "high concurrency" needs to be taken into consideration, and how to dismantle the final system. How to divide the functions more reasonably, and then lay the foundation for future system expansion. Distribution is the system deployment method. After the system is split, the functions are placed on a certain machine. If the microservice architecture is adopted, the use of It is a distributed deployment. If it is not a microservice architecture, you can use "cluster deployment" or distributed deployment. "Cluster deployment" is equivalent to the same business deployed on multiple servers.
Both microservices and distributed systems have two common shortcomings. The first is network problems, such as network delay, packet loss and information loss, so a compensation mechanism needs to be written to Protect the user experience. The second is node failure, microservice node failure or a certain node failure in the distributed system. Node failure may not be completely avoidable, but human intervention can be done. Compared with the network communication caused by the first shortcoming, it is still operable. Sex, but it is quite challenging to get started, and every detail needs to be carefully polished.
2.1.3 Analysis of distributed locks
You can find the detailed explanation of distributed locks by yourself. Here we only introduce the concept of distributed locks and the methods used by the blog. Distributed lock. In short, for Java distributed locks, resource sharing is required between different JVM virtual machines generated by different machines. At this time, distributed locks need to be used for control.
If the Synchronized keyword, Lock concurrency interface, concurrent tool class or concurrent collection are used in the program, these operations can also complete multi-threaded "shared resources", but this is only a service for a single application For example, for distributed systems, the difference between independent JDK and host is the difference between single concurrency control and distributed cross-JVM. Distributed locks are also based on cross-JVM control of "shared resources" .
There are five requirements for distributed locks:
1. Exclusivity: A resource is only allowed to be executed by one thread on one JVM at one time.
2. Avoid deadlock: You need to manually release the lock, and you can set the lock expiration time.
3. Fair lock: The probability of different machines competing for resources is the same, but it is not necessary.
4. Highly available locks: The mechanism for acquiring and releasing locks needs to ensure that the performance meets the design.
5. Reentrant lock: Set the reentrant number or time of the lock. If acquisition failure occurs, you can wait for a period of time or set the number of times to acquire the lock in a period of time.
The blog uses distributed locks based on Redis (see heading 2-7 for analysis of Redis. Here I only mention the key points of Redis’s distributed locks). Redis provides atomic operations. SETNX and EXPIRE, SETNX means that the key can only be set successfully when it does not exist in Redis. The key is indirectly used as a "lock" and EXPIRE is used to release the acquired lock. Redisson can be regarded as having these features built-in and encapsulated for us to use.
From the above, it can be seen that the important operation is SETNX. There are three key points about the operation of SETNX:
1. Use the SETNX operation to acquire the lock. If 0 is returned, it means it already exists and has been acquired by other threads. If 1 appears, it means the acquisition was successful.
2. A reasonable expiration time needs to be set for the lock. If a program exception occurs and the lock is not released, it will cause a deadlock. The time needs to be reasonable and consistent with the program flow.
3. Similar to the concept of multi-threaded operations, the acquired lock needs to be released after the lock is executed.
2.1.4 High availability analysis of blog
High availability is an important design element in microservice architecture, which generally refers to the system reducing the time that microservices cannot provide. The high availability of blogs requires service autonomy. When one microservice fails to respond, another microservice can replace it. Therefore, when designing a blog high availability system, you need to consider many aspects, far more than just one high availability system. , the most important thing is self-healing to avoid system failure to respond.
The blog involves the high availability of Eureka and Zuul. It will be mentioned in the subsequent titles and will not be introduced here. Highly available distributed systems need to comply with the development guidelines of microservices and also need to Comply with the following microservice operating mechanism (the technologies used in the blog are in parentheses, which will be introduced in detail in the subsequent titles, here for understanding):
1. Expansion mechanism: horizontal and vertical expansion, similar to distributed expansion
2. Isolation mechanism: To prevent one blog business from occupying too many resources and causing the service to become unresponsive, which will affect other blog businesses, just add a fault-tolerant mechanism.
3. Decoupling principle: Use the principle of composition and reuse as much as possible to replace inheritance relationships.
4. Current limiting mechanism (Zuul): Current limiting can be reflected on the routing gateway, and different load balancing can be achieved according to different algorithms.
5. Downgrade mechanism: When the core business is running, some non-core businesses are sacrificed to ensure the stable operation of core business functions
. When the system is unavailable, some prompts need to be given to users.
6. Circuit breaker mechanism (Hystrix): When calling microservice requests, just add fallback protection.
7. Tracking mechanism (Zipkin): The blog API will generate data indicators. The generated data needs to be used for observation, and then data analysis will be done to conduct an in-depth analysis of the system for future function expansion.
8． Maintenance mechanism: Blog system maintenance needs to be convenient, and the pressure is directly proportional to the number of microservices.
9. Compensation mechanism: If network problems cause blog business data inconsistency, a compensation mechanism is needed to compensate users. For example: RabbitMQ asynchronous messages, compensation tables and scheduled task detection.
10. Monitoring mechanism (Hystrix+Turbine): More importantly, Hystrix is used to monitor the operating indicators of each microservice and is forwarded to developers for viewing through HTTP.
11. Drill mechanism: It can be regarded as a precautionary measure. When testing the blog function, appropriately close a microservice center and test the blog's anomalies or compensations to prevent business explosion in real situations. As much as possible, on a certain machine or When a certain microservice fails, try not to affect the high availability of the overall blog system.
2.2 Front-end construction
2.2.1 Introduction to Node-Npm
Node.js is a server-side Javascript interpreter and a server-side language. , can be regarded as a platform based on JavaScript runtime environment.
Npm is a management tool for network download packages in node.js. Some UI components needed for the blog front-end exist in npm. The front-end Npm is similar to the back-end "maven", and you can download the component packages you need.
For the installation of Vue, you can use the original Npm installation or you can use the IDE to directly create the Vue scaffolding. Because of the rapid development of time, the front-end also develops rapidly. When the project is too large, the front-end must also work together. Therefore, modularization and componentization are also very important parts, so automated front-end deployment also emerged.
Front-end engineering is inseparable from webpack. Webpack can be downloaded in npm. The modular operation principle of webpack is shown in Figure 2-1:
Figure 2-1 Webpack modular diagram
Webpack generates static resource files from all files in a unified manner. Each resource file of the same type is equivalent to a moudle. Webpack modularizes the front-end and enhances front-end collaboration.
2.2.2 UI framework adopted
The UI (interface design) framework is the beautiful embodiment of the blog and can be developed by developers based on HTML, CSS, and JavaScript. Beautiful components can also save time by using UI frameworks packaged by others. The UI framework needs to be ready for use, and users can make some practical modifications to the code to combine with business implementation.
A total of three UI libraries were used in the development of this blog:
1. Bootstrap: Bootstarp has been a popular front-end component library in web development in the past few years, but the current Bootstarp component library is not very commonly used. Since Bootstarp has a significant advantage in layout, Bootstarp is very suitable for blog development. a> Charts are indispensable for blog development. Charts can enhance the user experience. For example, common functions in development will have consumption records, and visits Records etc. Multiple echarts chart instances can be created in each web interface, but each echarts instance will independently occupy an object node. In addition, some tedious data type conversions and modifications to the basic configuration of the chart are required, which is very difficult for developers. It's a bit tricky, so v-charts emerged precisely to solve this pain point. v-charts is a chart component packaged between vue and echarts. You only need to change the parameters of the chart to complete the display and traversal of the chart. It is very suitable for the integrated development of vue. 2.2.3 v-charts charts Ⅶ. The theme can be customized and directly imported for use. Ⅵ. Detailed documentation. The documentation on the official website is very suitable for beginners to learn. Ⅴ. A detailed and beautiful UI can save developers time and also allow for the reconstruction of components. Ⅳ. Friendly API, free and flexible use of space. Ⅲ. Vue.js is ecologically friendly and can answer any questions you have. , convenient and fast for learners. Ⅱ. Provides out-of-the-box Admin system and high-end component library, which can be used for a fee Ⅰ. Rich components and functions to meet most website scenarios, and you can also develop your own custom components View UI has the following friendly features: These three UI libraries are reflected in the design. The components of Bootstarp tend to be neat and tidy, the common components of View-UI and element-UI tend to be beautiful and practical, and View-UI this time The components used by the blog are not much different from Element-UI, but the download volume of View-UI on npm tends to increase rapidly, and the API of view-UI is more concise. View-UI now maintains a popular trend. 3. View-UI: View-UI is a set of UI component libraries based on Vue. The development of the blog uses the Vue framework, so it is very simple to get started using this UI framework, and it will be very friendly to every developer when learning. In addition, The components of View-UI are beautiful and neat, which is very suitable for blog development.
2． Element-UI: Element-UI is a UI component library written in native JavaScript. It is currently a better UI framework developed in conjunction with vue.
You can configure local chart components by yourself, or you can import them globally as follows:
//npm下载v-charts图表组件
npm i v-charts echarts -S
// main.js的全局导入
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'
//全局使用图表组件
Vue.use(VCharts)
new Vue({
el: '#app',
render: h => h(App)
})
2.3 Vue architecture
2.3.1 About MVVM mode
MVVM (Model-View-ViewModel) mode is based on the original Model–View–Controller ( Improved from the MVC) model, the core of MVVM is the ViewModel (V) layer. The function of this V is to replace the controller layer. The original MVC mode is that View and Controller interact directly, and this V is directly responsible for interacting with the Model layer, which completely separates the View layer and the Model layer. V can be regarded as a data transfer station, which realizes the separation of front and back ends. The most important part, the MVVM pattern is also the core design of Vue's data binding system. The use case diagram of the MVVM pattern is shown in Figure 2-2:
Figure 2-2 MVVM pattern
2.3.2 About the life cycle of Vue
Each running framework will have a relatively complete life cycle and design Creating a stable life cycle can ensure the orderly operation of the framework. The life cycle of Vue includes running life cycle functions, data, template, mounting el, and method functions. The life cycle of Vue can also be considered as the flow chart of Vue's operation. Although this statement is not rigorous enough, it can strengthen the understanding and control of the Vue framework.
Figure 2-3 is the activity diagram of the life cycle of Vue 2.0:
Figure 2-3 Vue life cycle
For the above figure, we need to explain the three commonly used functions:
1. created function: After completing the creation of the vue instance, call the created function to complete the initialization task of data data, but $el is not available because el has not been mounted yet. The create function is suitable for initializing data.
2. Mouthed function: el is mounted on the instance and can also complete the update of data data. If the mounted function completes the business logic change, it can change the data and then mount el.
3. beforeDestroy function: remove event listening, such as addEventListener listening.
2.3.3 Analysis of Ajax operating principle
Asynchronous JavaScript and Xml (Ajax) is a technology that uses asynchronous methods to quickly create dynamic web pages. It is not a A common programming or scripting language. The advantage of using Ajax is that you can update the web page asynchronously without re-refreshing the entire web page. However, if you want to update the content of the web page on a traditional web page (not using Ajax), you need to re-refresh the entire page, which can be considered a synchronous refresh. . The core object of Ajax is XMLHttpRequest (XHR), which belongs to the category of native JavaScript.
The operating principle of Ajax can be divided into the following parts. The diagram is shown in Figure 2-4:
1. First create an asynchronous XHR call object to interact with.
2. Secondly, XHR defines HTTP requests and configuration information, using the XHR.open() function.
3. Then send an HTTP request using the XHR.send() function.
4． Then obtain the data returned by the asynchronous call through XHR's onreadystatechange event.
5. Finally, JavaScript and DOM are used to partially refresh the web page.
2.3.4 Reasons for using Axios
The most popular one in the past few years was JQuery. The ajax in the JQuery package also encapsulates the native XHR object, which has excellent performance in the era of slow front-end. influence, but now it has several obvious shortcomings:
1. JQuery is based on the MVC specification and does not comply with the current front-end MVVM specification.
2. JQuery is integrated based on the original XHR and does not comply with the front-end ES syntax specification.
3. The complete JQuery package is too large. It is unreasonable to import the entire package when using one component.
It does not comply with the principle of separation of concerns. The packaging is too sealed and the maintenance pressure is relatively high.
4. The configuration of JQuery and the way it is called are very confusing, and event-based asynchronous is not friendly.
5. Axios is actually an encapsulation of the original XHR, because it is implemented based on the Promise API and is more in line with the current front-end ES specifications, such as commonly used POST and GET requests. Axios can also customize these request functions. The convenience of customization is that you can request Body headers come with Token or specified data, and the data conversion method can also be customized, which is more rational and in line with the artistic thinking of programming.
The detailed explanation of the front-end custom Axios POST function is as follows:
post(url, data) {
return axios({
method: 'post', //请求的方式
url: url, //请求的地址
baseURL: host, //host
data: Qs.stringify(data), //字符串转换data
timeout: 30000, //请求响应时间
headers: {
'X-Requested-With': 'XMLHttpRequest', //请求的对象与类型
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'TOKEN': window.localStorage.getItem('token'), //携带元数据Token
}
})
}
2.4 SpringCloud Architecture
2.4.1 SpringCloud Framework
SpringCloud is built on SpringBoot and is a collection of tool frameworks used to quickly build systems. SpringBoot has the advantage of automatically configuring Spring MVC and built-in Tomcat. SpringBoot has four features. For example: coding is relatively simple, configuration is simplified, deployment is more convenient, and monitoring is more convenient. In general, it is "habits are greater than configuration". The current construction specification for application projects is based on Maven's method of building multiple modules. Each module built in this way performs its own duties and is responsible for different functions. At the same time, each module uses hierarchical dependencies to ultimately form an aggregated Maven project.
If Spring Cloud is compared to a building, SpringBoot is equivalent to the foundation. As the versions develop, compatibility conflicts will occur between the two versions
The version name of SpringCloud is just the officially defined subway station name. It starts with the initial letter A and is updated to make it easier for people to remember. The version is generally downward compatible but upward incompatible, so the version needs to be assembled consistently, otherwise the project cannot run. Since the microservice system is not fully mature, there will be problems with backward compatibility. The package will have bugs and some missing categories. New scholars can just use the latest stable package.
2.4.2 Zuul routing gateway
Zuul, the gateway of microservices, is the communication transfer station between the client and the server. The user's API request will be sent to the designated microservice through the gateway. Zuul is also the same It is also a "filter". User traffic involves tens of thousands of clicks, so highly available Zuul is required to ensure that no single point of failure occurs. The blog uses a method of registering Zuul to the service center without using external Nginx load balancing, so the high availability of Zuul is shown in Figure 2-6:
Figure 2-6 Zuul high availability architecture diagram
The core configuration of Zuul routing gateway is the filter, which plays the role of "intercepting" information. Zuul routing gateway officially defines a total of four different filter types, allowing custom filters: Omitted 4. Error type: When an error occurs during any execution, this filter will be used to report the error. 3. Post type: respond to API requests, collect API indicators, and send response results to users. 2. Routing type: After interception, the API request will be forwarded and distributed to the designated microservice center.
1. Pre type: before interception, called before request, can be used for Token verification.
2.5 Mysql database
A database is a repository that stores, manages and manipulates data according to its storage structure. Each database has multiple encapsulated and different calling methods. Directly used to add, delete, modify and query data in the repository.
Mysql is a relational SQL database. The Mysql database is open source, has a wide range of uses, and has good cross-platform support. It also provides calling APIs in multiple languages. The so-called relational database It is to establish a relational model in the repository, and then use set relationships such as mathematics to manipulate the data in the repository.
As a conventional back-end repository, Mysql has weaker performance than Oracle and was acquired by Oracle. However, Mysql is free, so it is very suitable for learning.
2.6 Mybatis Framework
The predecessor of Mybatis is IBatis. Ibatis is a persistence layer framework based on Java. It was renamed Mybatis in 2010 and is now maintained by GitHub. The advantage of Mybatis lies in customized SQL. Since the bottom layer of Mybatis uses a lot of reflection, Mybatis will provide automatic mapping, dynamic SQL, etc. Therefore, the DAO layer of Mybtais does not need to implement classes. It only needs an interface and XML configuration class to start. Today's mainstream Mybatis programming is Mapper interface programming, so this blog uses the MyBatisCodeHelperPro plug-in developed by Chinese people. The plug-in can directly generate simple SQL additions, deletions, modifications, and queries, saving time on simple SQL codes.
The core components of Mybatis are divided into four parts:
1. SqlSessionFactoryBuilder: Generates SqlSessionFactory, which is equivalent to a constructor.
2. SqlSessionFactory: uses factory mode to generate SqlSession.
3. SqlSession: Execute Sql and return Sql results.
4. SQL Mapper: Sql Mapper mapper, using mainstream Mapper programming.
A picture can be used to explain the relationship between the four core components of Mybatis, as shown in Figure 2-13:
Figure 2-13 Core components of Mybatis
Figure 2-13 can be understood as passing the "key" to realize the SQL execution process through Java constructs. The bottom layer is based on Java interceptor reflection implementation. If you want to learn, you can learn about it yourself.
2.6.1 Mybatis paging plug-in
When developing a blog, many paging operations are used. The native paging class is more troublesome to operate, so when using the MyBatis framework, you can use Open source Mybatis' PageHelper paging plug-in. Of course, you can also use the native Mybatis paging plug-in, but it is not as easy to use as the open source Mybatis paging plug-in pageHelper. It is more dangerous to use open source plug-ins, and you need to carefully control every link when using them.
SpringBoot integrated pageHelper paging plug-in can import the following Maven configuration:
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.12</version>
</dependency>
There are many ways to call pageHelper, but I personally recommend using the following code method:
//Mapper接口方式的调用，推荐这种使用方式。
PageHelper.startPage(1, 10); //第几页多少数据
List<Country> list = countryMapper.selectIf(1); //数据库中的数据
PageInfo pageInfo=new PageInfo(list); //进行数据分页
关于pageHelper的yml配置信息如以下所示：
//这只是pageHelper的配置，完整需要配置Mybatis，Mapper和Entity位置。
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql
2.7 Redis cache middleware
Redis is a Nosql cache database. Redis has three advantages. First, it is written based on ANSI C language, which is close to machine language and runs fast. Secondly, Redis's memory-based reading and writing is much faster than the disk reading and writing of the database. Finally, compared to SQL, the data structure type itself is relatively simple. However, Redis also has disadvantages. The memory is smaller than the disk, so the amount of storage required for the system data and the time the data exists need to be considered. In the early days of Internet products, "slow response" and other situations occurred when facing "high concurrency" responses. The reason was that the user's read requests were much larger than the write requests, causing the overall pressure on the database to increase. Therefore, Redis middleware was introduced to reduce the user's read requests. The request is placed in the cache. With the advent of the era of microservices and distributed architecture, Redis has found a place to shine.
Omitted
3 Blog demand analysis
3.1 Microservice function analysis of blog
Blog is a sharing type technical product of the Internet, but how to retain it? What matters is the users. Not all functions will involve "high concurrency". The functional diversity of the blog will enhance the user experience, make users dependent on the use of the blog, and use the herd mentality to reasonably develop value-added Function.
The development of this system adopts the mainstream microservice architecture, so controlling the independence and completeness of the functions of each microservice is the key to the "microservice" system. Since the implementation of the blog is relatively simple, breakpoint analysis is only needed when "high concurrency" is involved. Some functions of the blog system will be introduced below.
The basic functions of a blog are available, such as the core functions of a blog: blog posting, deletion, browsing, commenting, likes, etc. In addition to these, you can also check in regularly every day to improve the level of your blog, and recharge your membership to improve your experience. Personal security information is also very important, so I divided a separate microservice center to implement it. I also added obvious comments to each important line of code, which can lay a solid foundation for my future maintenance and expansion of blog functions, and conform to the principles of software design and development as much as possible.
The function of blog involves a total of 8 microservice centers:
1. User's personal center: includes login, registration, and smart verification.
2． User security center: security information, basic functions of mobile phone and email, and security authentication interface.
3. User's Blog Center: Publish and manage personal blogs, and visitors can browse public blogs.
4． User's file center: pictures and personal user avatars needed to publish blogs.
5. User's sign-in center: accumulated experience points and sign-in rewards for blog sign-ins.
6． User's member center: includes ordinary members and super members.
7. User's payment center: VIP recharge function, personal wallet function, billing, etc.
8． User's search center: Search the specified blog based on keywords in the abstract or article title.
3.2 Summary of this Chapter
This chapter mostly writes about the blog requirements to be realized. The next chapter will specifically mention the architectural design of the blog.
4 Blog design analysis
4.1 Blog architecture design
After dividing the requirements, the microservice architecture of the blog involves the following figure Shown in 4-1:
Figure 4-1 Microservice architecture diagram of blog
From a macro design perspective, each microservice center is a module and needs to be registered to a highly available microservice registration center to ensure the accuracy of machine information.
From a micro-operation perspective, users' API requests go through Zuul, and are then distributed to the required microservice centers by Zuul load balancing, so Zuul also needs high availability to ensure that user traffic can be responded to. After passing through the zuul gateway, the request implements data interaction between microservices through Feign.
When an error occurs, Hystrix's rollback mechanism is used to protect the stable operation of the system, without cascading occupancy effects, and to ensure that every API request can be responded to. When network unavailability occurs, the user's compensation mechanism needs to be triggered. When an unknown error occurs, the cluster of machines can also be directly managed to maintain the stable operation of the system.
4.2 Blog database design
For users, they need to enter their account number and password. If they do not exist, they can register their own account number and password. When registering, you are provided with a valid time of 30 minutes to fill in the blog information. If you do not fill it in, you will log in directly. You need to set up your personal mobile phone and email address to bind security authentication. If you want to open my wallet, you need to register with your real name, which also includes campus authentication. If you lose your personal information, you can use your ID card to appeal. You can start signing in from early morning every day. Depending on the member's different gains, the accumulation of experience points will be different depending on the number of days that the sign-in lasts. Membership activation only includes Alipay, and the bill is a record of each consumption. The core table is a table such as a user's blog. Articles are stored in the database, but ElasticSearch also saves the title and abstract of the article. Each user can comment on other people's articles, private articles will not appear, and members' articles will appear in the members area.
The blog contains a total of 8 main functions, so it involves a user table, a user information table, a security table, an avatar table, a sign-in table, a sign-in reward table (two kinds of rewards), a membership table, and a wallet table. , 17 tables including order table, blog table, blog category table, blog tag table, blog picture table, blog comment table, like table and collection table.
4.2 Summary of this Chapter
This chapter involves only architectural design, and the overall functional implementation of the blog will be mentioned in the next chapter.
5 Design and implementation of blog
5.1 Implementation of overall blog architecture
All functions of blog have been implemented, from front-end to back-end There will be detailed implementation on each end. This chapter is an implementation summary of the first 4 chapters. When it comes to high availability and distribution, it will be mentioned but there is no detailed answer. After reading this chapter, you will understand how microservices run. of.
5.1.1 Implementation of Vue architecture
The front-end IDE uses WebStorm, and the main distribution of Vue on the blog is shown in Figure 5-1
Alert.js is a beautiful prompt box for custom refactoring code. axios.js is the encapsulated axios request HTTP function. components is the Vue file storage location and is also a component of Vue. index.js manages the jump of the front-end routing url, using components components and url control. store.js is a file for component state management. It is not mainly used because it uses LocalStorage for local storage. main.js is a global file and the most important file, managing the global configuration of Vue. Static/img stores images used in blogs.
5.1.1.1 package.json file
Whether it is a project created with an IDE or a vue project created with conventional scaffolding, the project will generate a package in the root directory .json file, this file is similar to the "pom" of the backend. This file contains various required packages, and also contains the name and version of the project configuration.
The complete dependencies code of the package in the blog project is as follows:
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^3.3.7",
"echarts": "^4.6.0",
"element-ui": "^2.12.0",
"font-awesome": "^4.7.0",
"github-markdown-css": "^4.0.0",
"highlight.js": "^9.18.1",
"jquery": "^3.4.1",
"marked": "^0.8.0",
"mavon-editor": "^2.7.7",
"popper.js": "^1.12.5",
"showdown": "^1.9.1",
"v-charts": "^1.19.0",
"view-design": "^4.0.2",
"vue": "^2.5.2",
"vue-drag-verify": "^1.0.6",
"vue-nocaptcha": "^0.2.8",
"vue-puzzle-vcode": "^1.1.2",
"vue-qr": "^2.2.1",
"vue-router": "^3.0.1",
"vue-schart": "^2.0.0",
"vue-splitpane": "^1.0.6",
"vuex": "^3.1.2"
}
5.1.2 Implementation of SpringCloud architecture
The structure diagram of blog Maven's overall microservice center implementation is shown in Figure 5-2:
Figure 5-2 SpringCloud backend diagram
SpringCloud is a tool set based on the Java language. SpringCloud has ready-to-use features that can save development and configuration time. It can be developed and deployed in cloud environments such as Docker. SpringCloud has rich components, and the blog uses Eureka, Zuul, Feign, Htsrrix, trubine, and Zipkin microservice components. Components can be freely selected, but the version dependencies between SpringBoot and SpringCloud need to be resolved before they can be used. The JDK version of Java involved in the blog is 1.8, the SpringBoot version is Spring Boot 1.5.9.RELEASE, and the SpringCloud version is Edgware SR4. The back-end IDE uses IDEA, and the Maven version is 3.6.1. Changes to any version may cause compatibility inconsistencies.
5.1.3 Implementation of high availability of blogs
The blog uses two Zuuls and registers with the high-availability service discovery center to construct a Zuul high-availability cluster. Eureka is the registration center for all microservices, and it is also a microservice itself, but self-registration needs to be prohibited. The Eureka registration center contains the name, IP, port, etc. of each microservice. Since the microservice of a single node may be unavailable, causing system downtime, a highly available microservice registration center is used. Let two (multiple) service discovery components register with each other to maintain calls to other microservices and maintain high availability of the entire system
DS Replicas represents two modules loaded to simulate a single machine to replace the high availability implementation, but the local Host needs to be modified to simulate the real multi-machine high availability effect. Each microservice has its own virtual host name and status to describe the microservice's appearance. Service availability is guaranteed between each microservice through heartbeat communication with the service registration center every 30 seconds. By default, if no heartbeat is received for 90 seconds, the microservice will be logged out. EurekaServerOne and EurekaServerTwo are two microservice registration centers. They register to each other's service center to ensure the high availability and stability of Eureka, so that every blog request can be responded to.
5.2 User’s Personal Center
The user’s personal center is equivalent to the door of the blog. The user’s first traffic passes through here, and the first load balancing call is also based on this center. At the beginning, it mainly involves the basic functions of user login and registration, eliminating malicious attacks and interference on login, ensuring the stability of blog login, and thereby ensuring the stability of the system. The core function of this center is permission verification and keeping the login mark. It is an important factor in maintaining business stability. The subsequent implementation will be based on the three important functions mentioned above.
5.2.1 Smart verification of login
When Vue integrates Alibaba Cloud smart verification, you need to register the layout component to dynamically load JavaScript files, otherwise you cannot use Alibaba Cloud's intelligence Component, the core code of front-end login intelligent verification is as follows:
//动态加载阿里云的JavaScript文件
<remote-js
src="//g.alicdn.com/sd/nvc/1.1.112/guide.js" @loaded="initCaptcha">
</remote-js>
//注册局部组件来加载阿里云的JavaScript文件
components: {
"remote-js": {
render(createElement) {
const self = this;
return createElement("script", {
attrs: {
type: "text/javascript", src: this.src },
on: {
load() {
self.$emit("loaded");
}
}
});
},
props: {
src: {
type: String, required: true }
}
}
},
//点击智能验证的封装函数
initCaptcha() {
let _this=this;
let ic = new smartCaptcha({
renderTo: '#sc',
width: 350,
height: 42,
default_txt: "请点击验证按钮",
success_txt: "博客登录验证成功",
fail_txt: "点击按钮重新刷新登录验证",
scaning_txt: "智能检测中",
success: function (data) {
console.log(NVC_Opt.token);
console.log(data.sessionId);
console.log(data.sig);
_this.aliToken=NVC_Opt.token;
_this.sessionId=data.sessionId;
_this.sig=data.sig;
},
});
ic.init();
},
5.2.2 Blog login registration
Login is an important function of a system and an important manifestation of personal privacy. Common logins include email, mobile phone, account or voice. Or log in with a QR code, but no matter which login method is used, the security of personal information should be protected. The important thing to protect personal privacy is to start from the individual and reject illegal clicks and inputs.
For example, to log in to this blog, you only need to verify your account and password. Permission verification will not be performed for personal login. Successful registration will maintain permission verification for 30 minutes. Permission verification will be mentioned in the heading 5-2-3 to facilitate subsequent blog information operations. If it exceeds the limit, you will need to log in again and fill in the blog information in the blog's personal center.
The blog login and registration page is shown in Figure 5-4:
Figure 5-4 Login and registration page
The username for blog login needs to start with an English letter. Both the username and password cannot exceed 16 characters.
Just make sure the password is correct for two logins. No more details here. Post pictures to describe.
5.2.3 Login permission verification
Login permission control is a necessary function for every system and is an important implementation to maintain the login status. All permission verification of microservices is performed on one module. When the Token expires, it will directly fall back to the front-end status 404 failure code. If it succeeds, the corresponding business logic will be executed. Note that the logged-in blog does not require permission verification.
The blog uses front-end and back-end interceptors to intercept Token (authentication code for successful login), so the back-end needs to define a token verification annotation, use the interceptor to intercept the system's URL request, and then intercept the user's API request, and finally verify whether the passed token is consistent with the token value in Redis. Normal access can only be accessed after passing the verification. When the user successfully logs into the blog, the backend returns token data. The token has an existence time. If the user is not online or operating after a period of time, the token will become invalid. While the user remains logged in, it will not expire.
Redis will use the user's login account as the authentication associated with the token. The valid token code can be used to retrieve the user's account, and then perform business logic. These keys in redis can be set for some time by themselves, but the front end only saves the token value, and the second login will overwrite the token value in Redis.
Permission verification remains logged in, as shown in Figure 5-5:
Figure 5-5 Permission verification
Permission verification is equivalent to the first door of the system. Today's security frameworks are becoming more and more abundant, such as Spring Security, Shiro, OAuth, etc., and the difficulty of getting started with shiro->security->oauth is gradually increasing. If you need to encrypt the password, you can configure and use the corresponding security framework according to your personal development.
The front-end hooks and interceptors of login verification implement the front-end Token detection code as follows:
Omitted
5.3 User’s Security Center
5.3.1 User’s Security Layout
The security center includes email, mobile phone, ID card, campus authentication and other micro The authentication interface that the service center needs to use. The email address is QQ mailbox, and the SMTP port 587 is enabled to send the email verification code. The mobile phone uses Alibaba Cloud SMS API service. Both verification codes have a validity period of 1 time and last for 10 minutes. ID card requires verification of mobile phone number. The name on campus certification needs to be consistent with the name on the ID card. In addition to binding some secure services, it also includes three ways to change passwords: changing the original password to a new password, resetting the password by email, resetting the password by mobile phone, and resetting the password by ID card. Personal complaints include resetting the email address of the mobile phone number, replacing the old mobile phone with a new one, and resetting the mobile phone with the ID card. The security center front-end diagram is shown in Figure 5-6:
Figure 5-6 Security Center front-end diagram
The security center includes user rules and regulations. The purpose of the blog is to share one's own updates and experiences with others. It is not allowed to insult others or not comply with the laws and regulations of the country. The mobile phone authentication interfaces required by other microservice centers in this blog are provided by this microservice center.
5.3.2 User’s email registration
The blog uses a free QQ email. The yml configuration of the email is as follows:
Omitted
5.3.4 User security authentication
The secure authentication provided includes identity authentication and campus authentication. Of course, it is only the submission of the form. The real authentication requires the cooperation of relevant departments. Here it is just For simulation, the campus authentication needs to be consistent with the name on the ID card, otherwise it will not pass. Real-name authentication is shown in Figure 5-7, and campus authentication is shown in Figure 5-8.
Figure 5-7 Real-name authentication
Figure 5-8 Campus Authentication
5.3.5 User password security
When an abnormality occurs in the personal security account, you can change the password or reset Password.
As shown in Figure 5-9 to modify personal password and Figure 5-10 to reset personal password:
Figure 5-9 Modify personal password
5.3.6 User’s account appeal
You can use your mobile phone number to reset your email address, or you can use your old mobile phone number to change to a new one. If the mobile phone number security information of a personal blog is stolen, the mobile phone number can also be reset, but you need to use your ID card to appeal, but you can only appeal successfully once a day. As shown in Figure 5-11:
Figure 5-11 Security complaint
For one-day aging of security complaints use Redis middleware:
//设置一天的限时
jedis.set(resetName,username);
jedis.expire(resetName,86400);
5.4 User's File Center
5.4.1 User's avatar storage
When a user registers, he or she will need to select a personal avatar and upload the avatar It can only be in JPG format and the size cannot exceed 2MB. Before uploading, it will check whether the avatar image name in the database already exists. If it exists, the old image in OSS will be deleted directly and then the new image will be inserted. If it does not exist, it will be inserted directly. to the OSS file server. The avatar storage process involves the front-end initiating a file and passing it to the back-end. The back-end accepts the file avatar and uses binary to pass it to the OSS file server. The server then transmits the external URL address of the avatar. At this time, the display time is modified to 10 years and then returned to the user. Finally, the external URL address of the avatar is saved to his own LocalStorage. Upload the user avatar to the OSS object file server as shown in Figure 5-12:
omission
5.6 User’s Member Center
5.6.1 Member Process Control
Since the Member Center and the Payment Center are closely connected, the two centers Can be combined and viewed as a center. The user's membership center includes ordinary members and super members. Each method has three revenue methods, annual fee, quarterly fee and monthly fee. After successful payment, the business logic will be executed by load balancing. Since payment does not belong to this module, this module is only called by other microservices to directly complete the business logic.
5.7 User's Payment Center
5.7.1 User's Payment Center
When the real-name authentication is not completed, the page will be redirected to the real-name authentication. During real-name authentication, entering the My Wallet Center for the first time will trigger the setting of a payment password. After the setting is successful, the payment password is required for payment and binding of personal bank cards. You can use the old payment password to change the new password, or you can reset the mobile phone password. You can also bind your own bank card, which requires the cooperation of relevant departments. This blog only allows China Construction Bank, Industrial and Commercial Bank of China and Bank of China, and only one bank card is allowed to be bound. Use the v-charts component to display personal consumption status in a bar chart to users. The front-end diagram of the blog payment center is shown in Figure 5-15:
Figure 5-15 Front-end payment center
The personal payment password set by the user is shown in 5-16:
Figure 5-16 Set payment password
5.7.2 User’s account wallet
5.7.2.1 My account balance
After the user opens My Wallet, he or she can choose whether to recharge the balance. The account balance can only be recharged with Alipay for the time being. All operations on the amount need to be performed safely on the backend. The frontend is only used to display data and must use the amount in the database.
My wallet is shown in Figure 5-17:
Figure 5-17 My wallet
The balance of the recharge account is shown in Figure 5-18:
Figure 5-18 Recharge
5.7.2.2 My payment password
The password is 6 valid digits. You can use the original password to replace the new payment password, as shown in Figure 5-19:
Figure 5-19 Changing payment password
If you lose it and forget it, you can use your mobile phone number to reset the payment password, as shown in Figure 5-20:
Figure 5-20 Reset payment password
5.7.2.3 My account bank card
The name on the bank card must be consistent with the name for real-name authentication. The homepage is shown in Figure 5-21, the binding of the bank card is shown in Figure 5-22, and the unbinding of the bank card is shown in Figure 5-23:
5.7.3 User’s membership payment
The payment center includes ordinary members and super members. Since ordinary members use Alipay’s original method, while super members use Alipay’s QR code method, So the two will be used differently when calling.
The payment page for super members is shown in Figure 5-24:
Figure 5-24 Super member
5.7.3.1 Initiation of ordinary member payment
Taking the activation of ordinary membership as an example, the result is based on the asynchronous payment notification in Figure 2-19. Success and failure are determined by this The notification is used as a basis to determine what kind of business logic should be performed. The original back-end code for activating synchronous payment for ordinary members is as follows:
omission
5.8 User's Blog Center
5.8.1 User's Visit Homepage
Writing a blog is an opportunity to show yourself, through this opportunity, you can enhance your With my personal expression skills, I will also get to know some blogger friends from all over the world. By studying other people's articles, we can also enhance our personal knowledge and vision. To sum up, the user's blog center is the core function of the blog system.
Users can share their blog updates. Blogs are designed to share what they have learned with others, or to solve other people's difficulties. The blog center includes publishing blogs, viewing personal blogs, deleting blogs, and updating personal blogs. Non-users can also view other people's blogs and comment on other people's blogs, so you need to use the paging function and roller loading function to cooperate with the front-end to display non-private blogs for others to watch. The blogs that each user sees are the latest blogs, and they can learn and communicate with others. Every publisher must respect the intellectual work of others, never plagiarize or publish inappropriate articles, and be a qualified blogger.
When the user enters their account and password to log in, they can see the blog’s homepage as shown in Figure 5-32. On the homepage, you can see the publisher and the published articles. Click on the article to enter the article’s homepage. face-to-face learning and exchange.
Figure 5-32 Blog homepage
5.8.2 User's Article Center
The functions of the user's article microservice center include publishing, viewing, modifying, and deleting. Users can control every article they have published.
The personal blog center is shown in Figure 5-33:
Figure 5-33 Personal Blog Center
The addition, deletion and modification of articles will be explained in detail in the subsequent titles. Here, only the user's personal article center is released. As can be seen from the picture, all the articles published by the user are used. The backend uses the paging first and then the List method. , and finally send the front end to traverse and display the ListItem.
Since Elasticsearch is also used to classify articles as storage indexes, but important article information is placed in the database, I will only mention it here and will explain it in detail in the subsequent classification search.
5.8.2.1 Publish a personal blog
There are many options for publishing articles. You can choose the category of the article and the tag of the article. You can also set the article's tag. Visibility. Users can set the tags of articles, which are used to display to visitors and used for identification and authentication of articles. They can also set the category, type and confidentiality of articles. The category of each article will be published to the special area of that category. There are three types of articles. If you reprint and translate other people's articles, you need a famous address to protect the results of other people's intellectual labor. Only those with membership qualifications can send it to the members area, but reprinted articles cannot be sent to the members area. Please refer to the red letter precautions when publishing articles.
The page published by the blog is shown in Figure 5-34:
Figure 5-34 Confirm publication of article
The core original code of the blog is as follows:
Omitted
5.8.2.2 Modify personal blog
If you need to modify your personal blog, you need to enter the personal blog center in Figure 5-33, view the specified article published, and enter the page of the specified article. , click the edit button. The edit button will not appear for articles that are not mine. The effect of the edit button on the blog is shown in Figure 5-34:
All conditions and content of the article can be modified, as shown in Figure 5-35:
Figure 5-35 Modify personal blog
The difference between publishing and modifying the source code of an article is that you need to delete the previous association between the category ID and the tag ID of the original article, and then enter the insertion of the article. However, the modification of the article will also trigger the modification of the article information on the search engine. The article information will also be updated accordingly to keep searching for the latest data.
5.8.2.3 Delete a personal blog
Deleting a personal blog requires deleting articles on the database and search engine. Deleting articles cannot be restored.
The original code to delete the article is shown in Figure 5-36:
Figure 5-36 Delete personal blog
5.8.3 User’s article layout
The complete blog is displayed using GitHub’s code highlighting layout. Users can see that their blog is an embedded panel. Gives people a refreshing feeling. Due to the use of Vue, there is no need to dynamically render HTML. Using the v-html command, the data passed from the backend can be converted to HTML using the showdown converter and displayed directly to the user. The complete user viewing layout is shown in Figure 5-37:
Figure 5-37 Display of the complete blog
The important core code of the front end is as follows:
import showdown from 'showdown'
import 'github-markdown-css/github-markdown.css'
let converter = new showdown.Converter();
//转换为HTML
let html = converter.makeHtml(res.data.articleAll[0].articleMdContent);
5.8.4 Like users’ articles
In the Internet age, everyone may have liked articles shared by others. This design is a blog, so likes will be involved. When there are too many users, high concurrency needs to be considered. Under normal circumstances, likes will not put much load pressure on the backend. If it is a popular article blog, users like and unlike, comment, share, etc., these will bring huge traffic to the backend. If the back-end interface cannot support it and the front-end cannot respond, a 404 will be returned if the front-end cannot respond, which will lead to a very poor user experience. You can use the distributed middleware Reidsson in 2-7-1 to implement the like function.
The use case diagram of blog likes is shown in Figure 5-38:
Omitted
5.10 Summary of this chapter
All 8 microservice centers in this chapter have been implemented. The subsequent titles will explain in detail the analysis of the blog's testing, and also provide the solutions to the problems encountered during the blog code design phase. Provide solutions to "BUG" and unpreventable errors.
6 Blog Test Analysis
Omitted
8 Conclusion
This graduation project not only made me a huge improvement in Java and JavaScript, but also helped me develop the quality of surviving in adversity. After deciding on the tutor and topic for the graduation project, I read literature about microservices through different channels to understand the design of distributed systems. Combined with my previous knowledge of Java development, I came up with ideas for blog development, so I chose this topic.
After half a year of hard work, I finally completed the graduation project blog. The realization of the blog was mixed with many difficulties and setbacks, but I overcame them one by one. After I started working on my graduation project, I encountered a lot of code problems. Every time I saw learning documents and other people's solutions, I wanted to give up. However, due to the importance of my graduation project and my own open source goals, I could only Study and test under pressure. The sense of accomplishment every time I solve a problem increases my courage not to run away from problems in the future. During the coding stage of the blog, I gradually made up for the weak front-end capabilities, and now I can carry out full-stack Web development with ease. Through this graduation project, my knowledge and understanding of myself have been improved, which will have many positive impacts on my future work. But I will still maintain a humble attitude, and I will humbly ask for advice on every problem and difficulty. I will be willing to dedicate myself to helping others solve problems for everyone who needs help.
It was quite difficult to complete this graduation project. Many problems were solved during the process, and there were still some imperfect codes. Before this design, I was not very proficient in the use of middleware. When it was completed, each middleware had its existence in the microservice center, which greatly improved my personal confidence. Due to time and my own abilities, there are many imperfections in the function, but it is very friendly to the expansion of functions. As time goes by, I will enter the society from a fresh graduate, but I will spare some free time to use it step by step. Optimize the code I have written, and expand some minor functions in microservices, complete the transformation from a fresh graduate to a qualified programmer, and realize the value of my life in society.
谢
Omitted
References
[1] Chen Guojun. Java Programming Basics Fifth Edition, published by Tsinghua University Press, 2015
[2] Yang Kaizhen. JavaEE Internet lightweight integrated development (SpringMVC+ Spring+Mybatis+redis).
Electronic Industry Press, 2017.7
[3] Wang Song. Spring Boot+ Vue full-stack development practice, Tsinghua University Press, 2019.6
[4] Zhou Li. Spring Cloud and Docker (Second Edition) Microservice Architecture Practice, Electronic Industry Press, 2018.7
[5] Liang Ying .Vue.js in practice, Tsinghua University Press, 2018.12
[6] Liu Wei. Java Design Patterns, Tsinghua University Press, 2019.5
[7][ United States] Baron Scbwartz. High-performance Mysql, [Translation] Ning Haiyuan, Electronic Industry Press, 2013.5
[8] Baidu Reading. Hu Yang’s online works, Vue+Bootstarp+View-UI+element -UI learning documents
[9] Zhong Linsen. Distributed middleware technology practice (Java version), Machinery Industry Press, 2020.1
[10][U.S. ] Matthew Lee Hinman. Elasticsearch in practice, [Translation] Huang Shen, People's Posts and Telecommunications Press, 2019.10
[11] Fang Zhipeng. In-depth understanding of Spring Cloud and microservice construction, People's Posts and Telecommunications Press, 2018
[12] Yang Guanbao. Alibaba Java Development Manual, Electronic Industry Press, 2018.1
[13] Hu Hefen. Wu Shaoxing. Basic Tutorial on UML System Modeling , Tsinghua University Press, 2016.7
[14][US] Brian Goetz. Java Concurrent Programming Practice. [Translation] Tong Lanyun, Machinery Industry Press, 2012.2
[15][US] Nicholas C.Zakas. JavaScript Advanced Programming. [Translation] Cao Li, People's Posts and Telecommunications Publishing House, 2012.3
[16][US] Mark Allen Weiss. Data Structure and Algorithm Analysis (Java). [Translation] Chen Yue, Machinery Industry Press, 2016.2
[17] Zhu Zhonghua. RabbitMq Practical Guide, Electronic Industry Press, 2017.11
[18] Xiao Ma Ge. Spring Boot Programming Thoughts (Core), Electronic Industry Press, 2019.3
[19] Gao Hongyan. Java multi-threaded programming core technology, Machinery Industry Press, 2019.1
[20] Fang Pengfei. Wei Peng. Cheng Xiaoming. The Art of Java Concurrent Programming, Machinery Industry Press, 2015.7
5. Resource download
The source code and complete paper of this project are as follows. Friends in need can click to download. If the link does not work, you can click on the card below to scan the code and download it yourself.
| serial number | A complete set of graduation project resources (click to download) |
|---|---|
| Source code of this project | Design and implementation of blog system based on Vue+SpringCloud+Mysql (source code + documentation)_Vue__blog system.zip |