After reading this article, take the springboot+jsp+vue+easyui architecture project properly

Provides the idea of ​​using Springboot+jsp+ui framework (vue,layui,elementui,bootstrap5) to build a project, and provides a source code for your reference, I hope it will help and improve you@source code: https://
gitee .com/FnTop/j4n-spring-boot-jsp-vue-easyui

concept

• Spring Boot is a framework for quickly building Java-based web applications. It offers features that simplify the development process, such as auto-configuration and a built-in embedded server.

• JSP (Java Server Pages) is a Java-based server-side technology for dynamically generating HTML pages. In Spring Boot, you can use JSP to build the view layer.

• Vue is a lightweight front-end interface framework for building user interfaces. It uses a bottom-up approach to building applications and provides an easy-to-use componentized development model.

• EasyUI is a jQuery-based UI library that provides rich user interface components, such as tables, forms, layouts, etc. It helps to quickly build beautiful and easy-to-use web application interfaces.

To sum up, Spring Boot JSP Vue EasyUI is a web application development model that uses Spring Boot as the back-end framework, JSP as the view layer technology, Vue as the front-end framework, and EasyUI as the UI library. This combination can provide web applications that are fast to develop, easy to maintain, and have a good user experience.

flow chart

process explanation

If you can't understand the code below, just pull a project template to see it
j4n-spring-boot-jsp-vue-easyui

ModelAndView (MVC for short) I personally refer to model data (model) and view analysis (view) for short. The following descriptions are explained in terms of model and view

first step

Start the project, visit the homepage of the front-end project according to the Index address, and then perform normal front-end and back-end interactions

second step

front-end interaction

• The front end sends a request, the Controller receives it, and the code processes the DB data and encapsulates it into the model. JSP page forwarding through view. On the jsp page, el表达式the model data is rendered through the + easyui component or the original html. Since then, dynamic page data interaction (ModelAndView interaction) has been completed

//简单的ModelAndView 
ModelAndView modelAndView = new ModelAndView();  
//假设 hello world 就是db的数据，//省略db的业务操作
modelAndView.addObject("message", "Hello World!");  
modelAndView.setViewName("hello");  
return modelAndView;  
当然也可以这样写，但是要配置下方yaml的视图解析。这是可以不配置，只是作者忘记了默认视图解析路径是啥
ModelAndView modelAndView = new ModelAndView();  
modelAndView.addObject("message", "Hello World!");  
return "hello";  

yaml

spring:
  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp

el-expression

${
    
    message}

• Ajax sends a request, RestContrller receives it, the code processes the DB data and encapsulates it into an object, and returns the data in JSON format to the jsp page for processing. When you arrive at the jsp page, you can bind and render the data through the easyui framework alone. The acquired data can also be rendered to data through vue. Because the initialization page mounted mounts the easyUI component, the easyui component is associated with data (JSON interaction)

/**
@RestController底层是下方两个注解。@Controller 默认返回是modelandview 。如果加了@ResponseBody则返回是JSON
RestController是写在类上的，相当给所有方法加上了@ResponseBody。如果一个控制层要同时存在modelandview 和JSON返回。那类上的注解必须是Controller,需要modelandview 返回的只要在方法上加上@ResponseBody即可

*/
@Controller
@ResponseBody

• Another kind of interaction is also an Ajax request, but it can carry model and JSON data to the front end at the same time. The model is parsed and obtained through jsp technology, and JSON is rendered through ajax (ModelAndView or JSON interaction)

Summarize

• Traditional projects rely on the Spring container to configure beans through xml to complete dependency injection. Tomcat also needs to be configured by itself, and the configuration and development are extremely cumbersome. Springboot has built-in Tomcat and can complete dependency injection through annotations, making development extremely convenient and simple.

• Some people say that using vue, why not separate the front and back ends? This question? The company's project is developed with jsp, there is nothing you can do, unless you can replace all the company's original business with vue development. this. . . It's money for a year even if it's not half a year.

• Can I use layui or bootstrap? sure. As long as the front-end UI framework is js or jquery package, the principle is the same.

thank you

• Thank you very much for reading this article from the beginning to the end, I hope the content in it can inspire and help you. If you have other questions or need further understanding, please feel free to follow my dynamics and leave a message
• Finally, can you give the author a follow and a little like, thank you!
• If you think it is worth collecting, you can collect it