目录
一、Vue项目的搭建
（1）基于vite创建vue项目
（2）引入elementplus
（3）启动后端服务，并测试
二、SpringBoot项目的搭建
（1）通过idea创建SpringBoot项目
（2）pom中需要的依赖
（3）application.yml配置文件的编写
（4）编写mapper文件
（5）编写控制器
（6）因出现跨域请求，故进行配置请求编写
一、Vue项目的搭建
（1）基于vite创建vue项目
npm create vue@latest（2）引入elementplus
这里我是按需引入的，具体的步骤官网上有介绍
（3）启动后端服务，并测试
启动后端服务，在前端通过axios与后端进行交互，查看测试结果
<script setup> import axios from 'axios' import { onMounted,ref } from 'vue';const dataList=ref([]) onMounted(()=>{axios.get('http://localhost:8080/users/findAll').then(function (response) {console.log(response);dataList.value=response.data}).catch(function (error) {console.log(error);});}) console.log('list')console.log(dataList.value) </script>
二、SpringBoot项目的搭建
（1）通过idea创建SpringBoot项目
具体的创建步骤我就不说了，大致说一下项目的大致架构
（2）pom中需要的依赖
<dependencies><!-- spring web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MyBatisPlus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.0</version></dependency><!-- mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!-- lombok --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><!-- spring test --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies>（3）application.yml配置文件的编写
spring:datasource:url: jdbc:mysql://localhost:3306/sql_test?serverTimezone=UTCusername: 数据库账户名password: 数据库密码driver-class-name: com.mysql.cj.jdbc.Drivermybatis-plus:
#mybatis-plus的映射位置mapper-locations: com/gq/mybatis/mapper/*Mapper.xml
#实体类的位置type-aliases-package: com.gq.mybatis.pojoserver:port: 8080（4）编写mapper文件
UserMapper接口
public interface UsersMapper extends BaseMapper<users> {List<users> findAll();
}
UserMapper映射文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.gq.mybatis.mapper.UsersMapper"><select id="findAll" resultType="com.gq.mybatis.pojo.users">select * from users</select>
</mapper>（5）编写控制器
@RestController
@RequestMapping("/users")
public class UsersController {@Autowiredprivate UsersMapper usersMapper;//查找所有@GetMapping("/findAll")public List<users> findAll(){return usersMapper.findAll();}
}
（6）因出现跨域请求，故进行配置请求编写
package com.gq.mybatis.configure;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CORSConfig implements WebMvcConfigurer {public void addCorsMappings(CorsRegistry registry) {// 设置允许跨域的路径registry.addMapping("/**")// 设置允许跨域请求的域名.allowedOriginPatterns("*")// 是否允许cookie.allowCredentials(true)// 设置允许的请求方式.allowedMethods("GET", "POST", "DELETE", "PUT")// 设置允许的header属性.allowedHeaders("*")// 跨域允许时间.maxAge(3600);}
}大致步骤就是如此，大家可以自己测试一下，我测试通过，没问题。
