前后端分离开发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.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.1.18.RELEASEversion>
        <relativePath/> 
    parent>
    <groupId>com.makerjackgroupId>
    <artifactId>springboottestartifactId>
    <version>0.0.1-SNAPSHOTversion>
    <name>springboottestname>
    <description>Demo project for Spring Bootdescription>
    <properties>
        <java.version>1.8java.version>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-data-jpaartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>

        <dependency>
            <groupId>com.mysqlgroupId>
            <artifactId>mysql-connector-jartifactId>
            <version>8.0.32version>
            <scope>runtimescope>
        dependency>
        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-maven-pluginartifactId>
            <version>2.1.18.RELEASEversion>
        dependency>
        <dependency>
            <groupId>org.junit.jupitergroupId>
            <artifactId>junit-jupiterartifactId>
            <version>RELEASEversion>
            <scope>testscope>
        dependency>
    dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombokgroupId>
                            <artifactId>lombokartifactId>
                        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来指代

保存后页面刷新效果如下

总结

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

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

下一篇文章：使用Element-UI展示数据