SpringBoot+Vue-admin-template实现增删改查
前⾔
本⽂的案例是基于Vue-admin-template项⽬改造的简化版Vue后台管理模板案例
主要是想帮助那些和我⼀样从后端⼊门并且想要快速上⼿Vue后台管理系统的开发
本⽂在SpringBoot、Element UI、Vue框架之上实现的⼩案例，并⾮从零开始
各位如果遇到难题，可以向百度和⾕歌虚⼼求教，我也是⼀路折腾过来才写下此⽂
技术栈
1. SpringBoot
2.3
2. Vue-admin-template4.3
3. axios
4. mysql
5.7
5. mybatis
案例演⽰
案例实践
1.下载项⽬，按照操作把项⽬跑起来
# 去github克隆项⽬(我的版本是4.0版本vue-admin-template)
git clone github/PanJiaChen/vue-admin-template
# 进⼊⽬录
cd vue-admin-template
# 安装依赖(前提需要⾃⾏安装配置好node.js)
npm install --registry=registry.
# 运⾏
npm run dev
2.在侧边栏新增导航路由页⾯
1. 新建⽂件。在src/views/ 新建⼀个⽂件夹 student，在此⽬录下新建⽂件 index.vue
2. 添加路由。打开 src/router/index.js，此⽂件为该项⽬的后台路由配置⽂件。在constantRoutes这个数组中，添加路由的格式如下：
{
path: '/student', // 页⾯访问的url⼀级路径
component: Layout,// 这是全局统⼀的⼀个布局⽂件，暂时不需要修改
children: [
{
path: 'index',// 页⾯访问的url⼆级路径
name: 'Student',
component: () => import('@/views/student/index'), // 导⼊刚才新建vue⽂件的路径
meta: { title: '学⽣', icon: 'form' } // title 是侧边栏的名字，icon是图标
}
]
},
这⼀步我们完成路由配置，之后框架会⾃动地根据路由配置⽂件，⽣成边侧导航条⽬，剩下的⼯作就是写好那个index.vue组件的内容，这⾥包含两部分内容：简单编写组件和发送⽹络请求
3.简单编写组件，后⾯再美化组件
编程就是由简单慢慢到复杂，我们先在页⾯上完成⼀个简单的页⾯，只制作页⾯上输出123的页⾯组件
<template>
<!-- div是作为根元素，必须要有这个元素 -->
<div>
123
</div>
</template>
<script>
export default {
data() {
return {
// 这⾥定义数据格式
}
mounted() {
// 这⾥是vue钩⼦函数，不理解的话就是js的⼊⼝
},
methods: {
// 这是定义⽅法的区域
}
}
</script>
<style scoped>
// 这是写CSS内容的区域
</style>
如果上述步骤都没错的话，你可以得到下⾯的页⾯效果
4.⽹络请求基础配置
4.1 跨域访问资源
本⽂中开发的页⾯是运⾏部署在前端服务器上，端⼝是localhost:9528，后台的数据是在后端服务器上，端⼝是localhost:8080, 两者之间端⼝不⼀致，需要跨域名访问资源，⽤到的是代理模式，这⾥就涉及到跨域访问资源和同源策略这两个概念，本⽂不做深⼊讲解，暂且只需要知道
在项⽬上线后，对于CORS跨域资源访问的问题，可以⽤类似的⽅案（Nginx反向代理）在前端解决。
4.2 代理模式
⽣活中的代理模式例⼦：⼩明要买⼀台⾼性能的华硕电脑，去街上的实体店看到只有样板的华硕电脑，于是付钱给经销商，经销商拿着钱去华硕⼚家拿到⾼性能的华硕电脑，然后回到实体店把电脑交付给⼩明，同时还赚取了中间差价，这就是⼀个典型的代理模式案例
4.3 开发中的代理模式
vue-admin-template是基于vue-cli开发出来的，部署在前端的服务器，
1. 浏览器访问这些页⾯组件就相当于⼩明看到华硕电脑样板，
2. 前端服务器代理转发请求到后端服务器相当于经销商把钱付给⼚家，
3. 后端服务器返回数据给前端服务器前端服务器，服务器再返回数据给浏览器
就相当于⼚家交付电脑给经销商，经销商拿到后再交付电脑给⼩明
登录接⼝的实现我在上⼀篇⽂章中已经很详细地讲解过，所以这篇⽂章中不会有过多的关于登录接⼝的实现的细节
只是在上篇的基础上进⾏对接⼝代理进⾏的改动，不懂的可以先去看看
配置代理
因为存在跨域资源请求的问题，前后端交互的⽹络请求在底层由node.js代理，有兴趣的可以看下
打开根⽬录下的fig.js⽂件，在devServer中添加proxy区域的代码
devServer: {
port: port,
open: false,
overlay: {
warnings: false,
errors: true
},
// 代理所有以‘/admin’开头的⽹络请求
proxy: {
'/admin': {
target: `localhost:8080/`, //后台服务地址（Springboot内置tomcat默认的地址）
changeOrigin: true,
pathRewrite: {
// 路径重写，可以理解为路径重新赋值
// '^/admin': '/'
// pathRewrite: {'^/admin': '/'} 重写之后url为 localhost:8080/xxxx
// pathRewrite: {'^/admin': '/admin'}
// 重写之后url为localhost:8080/admin/xxxx
}
}
}
配置地址
⽣产环境与开发环境通常有不同的服务地址。编辑 .env.development 以及 .env.production 这两个⽂件，修改其中的 VUE_APP_BASE_API 配置项即可
本⽂只涉及开发，就以开发环境为例：
VUE_APP_BASE_API = '/admin'
配置
打开src/utils/request.js，它封装了⼀个axios请求对象，它就是jquery中的ajax那样理解着⽤，应该很快就能上⼿，在这个项⽬的数据交互的请求都是基于axios来处理的。
我们可以在发送请求之前规定⼀些后端数据返回的格式，⽅便我们⾃⼰调试和定位⽹络请求是否正确响应和输出。⽐如根据服务端的状态码判断请求是否正常，若不正常给出相应的提⽰。
sponse.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
// 个性化定制响应的状态码不为20000，它会认为这是⼀个错误的响应
if (de !== 20000) { // 这⾥可以根据业务修改为de !== 200 我演⽰就懒得改
Message({
message: ssage || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// 50008: ⾮法的token 50012: 其他客户端登录了; 50014: Token 过期了;
if (de === 50008 || de === 50012 || de === 50014) {
// to re-login
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
// 重新设置token
store.dispatch('user/resetToken').then(() => {
})
})
}
// 返回⼀个Promise对象，ES6中的⽅便处理异步请求的对象，可以查阅MDN⽂档理解
ject(new ssage || 'Error'))
} else {
return res
}
},
)
配置全局请求
在src/main.js加⼊下⾯的代码配置，这样我们就可以在组件的脚本使⽤全局发起请求
Vue.prototype.http = request
1.全局发起请求
this.http({
// 此处写不同业务对应的url，框架会⾃动与baseURL拼接
url: "getInfo?id=6",
data: {},
method: "GET"
}).then(
res => {
// 请求成功后的处理
console.log("res :", res);
},
err => {
// 请求失败后的处理
console.log("err :", err);
}
);
2.单⼀封装好请求
按照⽐较好的前端开发模式，应该是把⽹络请求统⼀抽离到单⼀⽂件，然后在每个具体的页⾯进⾏对服务端数据的处理。 ⽐如下⾯的这种形式，⾸先创建⽂件src/api/student.js ，把在student 组件中需要⽤到的⽹络请求都写⼊此⽂件。
3.登录接⼝的实现适配
在src\api\user.js 中修改了login 的接⼝代码
4.前后登录接⼝数据流细节对⽐
新的登录接⼝
上篇⽂章旧的登录接⼝前端做了⼩改动和SpringBoot 中的LoginController
做了⼩改动
5.后端SpringBoot 搭建接⼝返回数据
5.l 引⼊依赖
5.2 SpringBoot 配置数据库和端⼝
5.3 实体类
// src/api/student.js
import request from '@/utils/request'
export function getStudentList(params) {
return request({
url: 'getTableData',
method: 'get',
params
})
}
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
<!--web 开发依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mybatis 依赖-->
<dependency>
<groupId&batis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<!--mysql 依赖-->
<dependency>
<groupId>mysql</groupId>前端页面模板
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--lombok 依赖-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
spring:
datasource:
url: jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
driver-class-name: sql.cj.jdbc.Driver
username: root
password: root
server:
port: 8080 // 端⼝号
servlet:
context-path: /admin // 项⽬根路径
@Data//使⽤这个注解就默认帮我们⽣成getter 和setter 以及toString 等
@NoArgsConstructor //lombok⽣成⽆参数构造函数
public class Student {
private Integer id;
private String name;
private Integer age;
private String className;
private String gender;
private String marjor;
private String department;
}
5.4 mapper接⼝
@Mapper
public interface StudentMapper {
@Select("select * from student where id=#{id}")
Student findStudentById(Integer id);
@Insert("insert into student(name,age)values(#{name},#{age})")
void insertStudent(Student student);
@Update("update student set name=#{name} where id=#{id}")
void updateStudent(Student student);
@Delete("delete from student where id=#{id}")
void deleteStudentById(Integer id);
@Select("select * from student")
List<Student> findAll();
}
5.5 controller类
这⾥省略了dao层和service层，主要是写demo贪⽅便，实际开发中还是要遵循3层结构开发
@RestController
public class StudentController {
@Autowired
private StudentMapper studentMapper;
@CrossOrigin // 跨域访问
@GetMapping(value = "/getTableData")
public Map finAllStudent(){
List<Student> studentList = studentMapper.findAll();
HashMap<String, Object> responseData = new HashMap<>();
responseData.put("code",20000);
responseData.put("data",studentList);
return responseData;
}
}
6.使⽤Element UI美化组件
现在我们可以在student.vue中⽤Element UI所提供的组件来美化我们student页⾯组件
1. Table组件写⼀个表格数据展⽰区域，
2. ⽤Element UI的栅格布局和Form组件在表格上⽅编写⼀个搜索区域，⽤来做⽇常的增删改查功能
3. ⽤Element UI的 Pagination 组件在表格上⽅编写⼀个搜索区域，⽤来做⽇常的增删改查功能
进⼊Element UI ,,，组件的说明⽂档，复制粘贴对应的代码。
vue-admin-template对于Element UI已经进⾏了全局引⼊，所以这些组件拿来即⽤。
这⾥暂且以获取后端的返回的数据作为案例，只要能写通这个区域，其他的基本上能⼀通百通，也就⾃然会增删改<template>
<!-- 数据表格区域 -->
<div class="data-content">
<el-table
:data="tableData"
border
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。