SpringBoot+Vue前后端分离

Demo效果

数据中有一段数据： 通过SpringBoot输出到页面中是这个样子： 而Vue界面现实的效果如图： 使用热部署，即在后端修改数据，不用重启应用端，便可在前端及时得到更新的数据

创建Vue 项目

在文件夹中新建一个空的目录，然后进入cmd界面。 输入以下命令：

npm init webpack 项目名字

然后是一些相关配置，勾选热部署和vue-router，并初始化，然后使用idea打开这个项目。 比较详细一点的Vue入门配置参考我的这篇文章： 创建一个Vue组件：Book.vue

data里面的数据为前端伪造的数据，目的是测试代码，测试效果如下：

前端代码编写代码暂时到这，接下来后端代码。

创建后端项目

首先创建一个Spring Boot项目，勾选模块如下： 然后编写业务代码，项目结构如下： application.yml配置文件：

spring:
  datasource:
    username: root
    url: jdbc:mysql://localhost:3306/mybatis01?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=Asia/Shanghai
    password: 0913
    driver-class-name: com.mysql.cj.jdbc.Driver
server:
  port: 8181
mybatis:
  mapper-locations: classpath:mapper/*.xml

BookController里的代码：

package com.lzx.controller;

import com.lzx.pojo.Book;
import com.lzx.server.BookServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @Author 小先生
 * @Date 2021年05月31日11:31
 */
@RestController
@RequestMapping("/book")
public class BookController {
          
   
    @Autowired
    BookServiceImpl bookService;

    @GetMapping("/findAll")
    public List<Book> findAll(){
          
   
        return bookService.findAll();
    }
}

启动Spring Boot项目，在搜索栏输入localhost:8181/book/findAll,页面即返回数据库的信息

前后端互相关联

跨域设置

此时前端项目和后端项目都已经启动成功，但是互不影响，没有关联。且两个项目端口号不一致，因此前提还需要跨域。跨域设置前后都可以设置，这里在后端进行设置。 再次编写后端代码，编写CrossConfig：

package com.lzx.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @Author 小先生
 * @Date 2021年05月31日11:59
 * 跨域
 */
@Configuration
public class CrosConfig implements WebMvcConfigurer {
          
   
    @Override
    public void addCorsMappings(CorsRegistry registry) {
          
   
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","HEAD","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

修改前端 首先引入axios，输入命令行：

npm install axios --save -dev

然后在main.js中添加：

import axios from “axios”; Vue.prototype.axios = axios;

再修改Book.vue组件：

这时候前端和后端项目就此关联起来了