前后端分离开发Springboot+VUE学习笔记

vue的配置与安装：参考文档

目录

前后端分离

前后端分离就是将一个应用的前端和后端代码分开写，为何如此？

如果不使用前后端分离，会有什么问题？

传统Java Web开发过程中，前端使用JSP开发，流程为

前端工程师写HTML页面→后端工程师在此基础上加上JSP语法，完成整个JSP

这种开发方式效率极低（前后端沟通困难）

由此引入前后端分离开发方式

前端只需要独立编写客户端代码完成页面，后端也只需要独立编写服务端代码提供数据接口即可。

前端通过Ajax请求来访问后端的数据接口，将Model展示到View中即可。

前后端开发者只需要提前约定好接口文档（URL、参数、数据类型……）然后分别独立开发即可。前端可以用假数据测试，不完全依赖于后端；后端通过Postman等接口调试工具测试即可，真正实现前后端解耦合，极大提升开发效率。

完整程序：前端应用+后端应用

前端应用：负责数据展示和用户交互

后端应用：负责提供数据处理接口

前端HTML→Ajax→RESTful后端数据接口

前后端将一个单体应用拆分成两个独立的应用，前端应用和后端应用都是以JSON格式进行交互。

实现技术

Spring Boot + Vue

使用 SpringBoot 进行后端应用开发，使用Vue进行前端应用开发

创建vue项目

在vue cli 3.0以上版本可以通过可视化界面进行创建配置链接

命令行输入（注意要以管理员身份打开命令提示符CMD，进入待创建目录）

vue ui

即可自动打开可视化页面

会自动弹出页面，选择自己想要的文件路径就创建项目吧

代码校验可以去除

打开历史记录

无需保存模板

创建好后启动运行项目

点击输出即可在命令行查看地址

单击进入页面，这就代表创建成功

在idea中打开

在命令行中CTRL+C断开链接

在idea中导入项目并且记得安装插件

在terminal用命令行启动项目

同样是CTRL+C退出/终止项目

vue是单页面应用，其主页面就是app.vue的内容

单击不同链接只是替换页面内容

目录结构详解传送门

新建页面

编写页面内容

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>书名</td>
                <td>作者</td>
            </tr>
        </table>
        {{msg}}
    </div>
</template>
<script>
    export default {
        name: "Book",
        data(){
            return{
                msg:'Hello vue'
            }
        }
    }
</script>
<style scoped>
</style>

配置路由

浏览器输入网址进行跳转

页面填充一些数据（手动写的假数据）

<template>
    <div>
        <table>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>作者</th>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>
        {{msg}}
    </div>
</template>
<script>
    export default {
        name: "Book",
        data(){
            return{
                msg:'Hello vue',
                books:[
                    {
                        id:1,
                        name:'水浒传',
                        author:'施耐庵'
                    },{
                        id:2,
                        name:'红楼梦',
                        author:'曹雪芹'
                    },{
                        id:1,
                        name:'三国演义',
                        author:'罗贯中'
                    },{
                        id:1,
                        name:'西游记',
                        author:'吴承恩'
                    }
                ]
            }
        }
    }
</script>
<style scoped>
</style>

页面即可动态更新内容

创建SpringBoot应用

idea中新建工程项目

勾选一些依赖

创建好后自动下载依赖，并且替换application.propertity为application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/library?serverTimezone=UTC&useLegacyDatetimeCode=false&useUnicode=true&characterEncoding=UTF-8
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

连接这个数据库

创建实体对象与数据库表元素绑定

加@Entity表明此对象与元素绑定，@Data自动配置get set方法（idea需要安装lombok插件）

创建实体类接口

继承JpaRepository接口，第一个泛型为实体类的类型（此处即Book）第二个为主键的类型，其定义好了一套操作，无需我们手动写

在类名处右击→Go To可自动创建测试类

再注入对象，测试调用

注意是api .Test

pom.xml需要做一定改动（我改了半天）才能正常运行。否则一直是空指针异常

具体如下，复用的话对java版本和包路径进行更改

<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.1.18.RELEASE</version>
        <relativePath/> 
    </parent>
    <groupId>com.makerjack</groupId>
    <artifactId>springboottest</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboottest</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <version>8.0.32</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <version>2.1.18.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter</artifactId>
            <version>RELEASE</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>

运行findAll测试即可出现以下结果

测试成功后，创建controller层，并且实现操作

然后在主程序入口xxxApplication中启动整个springboot项目，在浏览器中访问localhost:8181/book/findAll

即可出现刚才测试出的数据

此时后端就可以提供真实数据，前端调用这个数据接口呈现即可

前端调用数据

在前端项目中，控制台键入

vue add axios

目录中也会出现对应内容

重启vue项目后，页面可能会一片空白

解决方案

最终main.js如下

注意波浪线处的axios需要自己写明，不然会报未定义错误

在之前写过的页面Book.vue下加入初始化函数created()进行调用

测试成功，确实有弹窗

那么只需要在created()中调用后端提供的数据接口即可

首先测试一下能否成功调用数据

在create中加入

axios.get('http://localhost:8181/book/findAll').then(function (resp) {
        console.log(resp)
})

控制台中会发现

这就是跨域传输遇到的问题

跨域传输在springboot中解决

在后端项目文件下建立Config类

内容如下

package com.makerjack.springboottest.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 crossConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

重启项目，就能在前端请求到相应的数据

成功请求到，则只需将页面中的data内容替换即可

将create()函数改为

created() {
    const _this = this
    axios.get('http://localhost:8181/book/findAll').then(function (resp) {
        _this.books = resp.data
    })
}//初始化调用

注：此处get中不能直接使用this，直接this是指的回调函数中的this，而非我们想要的this，故用_this来指代

保存后页面刷新效果如下

总结

至此，一个简单的前后端分离项目就算完成了，大概步骤就是

搭建前端项目，使用假数据测试能否正确显示搭建后端项目，取用数据库数据，并且提供访问接口，注意跨域传输的配置问题前后端对接，使其真正成为一个项目