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=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);
    }
}
 

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