SpringBoot+Vue实现前后端分离基本的环境搭建

目录

一、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);}
}

大致步骤就是如此，大家可以自己测试一下，我测试通过，没问题。