This article mainly introduces a simple practice based on Spring MVC and AngularJS front-end separation.
1 Why separate front and back ends
1.1 Problems of traditional web development
(1) Front-end code is becoming more and more complex
• Unable to unify the collaborative mode, the code is full of conventions
• JS and CSS depend on the HTML generated by the back-end
• Some data comes from AJAX, some data is printed on the DOM
• Some business logic is in the front end, some in the Model layer, and more in the View layer
(2) The front and back ends are highly coupled
• The front end depends on the server development environment
• In the server View layer Highly coupled
• High communication cost
• Unclear responsibilities
(3) Cannot support cross-terminal well
• Business logic is scattered in the application
• Rendering logic strongly depends on the back-end page
• Can only be hard with responsive design
(4) Highly coupled front-end and back-end Division of labor
• Increased communication costs
• Increased maintenance costs
• Inability to respond correctly and quickly to changes
• Code corruption is only a matter of time
1.2 Advantages of separation of front and back ends
• Separation of concerns • Separation
of responsibilities • Right
people do the right thing
• Better co-construction model
• Quick response to changes
1.3 Front-end and back-end separation architecture
Redefined front-end and back-end:
a middle layer (NodeJS) is built between the server (JAVA) and the browser (JS).
Responsibilities:
2 Simple practice
2.1 Back-end java implementation
Using Spring MVC architecture, pure java code, the controller layer only provides Restful API to the outside, and only json data interaction with the front-end.
Sample code:
Use eclipse to build a maven web project.
(1)
Add spring mvc configuration to pom.xml
(2)
Add annotation-driven and component-scan attributes to spring-config.xml :
Configure Mybatis database connection:
(3) Java code implements Restful API
login entry controller:
2.2 Front-end AngularJS implementation
(1) Front-end routing configuration
(2) Front-end controller configuration
2.3 Introducing nodejs The
current front-end is deployed on tomcat. Later, we will consider introducing nodejs as a routing forwarder and configuring the expression plugin for forwarding.