使用Springboot+Vue完成一个前后端完全分离的案例（已解决跨域问题）

前后端分离显示用户数据

1、后端代码

①实体

package com.xiaozhuang.domain;

import lombok.Data;

@Data
public class User {
    private Long id;
    private String name;
}

②数据访问层

package com.xiaozhuang.dao;

import com.xiaozhuang.domain.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface UserDao {
    @Select("select * from user")
    List<User> findAllUser();
}

③service层

package com.xiaozhuang.service;

import com.xiaozhuang.domain.User;

import java.util.List;

public interface UserService {
    List<User> findAllUser();
}

package com.xiaozhuang.service.impl;

import com.xiaozhuang.dao.UserDao;
import com.xiaozhuang.domain.User;
import com.xiaozhuang.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;
    @Override
    public List<User> findAllUser() {
        return userDao.findAllUser();
    }
}

④控制层

package com.xiaozhuang.controller;

import com.xiaozhuang.domain.User;
import com.xiaozhuang.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
//@CrossOrigin(origins = "*")
public class UserController {
    @Autowired
    private UserService userService;

    /* @GetMapping("/{id}")
     public String getById(@PathVariable Integer id) {
         System.out.println("id ==> " + id);
         return "hello,spring boot!";
     }*/
    @GetMapping("/user")
    @ResponseBody
    public List<User> findAllUser() {
        return userService.findAllUser();
    }

}

⑤跨越问题解决

package com.xiaozhuang.config;

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 {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送 Cookie
                .allowedOriginPatterns("*") // 支持域
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

2、配置类

application.yaml文件

server:
  port: 8089
spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/xiaozhuang?serverTimezone=UTC
    username: root
    password: 123

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.10</version>

    </parent>
    <groupId>com.xiaozhuang</groupId>
    <artifactId>springboot_01</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.16</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>2.3.1</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

3、前端代码

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <button type="button" @click="showUser">展示用户信息</button>
    <p>
      {{this.$data}}
    </p>

  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {
        userinfo:{
          data:{
            id:null,
            name:null
          }
      }
    }
  },

  methods: {
    showUser: function () {
      this.axios.get('http://localhost:8089/user').then(response => {
        this.userinfo = response.data
      }).catch(function (error) {
        alert(error)
      })
    }
  },

  components: {

  }
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4、项目结构

5、数据库表结构