目录
一、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 init 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=UTC
username: 数据库账户名
password: 数据库密码
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis-plus:
#mybatis-plus的映射位置
mapper-locations: com/gq/mybatis/mapper/*Mapper.xml
#实体类的位置
type-aliases-package: com.gq.mybatis.pojo
server:
port: 8080（4）编写mapper文件
UserMapper接口
public interface UsersMapper extends BaseMapper<users> {
List<users> findAll();
}
UserMapper映射文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//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 {
@Autowired
private 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);
}
}
大致步骤就是如此，大家可以自己测试一下，我测试通过，没问题。
