系列文章:
SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计
SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接
SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接
SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现
SpringBoot + Vue前后端分离项目实战 || 五:用户管理功能后续
前端实现
之前自定义的user.vue
页面为空白,现来实现其功能
先去element
官网浏览需要的组件
官网链接: https://element.eleme.cn/2.13/#/zh-CN/component/dialog
版本:2.13.2
需要用到的组件:
- 卡片
- 表格
- 分页——完整功能
- 输入框
- 按钮
- 打开表单的对话框
编写user.vue(整个user.vue
代码已经放在文章最后)
整体的页面分为3个部分,搜索——显示——分页插件
第一部分——搜索框
前端组件代码如下:
红色:绑定数据
黄色:绑定函数
白色:element自带的icon图标
第二部分——data表格
第三部分——分页插件
- 红色:更改插件的显示页数会再次查询数据库显示数据
- 橙色:分页插件的一些变量
至此,三个部分的前端介绍完毕
写上前端的钩子函数(页面加载自动取查询数据库然后显示)
配置后端接口
在src\api
新建一个userManage.js
写上代码
import request from '@/utils/request'
export default{
getUserList(searchModel){
return request({
url:'/user/list',
method:'get',
params:{
pageNo: searchModel.pageNo,
pageSize: searchModel.pageSize,
username: searchModel.username,
phone: searchModel.phone,
}
});
},
}
然后去user.vue
注册该文件
import userApi from '@/api/userManage'
后端编写代码
在UserController
里面写对接前端的代码
@GetMapping("/list")
public Result<Map<String,Object>> getUserList(@RequestParam(value = "username",required = false) String username,
@RequestParam(value = "phone",required = false) String phone,
@RequestParam(value = "pageNo") Long pageNo,
@RequestParam(value = "pageSize") Long pageSize
){
LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
wrapper.eq(StringUtils.hasLength(username),User::getUsername,username);
wrapper.eq(StringUtils.hasLength(phone),User::getPhone,phone);
Page<User> page = new Page<>(pageNo, pageSize);
userService.page(page,wrapper);
Map<String,Object> data = new HashMap<>();
data.put("total",page.getTotal());
data.put("rows",page.getRecords());
return Result.success(data);
}
注意下图中红色部分与前端的userManage.js
中红色部分需保持一致
此处后端返回的数据名也需和前端保持一致
借助postman验证
此处返回一个json对象,里面有code
、message
、data
字段,而且data
中有total
、rows
字段
前端user.vue
中代码 this.total = response.data.total;
就是获取该data
中的total
数据
新增Mybatis-Plus
的分页配置代码:在config\
下新增MpConfig
文件
package com.ums.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class MpConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
user.vue
<template>
<div>
<el-card id="search">
<el-row>
<el-col :span="20">
<el-input v-model="searchModel.username" placeholder="用户名" clearable></el-input>
<el-input v-model="searchModel.phone" placeholder="电话" clearable></el-input>
<el-button @click="getUserList" type="primary" round icon="el-icon-search">查询</el-button>
</el-col>
<el-col :span="4" align="right">
<el-button @click="openEditUI" type="primary" icon="el-icon-plus" circle></el-button>
</el-col>
</el-row>
</el-card>
<el-card>
<el-table :data="userList" stripe style="width: 100%">
<el-table-column label="#" width="80">
<template slot-scope="scope">
{{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
</template>
</el-table-column>
<el-table-column prop="id" label="用户ID" width="180">
</el-table-column>
<el-table-column prop="username" label="用户名" width="180">
</el-table-column>
<el-table-column prop="phone" label="电话" width="180">
</el-table-column>
<el-table-column prop="email" label="电子邮件">
</el-table-column>
<el-table-column label="操作" width="180">
</el-table-column>
</el-table>
</el-card>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchModel.pageNo"
:page-sizes="[5, 10, 20, 30, 40]"
:page-size="searchModel.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
<el-form :model="userForm">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="userForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="登录密码" :label-width="formLabelWidth">
<el-input type="password" v-model="userForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="联系电话" :label-width="formLabelWidth">
<el-input v-model="userForm.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="用户状态" :label-width="formLabelWidth">
<el-switch v-model="userForm.status"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="电子邮件" :label-width="formLabelWidth">
<el-input v-model="userForm.email" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import userApi from '@/api/userManage'
export default {
data () {
return {
formLabelWidth: '130px',
userForm: {},
dialogFormVisible: false,
title: "",
total: 0,
searchModel: {
pageNo: 1,
pageSize: 5
},
userList: [],
}
},
methods: {
clearForm(){
this.userForm={}
},
openEditUI(){
this.title = '新增用户';
this.dialogFormVisible = true;
},
handleSizeChange(pageSize){
this.searchModel.pageSize = pageSize;
this.getUserList();
},
handleCurrentChange(pageNo){
this.searchModel.pageNo = pageNo;
this.getUserList();
},
getUserList(){
userApi.getUserList(this.searchModel).then(response=>{
this.userList = response.data.rows;
this.total = response.data.total;
});
}
},
created(){
this.getUserList();
},
}
</script>
<style>
#search .el-input {
width: 200px;
margin-right: 10px;
}
.el-dialog .el-input{
width: 85%;
}
</style>