SpringBoot + Vue基本知识点荟萃

SpringBoot + Vue基本知识点荟萃 Maven

推荐整理分享SpringBoot + Vue基本知识点荟萃，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

Maven是一个项目管理工具，可以对Java项目进行自动化的构建和依赖管理

Maven的作用项目构建：提供标准的，跨平台的自动化构建项目的方式依赖管理：方便快捷的管理项目依赖的资源（jar包），避免资源间的版本冲突等问题统一开发结构：提供标准的，统一的项目开发结构，如下图所示

运行 Maven 的时候，Maven 所需要的任何构件都是直接从本地仓库获取的。如果本地仓库没有，它会首先尝试从远程仓库下载构件至本地仓库。

本地仓库配置

修改maven安装包中的conf/settings.xml文件，指定本地仓库位置。

远程仓库配置

maven默认连接的远程仓库位置并不在国内，因此有时候下载速度非常慢，我们可以配置一个国内站点镜像，可用于加速下载资源。

与IDEA集成

SpringBoot快速上手SpringBoot介绍Spring Boot是由Pivotal团队提供的基于Spring的全新框架，旨在简化Spring应用的初始搭建和开发过程。Spring Boot是所有基于Spring开发项目的起点。Spring Boot就是尽可能地简化应用开发的门槛，让应用开发、测试、部署变得更加简单。SpringBoot特点遵循“约定优于配置”的原则，只需要很少的配置或使用默认的配置。能够使用内嵌的Tomcat、Jetty服务器，不需要部署war文件。提供定制化的启动器Starters，简化Maven配置，开箱即用。纯Java配置，没有代码生成，也不需要XML配置。提供了生产级的服务监控方案，如安全监控、应用监控、健康检测等。快速创建SpringBoot应用

开发环境热部署在实际的项目开发调试过程中会频繁地修改后台类文件，导致需要重新编译、重新启动，整个过程非常麻烦，影响开发效率。Spring Boot提供了spring-boot-devtools组件，使得无须手动重启Spring Boot应用即可重新编译、启动项目，大大缩短编译启动的时间。devtools会监听classpath下的文件变动，触发Restart类加载器重新加载该类，从而实现类文件和属性文件的热部署。并不是所有的更改都需要重启应用（如静态资源、视图模板），可以通过设置spring.devtools.restart.exclude属性来指定一些文件或目录的修改不用重启应用步骤在pom.xml配置文件中添加dev-tools依赖。使用optional=true表示依赖不会传递，即该项目依赖devtools；其他项目如果引入此项目生成的JAR包，则不会包含devtools

在application.properties中配置devtools。

Optional如果使用了Eclipse，那么在修改完代码并保存之后，项目将自动编译并触发重启，而如果使用了IntelliJ IDEA，还需要配置项目自动编译。打开Settings页面，在左边的菜单栏依次找到Build,Execution,Deployment→Compile，勾选Build project automatically按Ctrl+Shift+Alt+/快捷键调出Maintenance页面，单击Registry，勾选compiler.automake.allow.when.app.running复选框。Finally做完这两步配置之后，若开发者再次在IntelliJ IDEA中修改代码，则项目会自动重启。项目创建成功后会默认在resources目录下生成application.properties文件。该文件包含Spring Boot项目的全局配置。配置格式如下：

系统配置Web开发基础Web入门Spring Boot将传统Web开发的mvc、json、tomcat等框架整合，提供了spring-boot-starter-web组件，简化了Web应用配置。创建SpringBoot项目勾选Spring Web选项后，会自动将spring-boot-starter-web组件加入到项目中。spring-boot-starter-web启动器主要包括web、webmvc、json、tomcat等基础依赖组件，作用是提供Web开发场景所需的所有底层依赖。webmvc为Web开发的基础框架，json为JSON数据解析组件，tomcat为自带的容器依赖。

控制器Spring Boot提供了@Controller和@RestController两种注解来标识此类负责接收和处理HTTP请求。如果请求的是页面和数据，使用@Controller注解即可；如果只是请求数据，则可以使用@RestController注解。

@Controller的用法示例中返回了hello页面和name的数据，在前端页面中可以通过${name}参数获取后台返回的数据并显示。@Controller通常与Thymeleaf模板引擎结合使用。

