新手指引：前后端分离的springboot + mysql + vue实战案例
案例说明：
使用springboot + mysql + vue实现前后端分离的用户查询功能。
1、mysql：创建test数据库 -> 创建user数据表 -> 创建模拟数据；
2、springboot: 配置mysql -> 使用mybatis操作mysql数据库 -> 接口开发；
3、vue：使用axios访问接口 -> user数据展示 ；
1、mysql数据库
1.1、安装mysql数据库
官网下载地址：
https://dev.mysql.com/downloads/mysql/
注意事项：记录好mysql的账号、密码
启动mysql服务，确保服务已正常启动。
1.2、安装Navicat Premium可视化UI工具
官网下载地址：
https://www.navicat.com/en/products
注意事项：网上有破解方案
1.3、创建数据库 test
打开navicat，创建mysql连接：
输入连接名称、账号（默认root）、密码：
打开连接（双击，颜色由灰色变绿色），右键选择新建数据库：
输入数据库名称 test , 并选择编码格式utf-8（也可按需选择其他格式）：
1.4、创建数据表 user
双击test数据库，右键Tables，新建数据表：
定义字段：
control + s 保存数据表，弹框重输入数据表名称：user
1.5、创建数据
新建查询，通过sql语句插入两条模拟数据
INSERT INTO user(name, phone) VALUES('小明','13112345678');
INSERT INTO user(name, phone) VALUES('小鸿','13233335555');
选择执行，sql语句执行成功：
查询下数据表，数据已加入数据表中：
2、springboot
2.1、安装idea
官网下载地址：
https://www.jetbrains.com/idea/download/?section=windows
注意事项：网上有破解方案
2.2、新建springboot项目
输入项目信息，注意：我本地安装的java版本是8，所以需要选择对应的java版本：
选择springboot版本，并添加依赖：
Lombok 是一个 Java 库，它通过注解来简化 Java 代码的编写。使用 Lombok 可以避免一些重复的、样板式的代码，从而提高代码的可读性和可维护性。Lombok 提供了多种注解，包括 @Getter、@Setter、@Data、@Builder 等，这些注解可以自动生成 getter、setter、toString、equals、hashCode 等方法，从而减少代码量。
Spring Web 是 Spring Framework 的一个模块，它提供了用于开发 Web 应用程序的核心功能和 API。Spring Web 包括多个子模块，包括 Spring MVC、Spring WebFlux、Spring Web Services 等。
MySQL Driver是一个用于Java编程语言的JDBC（Java Database Connectivity）驱动程序，用于连接和与MySQL数据库进行交互。它提供了一组API，使Java应用程序能够通过标准的JDBC接口与MySQL数据库进行通信。
2.3、新增mybatis依赖
pom.xml新增mybatis依赖：
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
2.4、工程配置：mysql、端口
注意：数据库名称、账号、密码，需要换成自己的：
#mysql数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=Ieaa123~!
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#端口配置
server.port=8081
2.5、新建实体类User
注意：类名位置添加lombok的Data注解，使用@Data注解可以自动生成Java类的getter、setter、toString、equals和hashCode等方法，从而使Java类更简洁、易读和易于维护
package com.qxc.server_demo;
import lombok.Data;
@Data
public class User {
private Long id;
private String name;
private String phone;
}
2.6、新建UserMapper，操作数据库
package com.qxc.server_demo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface UserMapper {
@Select("SELECT * FROM user")
List<User> getAllUser();
@Insert("INSERT INTO user(name, phone) VALUES(#{name}, #{phone})")
void insertUser(User user);
}
2.7 编写UserController，封装对外接口
package com.qxc.server_demo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserMapper userMapper;
@GetMapping("/getAll")
public List<User> getAllUser() {
return userMapper.getAllUser();
}
@PostMapping("/add")
public void insertUser(@RequestBody User user) {
userMapper.insertUser(user);
}
}
运行工程
接口测试
使用浏览器输入接口地址，结果展示正确，如图所示：
3、VUE对接后端接口
3.1、安装VUE
Vue.js是一款流行的JavaScript框架，用于构建用户界面。下面是Vue.js的安装流程：
1、安装Node.js
Vue.js是基于Node.js构建的，因此需要先安装Node.js。可以从Node.js官网下载安装程序，安装完成后，可以在命令行中输入node -v命令，查看Node.js的版本信息，以确保安装成功。
2、安装Vue CLI
Vue CLI是Vue.js的官方脚手架工具，可以帮助我们快速创建Vue.js项目。可以使用npm（Node.js的包管理工具）全局安装Vue CLI，命令如下：
npm install -g @vue/cli
安装完成后，可以在命令行中输入vue --version命令，查看Vue CLI的版本信息，以确保安装成功。
3、安装Vue UI
可以使用npm全局安装Vue UI，命令如下：
npm install -g @vue/cli-service-global
安装完成后，可以在命令行中输入vue ui命令，启动Vue UI界面。如果一切正常，会在浏览器中打开Vue UI的界面。
3.2、idea安装vue插件
idea不仅可以开发后端程序，还可编写前端vue的程序，需要单独安装下vue的插件即可：
3.3、vue ui创建工程
工程创建成功，安装axios依赖：
使用idea打开新建的工程，并执行npm run serve 命令，运行demo:
demo工程运行成功：
3.4、封装axios
在main.js同级目录，新建axios.js，增加以下代码：
// axios.js
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8081'
axios.defaults.headers.common.Authorization = 'qxc'
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config
}, error => {
// 处理请求错误
return Promise.reject(error)
})
axios.interceptors.response.use(response => {
// 对响应数据做些什么
return response
}, error => {
// 处理响应错误
return Promise.reject(error)
})
export default axios
3.5main.js 全局引入 axios.js
全局引入后，所有的组件均可直接使用axios
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from './axios'
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(store).use(router).mount('#app')
3.6、编写接口对接代码
直接修改vue-demo工程的HelloWorld.vue组件代码：
<template>
<div class="hello">
{{ msg }}
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }} -- {{ user.phone }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
users: []
}
},
mounted () {
this.$axios.get('/user/getAll')
.then(response => {
this.users = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
3.7运行vue项目，测试接口
运行vue，ui并未展示接口数据，f12调试此页面，发现接口异常了：
此问题是跨域问题：
这个错误是由于浏览器的同源策略所引起的。同源策略是一种安全机制，它要求浏览器只能向与当前页面具有相同协议、域名和端口号的服务器发送请求。
3.8解决跨域问题
回到后端server工程，配置跨域支持：
新建config/CorsConfig.java类，用于配置跨域信息：
package com.qxc.server_demo.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("/**")
.allowedOrigins("http://localhost:8080")
.allowedMethods("GET", "POST")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}
3.9 重启服务器程序，重新测试
重启服务端程序后，刷新vue的页面，数据展示正确了：
