零基础学习基于Vue和SpringBoot的前后端分离Web应用
发布网友
发布时间：2024-08-19 23:20
共1个回答
热心网友
时间：2024-08-22 08:10
本文参考书籍如下。
图1展示了本范例的架构，前端视图使用了Vue框架的query.html，后端控制器层包括DispatcherServlet类和PersonController类。后端模型层包括PersonService接口和PersonServiceImpl实现类，以及Person类。
图1 前后端分离的Web架构
例程11是query.html的源代码。Vue根组件包含三个模型变量。
例程1 query.html
Vue根组件模板中的v-if指令用于控制元素输出，仅当isFind变量为true时显示。
通过浏览器访问query.html，在页面上输入用户id，Vue根组件的findPerson()方法会通过Axios请求访问后端的PersonController，返回相应的Person对象的JSON格式数据。
query.html将接收到的Person信息展示到页面上，参见图2。
图2 query.html展示查询到的Person信息
2. 创建控制器类
Spring MVC框架将资源视为Bean组件。自定义的PersonController控制器类也属于Bean组件，参见图2。
例程2 PersonController.java
PersonController类代码简短，使用了四个来自Spring MVC框架的注解，轻松整合到Spring MVC框架中。
2.1 @Controller注解
PersonController类用@Controller注解标识，向Spring MVC框架表明自己的控制器类身份。Spring MVC框架在启动时，会扫描Java类，遇到用@Controller注解标识的类，就会将其注册为控制器类型的Bean组件，纳入自己的管辖之中。
2.2 @ResponseBody注解
PersonController类使用@ResponseBody注解标识，作用是使得请求处理方法返回JSON格式的响应正文。当一个控制器类联合使用@Controller注解和@ResponseBody注解，可以用@RestController注解来代替。
2.3 @Autowired注解
PersonController类有一个personService成员变量，用@Autowired注解标识，表示PersonController类向Spring MVC框架请求资源，要求提供作为Bean组件的PersonService对象。
2.4 @RequestMapping注解
PersonController类有一个getPerson(int id)请求处理方法，调用模型层的PersonService对象的findPersonById()服务方法，查询与id匹配的Person对象。
2.5 请求处理方法的参数
getPerson()方法有一个参数id。Spring MVC框架与控制器类之间有高度默契，调用getPerson()方法时会自动读取客户请求中的请求参数id，将其赋值给getPerson()方法的参数id。
2.6 请求处理方法的返回类型
大力：“getPerson()方法返回Person对象，而@ResponseBody注解表明请求处理方法返回JSON格式的响应正文，这不是很矛盾吗？”
卫琴姐：“有了Spring MVC框架暗中相助，就不矛盾了。Spring MVC框架会根据@ResponseBody注解的指示，自动把getPerson()方法返回的Person对象转换为JSON格式，再发送给客户端。”
大力：“看来控制器类为Spring MVC框架打工是很省力的，Spring MVC框架会亲力亲为地分担一部分工作，比如读取请求参数，把控制器类返回的Java对象转换为JSON格式的数据。”
3. 创建模型层的服务类
模型层的PersonService接口定义了供控制器层调用的服务方法，参见图3。
例程3 PersonService.java
模型层的PersonServiceImpl类实现了PersonService接口，参见图4。
例程4 PersonServiceImpl.java
PersonServletImpl类的findPersonById(int id)方法模拟根据id查询匹配的Person对象的过程。在实际应用中，通常会到数据库中去查询业务数据，而本范例做了简化，从一个存放了若干Person对象的persons映射中查找匹配的Person对象。
PersonServletImpl类用@Service注解标识，向Spring MVC框架表明自己的服务类身份。Spring MVC框架在启动时，会扫描Java类，遇到用@Service注解标识的类，就会将其注册为服务类型的Bean组件，纳入自己的管辖之中。
在PersonController类中，可通过@Autowired注解从Spring MVC框架中获得该Bean组件。
4. 在IDEA中创建采用Spring Boot框架的Web应用
本范例的开发步骤如下。
（1）在IDEA中选择菜单FileNewProjectSpring Initializr，创建基于Spring Boot的helloapp应用，在配置窗口中设置应用的名字、根路径、包的名字、JDK的版本等信息。
（2）在依赖配置窗口中增加Spring Web依赖。
（2）把helloapp应用的所有Java类的源文件拷贝到helloapp\src\main\java\mypack目录下。把query.html文件拷贝到helloapp\src\resources\static目录下。helloapp应用的主要目录结构参见图6。
图6 helloapp应用的主要目录结构
Spring Boot框架自动为helloapp应用创建的主要目录以及文件如下。
本范例中的query.html文件放在helloapp\src\resources\static目录下，自创建的Java源文件都放在helloapp\src\main\java目录下。HelloApplication类则由Spring Boot框架自动创建，代码如下。
5. 在application.properties文件中配置Tomcat
在application.properties文件中，通过以下代码指定helloapp应用的URL根路径为“/helloapp”：Tomcat的默认监听端口为8080，如果要改为其他端口，可以设置server.port属性，例如以下代码把端口设为80。
6. 运行HelloApplication类
在IDEA中选择菜单Run-》Run HelloApplication类，就会运行HelloApplication类。HelloApplication类会启动内置的Tomcat，然后自动把helloapp应用发布到Tomcat中。
通过浏览器访问PersonController类的getPerson()方法，URL为http://localhost:8080/helloapp/find?id=1。Spring MVC框架会根据该请求调用PersonController对象的getPerson()方法，返回的页面参见图7。
图7 PersonController对象的getPerson()方法返回JSON格式的Person信息
也可以通过浏览器访问http://localhost:8080/helloapp/query.html。query.html的JavaScript脚本通过Axios API访问PersonController类的getPerson()方法，然后把得到的Person对象的信息展示到网页上。
