前后端分离
前后端分离就是将一个应用的前端和后端代码分开写，为何如此？
如果不使用前后端分离，会有什么问题？
传统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版本和包路径进行更改
<?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.1.18.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</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来指代
保存后页面刷新效果如下
总结
至此，一个简单的前后端分离项目就算完成了，大概步骤就是
- 搭建前端项目，使用假数据测试能否正确显示
- 搭建后端项目，取用数据库数据，并且提供访问接口，注意跨域传输的配置问题
- 前后端对接，使其真正成为一个项目
下一篇文章：使用Element-UI展示数据
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