@RestController的用法@RestController的用法

@RestController和@Controller的区别

@RestController注解等价于@ResponseBody ＋ @Controller。@RestController和@Controller的共同点是都用来表示Spring某个类是否可以接收HTTP请求，二者区别： @RestController无法返回指定页面，而@Controller可以；前者可以直接返回数据，后者需要@ResponseBody辅助。 ① 是否可以返回页面 答：@RestController无法返回指定页面，而@Controller可以。 解析：对于Controller， 如果只是使用@RestController注解，则其方法无法返回指定页面，此时配置的视图解析器 InternalResourceViewResolver不起作用，返回的内容就是 return 里的内容。 如果需要返回到指定页面，则需要用 @Controller配合视图解析器InternalResourceViewResolver才行。 ② 返回内容 如果需要返回JSON，XML或自定义mediaType内容到页面，@RestController自己就可以搞定,这个注解对于返回数据比较方便，因为它会自动将对象实体转换为JSON格式。而@Controller需要在对应的方法加上@ResponseBody注解。

import java.util.HashMap;import java.util.Map;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("/difference")public class DifferenceController { // 跳转到上传文件的页面 @RequestMapping(value = "/goToSuccessPage", method = RequestMethod.GET) public String goToSuccessPage() { // 跳转到 视图层 success.html失败 return "success"; } @RequestMapping(value = "findAll", method = RequestMethod.GET) public Map<String, String> findAll() { Map<String, String> all = new HashMap<>(); all.put("remark", "可以返回json，xml或自定义mediaType内容到页面"); return all; }}@Controller@RequestMapping("/login")public class LoginController { @GetMapping(value = "/login") public String login() { // 跳转到 视图层 login.html return "login"; } @RequestMapping(value = "/getJson", method = RequestMethod.GET) @ResponseBody public Map<String, String> getJson() { Map<String, String> all = new HashMap<>(); all.put("remark", "结合注解 @ResponseBody 返回接送"); return all; }}路由映射

@RequestMapping注解主要负责URL的路由映射。它可以添加在Controller类或者具体的方法上。

如果添加在Controller类上，则这个Controller中的所有路由映射都将会加上此映射规则，如果添加在方法上，则只对当前方法生效。

@RequestMapping注解包含很多属性参数来定义HTTP的请求映射规则。常用的属性参数如下：

value: 请求URL的路径，支持URL模板、正则表达式

method: HTTP请求方法

consumes: 请求的媒体类型（Content-Type），如application/json

produces: 响应的媒体类型

params，headers: 请求的参数及请求头的值

@RequestMapping的value属性用于匹配URL映射，value支持简单表达式@RequestMapping(“/user”)

@RequestMapping支持使用通配符匹配URL，用于统一映射某些URL规则类似的请求：@RequestMapping(“/getJson/*.json”)，当在浏览器中请求/getJson/a.json或者/getJson/b.json时都会匹配到后台的Json方法

@RequestMapping的通配符匹配非常简单实用，支持“*”“?”“**”等通配符

符号“*”匹配任意字符，符号“**”匹配任意路径，符号“?”匹配单个字符。

有通配符的优先级低于没有通配符的，比如/user/add.json比/user/*.json优先匹配。

有“**”通配符的优先级低于有“*”通配符的

Method匹配

RequestMapping分别和GetMapping、PostMapping的区别 GetMapping和PostMapping可以用RequestMapping表示，例如

以get的方式请求

@RequestMapping(value=“/login”, method=RequestMethod.GET)等价于@GetMapping(“/login”)

以post的方式请求

@RequestMapping(value=“/login”, method=RequestMethod.POST)等价于@PostMapping(“/login”)

参数传递@RequestParam将请求参数绑定到控制器的方法参数上，接收的参数来自HTTP请求体或请求url的QueryString，当请求的参数名称与Controller的业务方法参数名称一致时,@RequestParam可以省略@PathVaraible：用来处理动态的URL，URL的值可以作为控制器中处理方法的参数@RequestBody接收的参数是来自requestBody中，即请求体。一般用于处理非 Content-Type: application/x-www-form-urlencoded编码格式的数据，比如：application/json、application/xml等类型的数据Web开发进阶静态资源访问使用IDEA创建Spring Boot项目，会默认创建出classpath:/static/目录，静态资源一般放在这个目录下即可。如果默认的静态资源过滤策略不能满足开发需求，也可以自定义静态资源过滤策略。在application.properties中直接定义过滤规则和静态资源位置： 过滤规则为/static/**，静态资源位置为classpath:/static/文件上传原理表单的enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。当表单的enctype=“application/x-www-form-urlencoded”（默认）时，form表单中的数据格式为：key=value&key=value当表单的enctype="multipart/form-data"时，其传输数据形式如下

SpirngBoot实现文件上传功能Spring Boot工程嵌入的tomcat限制了请求的文件大小，每个文件的配置最大为1Mb，单次请求的文件的总数不能大于10Mb。要更改这个默认值需要在配置文件（如application.properties）中加入两个配置spring.servlet.multipart.max-file-size=10MBspring.servlet.multipart.max-request-size=10MBA当表单的enctype="multipart/form-data"时,可以使用MultipartFile 获取上传的文件数据，再通过transferTo方法将其写入到磁盘中package com.example.helloworld.controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.IOException;@RestControllerpublic class FileController { @PostMapping("/upload") public String upload(String nickname, MultipartFile f, HttpServletRequest request) throws IOException { System.out.println(nickname); System.out.println("文件大小："+f.getSize()); System.out.println(f.getContentType()); System.out.println(f.getOriginalFilename()); //ServletContext().getRealPath() 是从当前servlet 在tomcat 中的存放文件夹开始计算起的 String path = request.getServletContext().getRealPath("/upload/"); System.out.println(path); System.out.println(f); saveFile(f, path); return "success"; } public void saveFile(MultipartFile f, String path) throws IOException{ File upDir = new File(path); if(!upDir.exists()){ upDir.mkdir(); } File file = new File(path+f.getOriginalFilename()); f.transferTo(file); }}拦截器拦截器在Web系统中非常常见，对于某些全局统一的操作，我们可以把它提取到拦截器中实现。总结起来，拦截器大致有以下几种使用场景：权限检查：如登录检测，进入处理程序检测是否登录，如果没有，则直接返回登录页面。性能监控：有时系统在某段时间莫名其妙很慢，可以通过拦截器在进入处理程序之前记录开始时间，在处理完后记录结束时间，从而得到该请求的处理时间通用行为：读取cookie得到用户信息并将用户对象放入请求，从而方便后续流程使用，还有提取Locale、Theme信息等，只要是多个处理程序都需要的，即可使用拦截器实现。

SpringBoot定义了HandlerInterceptor接口来实现自定义拦截功能，此接口定义了preHandle, postHandle, afterCompletion三个方法，通过重写这三个方法可以实现请求前、请求后等操作。

拦截器的定义public class LoginInterceptor implement HandlerInterceptor{ /** *在请求处理之前进行调用（Controller方法调用之前） */ @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, object handler) throws Exception{ if(条件){ System.out.println("通过"); return true; } else{ System.out.println("不通过"); return false; } }}拦截器注册addPathPatterns方法定义拦截地址excludePathPatterns方法定义排除某些地址不被拦截添加的一个拦截器没有addPathPatterns任何一个url则默认拦截所有请求如果没有excludePathPatterns任何一个请求，则默认不放过任何一个请求@Configurationpublic class WebConfigurer implements WebMvcConfigurer{ @override public void addInterceptors(InterceptorRegistry registry){ registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/user/**") }}构建RESTful服务RESTful介绍RESTful是目前流行的互联网软件服务架构设计风格。REST（Representational State Transfer，表述性状态转移）一词是由Roy Thomas Fielding在2000年的博士论文中提出的，它定义了互联网软件服务的架构原则，如果一个架构符合REST原则，则称之为RESTful架构。REST并不是一个标准，它更像一组客户端和服务端交互时的架构理念和设计原则，基于这种架构理念和设计原则的Web API更加简洁，更有层次。RESTful的特点每一个URI代表一种资源客户端使用GET、POST、PUT、DELETE四种表示操作方式的动词对服务端资源进行操作：GET用于获取资源，POST用于新建资源（也可以用于更新资源），PUT用于更新资源，DELETE用于删除资源。通过操作资源的表现形式来实现服务端请求操作。资源的表现形式是JSON或者HTML。客户端与服务端之间的交互在请求之间是无状态的，从客户端到服务端的每个请求都包含必需的信息。RESTful API符合RESTful规范的Web API需要具备如下两个关键特性：安全性：安全的方法被期望不会产生任何副作用，当我们使用GET操作获取资源时，不会引起资源本身的改变，也不会引起服务器状态的改变。幂等性：幂等的方法保证了重复进行一个请求和一次请求的效果相同（并不是指响应总是相同的，而是指服务器上资源的状态从第一次请求后就不再改变了），在数学上幂等性是指N次变换和一次变换相同。HTTP MethodHTTP提供了POST、GET、PUT、DELETE等操作类型对某个Web资源进行Create、Read、Update和Delete操作。一个HTTP请求除了利用URI标志目标资源之外，还需要通过HTTP Method指定针对该资源的操作类型，一些常见的HTTP方法及其在RESTful风格下的使用：

HTTP状态码HTTP状态码就是服务向用户返回的状态码和提示信息，客户端的每一次请求，服务都必须给出回应，回应包括HTTP状态码和数据两部分。HTTP定义了40个标准状态码，可用于传达客户端请求的结果。状态码分为以下5个类别：1xx：信息，通信传输协议级信息2xx：成功，表示客户端的请求已成功接受3xx：重定向，表示客户端必须执行一些其他操作才能完成其请求4xx：客户端错误，此类错误状态码指向客户端5xx：服务器错误，服务器负责这写错误状态码

RESTful API中使用HTTP状态码来表示请求执行结果的状态，适用于REST API设计的代码以及对应的HTTP方法。

构建RESTful应用接口Spring Boot实现RESTful APISpring Boot提供的spring-boot-starter-web组件完全支持开发RESTful API，提供了与REST操作方式（GET、POST、PUT、DELETE）对应的注解。@GetMapping：处理GET请求，获取资源。@PostMapping：处理POST请求，新增资源。@PutMapping：处理PUT请求，更新资源。@DeleteMapping：处理DELETE请求，删除资源。@PatchMapping：处理PATCH请求，用于部分更新资源。

在RESTful架构中，每个网址代表一种资源，所以URI中建议不要包含动词，只包含名词即可，而且所用的名词往往与数据库的表格名对应。 用户管理模块API示例：

package com.example.helloworld.controller;import com.example.helloworld.entity.User;import org.springframework.web.bind.annotation.*;@RestController public class UserController { @GetMapping("/user/{id}") public String getUserById(@PathVariable int id) { return "根据ID获取用户"; } @PostMapping("/user") public String save(User user) { return "添加用户"; } @PutMapping("/user") public String update(User user) { return "更新用户"; } @DeleteMapping("/user/{ud}") public String delete(@PathVariable int id){ return "根据ID删除用户"; } }使用Swagger生成Web API文档什么是SwaggerSwagger是一个规范和完整的框架，用于生成、描述、调用和可视化RESTful风格的Web服务，是非常流行的API表达工具。Swagger能够自动生成完善的RESTful API文档，，同时并根据后台代码的修改同步更新，同时提供完整的测试页面来调试API。

使用Swagger生成Web API文档

在Spring Boot项目中集成Swagger同样非常简单，只需在项目中引入springfox-swagger2和springfox-swagger-ui依赖即可。

配置Swagger

注意事项 Spring Boot 2.6.X后与Swagger有版本冲突问题，需要在application.properties中加入以下配置：

使用 Swagger2 进行接口测试

启动项目访问 http://127.0.0.1:8080/swagger-ui.html ，即可打开自动生成的可视化测试页面

Swagger常用注解

Swagger提供了一系列注解来描述接口信息，包括接口说明、请求方法、请求参数、返回信息等

MybatisPlus快速上手ORM介绍ORM（Object Relational Mapping，对象关系映射）是为了解决面向对象与关系数据库存在的互不匹配现象的一种技术。ORM通过使用描述对象和数据库之间映射的元数据将程序中的对象自动持久化到关系数据库中。ORM框架的本质是简化编程中操作数据库的编码。

MyBatis-Plus介绍MyBatis是一款优秀的数据持久层ORM框架，被广泛地应用于应用系统。MyBatis能够非常灵活地实现动态SQL，可以使用XML或注解来配置和映射原生信息，能够轻松地将Java的POJO（Plain Ordinary Java Object，普通的Java对象）与数据库中的表和字段进行映射关联。MyBatis-Plus是一个 MyBatis 的增强工具，在 MyBatis 的基础上做了增强，简化了开发。<!--Mybatis Plus 依赖--><dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.2</version></dependency><!--MySQL 驱动依赖--><dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.47</version></dependency><!--数据连接池druid--><dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.20</version></dependency>spring.datasource.type=com.alibaba.druid.pool.DruidDataSourcespring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.datasource.url=jdbc:mysql://127.0.0.1:3306/mydb?useSSL=falsespring.datasource.druid.username=rootspring.datasource.druid.password=rootmybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl@SpringBootApplication@MapperScan("com.demo.mapper")public class MybatisPlusDemo Application{ public static void main(String [] args){ SpringApplication.run(MybatisPlusApplication.class, args); }}MyBatis-Plus CRUD操作

//package com.example.demo.mapper;import com.example.demo.entity.User;import org.apache.ibatis.annotations.*;import java.util.List;@Mapper public interface UserMapper { @Select("select * from user") public List<User> findAll(); @Insert("insert into user values(#{id}, #{name}, #{age})") public int add(User user); @Update("update user set id=#{id}, name=#{name}, age=#{age}") public int update(User user); @Delete("delete from user where id=#{id}") public int delete(int id); @Select("select * from user where id=#{id}") public User findById(int id); }package com.example.demo.controller;import com.example.demo.entity.User;import com.example.demo.mapper.UserMapper;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestControllerpublic class UserController { @Autowired private UserMapper userMapper; @GetMapping("/user") public List<User> findAll() { return userMapper.findAll(); } @PostMapping("/saveUser") public String save(User user){ int flag = userMapper.add(user); if (flag > 0) return "插入成功"; else return "插入失败"; }}Spring的三种注入方式:

构造注入，getter和setter注入，自动注入

package com.example.demo.entity;public class User { private int id; private String name; private int age; public User(int id, String name, int age) { this.id = id; this.name = name; this.age = age; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } @Override public String toString() { return "User{" + "id=" + id + ", name='" + name + '\'' + ", age=" + age + '}'; }}

数据库字段和实体类字段映射规则

MybatisPlus注解@TableName，当表名与实体类名称不一致时，可以使用@TableName注解进行关联。@TableField，当表中字段名称与实体类属性不一致时，使用@TableField进行关联@TableId，用于标记表中的主键字段，MybatisPlus也提供了主键生成策略。

package com.example.demo.entity;import com.baomidou.mybatisplus.annotation.IdType;import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;@TableName("user")public class User { @TableId(type = IdType.AUTO) private int id; private String name; private int age; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } @Override public String toString() { return "User{" + "id=" + id + ", name='" + name + '\'' + ", age=" + age + '}'; }}多表查询及分页查询多表查询

实现复杂关系映射，可以使用@Results注解，@Result注解，@One注解，@Many注解组合完成复杂关系的配置。

分页查询

编写配置文件

package com.example.demo.config;import com.baomidou.mybatisplus.annotation.DbType;import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;@Configurationpublic class MyBatisPlusConfig { @Bean public MybatisPlusInterceptor paginationInterceptor(){ MybatisPlusInterceptor intercepter = new MybatisPlusInterceptor(); PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor(DbType.MYSQL); intercepter.addInnerInterceptor(paginationInnerInterceptor); return intercepter; }}

测试

package com.example.demo.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.baomidou.mybatisplus.core.metadata.IPage;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;import com.example.demo.entity.User;import com.example.demo.mapper.UserMapper;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;import java.util.List;@RestControllerpublic class UserController { @Resource private UserMapper userMapper; @GetMapping("/user") public List<User> findAll() { return userMapper.findAll(); } @PostMapping("/saveUser") public String save(User user) { int flag = userMapper.add(user); if (flag > 0) return "插入成功"; else return "插入失败"; } @GetMapping("/user-orders") public List<User> getUserAllOrders() { return userMapper.selectAllUserAndOrders(); } // 条件查询 @GetMapping("/user/find") public List<User> findByCond() { QueryWrapper<User> queryWrapper = new QueryWrapper<>(); queryWrapper.eq("name", "zhangsan"); return userMapper.selectList(queryWrapper); } // 分页查询 @GetMapping("/user/findByPage") public IPage findByPage() { // 设置起始值及每页条数 Page<User> page = new Page<>(0, 2); IPage ipage = userMapper.selectPage(page, null); return ipage; }}package com.example.demo.entity;import com.baomidou.mybatisplus.annotation.TableField;import com.baomidou.mybatisplus.annotation.TableName;import java.util.Date;@TableName("orders")public class Order { private int oid; private Date date; private int cid; @TableField(exist = false) private User user; public int getOid() { return oid; } public void setOid(int oid) { this.oid = oid; } public Date getDate() { return date; } public void setDate(Date date) { this.date = date; } public int getCid() { return cid; } public void setCid(int cid) { this.cid = cid; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } @Override public String toString() { return "Order{" + "oid=" + oid + ", date=" + date + ", cid=" + cid + '}'; }}package com.example.demo.entity;import com.baomidou.mybatisplus.annotation.IdType;import com.baomidou.mybatisplus.annotation.TableField;import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import java.util.List;@TableName("user")public class User { @TableId(type = IdType.AUTO) private int id; private String name; private int age; //告诉Mybatis不做映射 @TableField(exist = false) private List<Order> orders; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public List<Order> getOrders() { return orders; } public void setOrders(List<Order> orders) { this.orders = orders; } @Override public String toString() { return "User{" + "id=" + id + ", name='" + name + '\'' + ", age=" + age + '}'; }}package com.example.demo.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.demo.entity.Order;import com.example.demo.entity.User;import org.apache.ibatis.annotations.*;import java.util.List;@Mapperpublic interface OrderMapper extends BaseMapper<Order> { @Select("select * from orders where cid = #{cid}") public List<Order> selectByUid(int id); // 查询所有的订单，同时查询订单的用户 @Select("select * from order") @Results({ @Result(column = "oid", property = "oid"), @Result(column = "date", property = "date"), @Result(column = "uid", property = "user", javaType = User.class, one = @One(select = "com.example.demo.mapper.UserMapper.selectById")) }) public List<Order> selectAllOrdersAndUser();}package com.example.demo.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.demo.entity.User;import org.apache.ibatis.annotations.*;import java.util.List;@Mapperpublic interface UserMapper extends BaseMapper<User> { @Select("select * from user") public List<User> findAll(); @Insert("insert into user values(#{id}, #{name}, #{age})") public int add(User user); @Update("update user set id=#{id}, name=#{name}, age=#{age}") public int update(User user); @Delete("delete from user where id=#{id}") public int delete(int id); @Select("select * from user where id=#{id}") public User findById(int id); // 查询用户所有订单 @Select("select * from user") @Results( { @Result(column = "id", property = "id"), @Result(column = "name", property = "name"), @Result(column = "age", property = "age"), @Result(column = "id", property = "orders", javaType = List.class, many = @Many(select = "com.example.demo.mapper.OrderMapper.selectByUid")) } ) public List<User> selectAllUserAndOrders();}Vue快速上手前端环境准备编码工具：VSCode依赖管理：NPM项目构建：VueCliVue框架介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。MVVM模式MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定。Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，也就是ViewModel，ViewModel负责连接View和Model，保证视图和数据的一致性。

Vue快速入门<script src="https://unpkg.com/vue@next"></script><div id="app"> {{message}}</div>const Hello = { //指定数据源，即MVVM中的Model data: function(){ return { "message": "Hello Vue!" } }}const app = Vue.createApp(Hello)app.mount('#app') //指定当前Vue实例要控制页面的哪个区域<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 1. 导入 vue 的脚本文件 --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <!-- 2.