版权声明:本文为闪耀太阳原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_16804847/article/details/116916359
1 用戶页面布局
1.1 面包屑导航
1.1.1官网API
1.1.2 编辑页面VUE
<!-- 1.编辑面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
1.1.3 页面效果展现
1.2 Card 卡片
1.2.1 官网API
1.2.2 vue中使用卡片
<!-- 2.定义卡片标签 -->
<el-card class="box-card">
这是一个卡片视图
</el-card>
1.2.2 按需导入样式
1).导入标签
2).设置全局可用
1.3 编辑用户输入框
1.3.1 官方API
1.3.2 栅格API
1.3.3 编辑页面VUE
<!-- 2.1 定义一行元素 -->
<el-row :gutter="20">
<el-col :span="9">
<!-- 2.1定义用户的输入框 -->
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<!-- 2.2 定义新增用户按钮-->
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
1.3.4 页面效果
1.4 获取后端用户数据
1.4.1 前端业务接口
1.4.2 PageResult对象 接口说明
1.4.3 编辑PageResult VO对象
说明: 在jt-manage中的com.jt.vo 中定义 VO对象
1.4.4 编辑UserController
/**
* 需求: 进行分页查询
* URL地址: /user/list
* 请求参数: 使用PageResult对象接收
* 请求返回值: SysResult对象
* 请求类型: get请求
*/
@GetMapping("/list")
public SysResult findUserByPage(PageResult pageResult){//只有3个参数
//携带所有的数据返回
pageResult = userService.findUserByPage(pageResult);
return SysResult.success(pageResult);
}
1.4.5 编辑UserService
/**
* 业务说明: 将后台数据实现分页查询
* 分页Sql:
* select * from user limit 起始位置,查询记录数
* 查询第一页 每页20条
* select * from user limit 0,20
* @param pageResult
* @return
*
* MP实现分页查询
* MP通过分页对象进行查询,获取所有的分页相关的数据.
*
* 参数说明:
* page: 定义当前的分页对象 页面/每页的条数
* queryWrapper: 条件构造器 只有query属性不为null 才会拼接where条件.
*/
@Override
public PageResult findUserByPage(PageResult pageResult) {
//1.定义分页对象 2个参数
IPage<User> page =
new Page<>(pageResult.getPageNum(),
pageResult.getPageSize());
//2.定义查询条件
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
//3.判断用户是否有参数
boolean flag = StringUtils.hasLength(pageResult.getQuery());
queryWrapper.like(flag,"username", pageResult.getQuery());
//page 参数4个
page = userMapper.selectPage(page,queryWrapper);
//4.获取总记录数
long total = page.getTotal();
//5.获取分页后的结果
List<User> userList = page.getRecords();
return pageResult.setTotal(total).setRows(userList);
}
1.4.6 编辑MybatisPlus配置类
@Configuration //标识配置类
public class MybatisPlusConfig {
//MybatisPlus~~动态添加执行器~~Mybatis~~~~JDBC
//照着官方文档实现即可
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
return interceptor;
}
}
1.4.7 获取返回值结果
URL地址: http://localhost:8091/user/list?query=&pageNum=3&pageSize=1 查询的第三页的数据 每页一条
JSON结构:
{"status":200,"msg":"服务器运行成功","data":{"query":"","pageNum":3,"pageSize":1,"total":4,"rows":[{"created":"2021-02-18T11:17:23.000+00:00","updated":"2021-03-13T08:50:25.000+00:00","id":3,"username":"zhangsan","password":"a66abb5684c45962d887564f08346e8d","phone":"13111112223","email":"1235678@qq.com","status":true,"role":null}]}}
1.5 编辑用户列表前端
1.5.1 表格数据API
当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
</el-table>
1.5.2 编辑页面JS
<script>
export default {
data(){
return {
//定义分页查询对象
queryInfo: {
query: '', //用户查询的数据
pageNum: 1, //默认第一页
pageSize: 5 //每页5条
},
userList: [], //获取分页后的结果
total: 0
}
},
methods: {
//1.动态获取userList数据
async getUserList(){
const {data: result} = await this.$http.get("/user/list",{params: this.queryInfo})
if(result.status !== 200) return this.$message.error("获取列表失败")
//为total属性赋值
this.total = result.data.total
this.userList = result.data.rows
}
},
//当页面加载完成之后 调用该函数
mounted(){
//获取userList列表数据
this.getUserList()
}
}
</script>
1.5.3 编辑表格页面
<!-- 定义表格数据
:data: 表格的数据来源
prop: 从userList中获取的属性值
label: 字段名称
stripe: 斑马纹效果
border: 列
-->
<el-table :data="userList" style="width: 100%" stripe border>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>
1.5.4 Vue语法作用域插槽
说明: 一般在循环遍历的表格中,需要获取当前行的元素.但是由于很多的UI工具将循环遍历的方式进行了封装.不方便直接获取对象.则可以使用作用域插槽的形式动态获取.
<template slot-scope="scope">
<!-- scope封装的对象 获取行级元素 row属性实行 -->
{{scope.row.status}}
</template>
1.5.5 展现开关
<el-table :data="userList" style="width: 100%" stripe border>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<!-- scope封装的对象 获取行级元素 row属性实行 -->
<el-switch
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<el-button type="primary" icon="el-icon-edit" size="small"></el-button>
<el-button type="danger" icon="el-icon-delete" size="small"></el-button>
</el-table-column>
</el-table>
1.5.6 效果展现
1.6 表格分页实现
1.6.1 官网API
1.6.2 实现分页
<!-- 3.定义分页功能
1.@size-change 当页面的条数变化时触发
2.@current-change 当页数改变时触发
3.current-page 显示当前的页数 ??
4.:page-sizes 显示页数的数组
5.page-size 初始条件下每页的条数
6.layout 显示分页的样式种类 全部显示
7.total 数据的总数 ???
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-sizes="[5, 10, 20, 40]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
1.6.3 编辑页面JS
<script>
export default {
data(){
return {
//定义分页查询对象
queryInfo: {
query: '', //用户查询的数据
pageNum: 1, //默认第一页
pageSize: 5 //每页5条
},
userList: [], //获取分页后的结果
total: 0
}
},
methods: {
//1.动态获取userList数据
async getUserList(){
const {data: result} = await this.$http.get("/user/list",{params: this.queryInfo})
if(result.status !== 200) return this.$message.error("获取列表失败")
//为total属性赋值
this.total = result.data.total
this.userList = result.data.rows
},
handleSizeChange(pageSize){
//查询的条件需要变化
this.queryInfo.pageSize = pageSize
//重新查询数据
this.getUserList()
},
handleCurrentChange(pageNum){
this.queryInfo.pageNum = pageNum
this.getUserList()
}
},
//当页面加载完成之后 调用该函数
mounted(){
//获取userList列表数据
this.getUserList()
}
}
</script>
1.7 用户搜索的实现
1.7.1 编辑页面HTML
1.7.2 设定清空input框
1).页面API
2).input 事件
1.7.3 编辑页面HTML
1.8 实现用户状态修改
1.8.1 官网API
1.8.2 业务接口
1.8.3 编辑页面JS
async updateStatus(user){
//获取用户的Id号/状态信息 发起restFul请求.
//this.$http.put("/user/status/"+user.id+"/"+user.status)
//模板字符串写法 `` 可以编辑多行,可以直接对象取值${key}
//es6的高端写法
const {data: result} =
await this.$http.put(`/user/status/${user.id}/${user.status}`)
if(result.status !== 200) return this.$message.error("更新操作失败")
this.$message.success("更新操作成功!")
}
1.8.4 编辑UserController
/**
* 更新状态信息
* URL: /user/status/{id}/{status}
* 参数: id/status
* 返回值: SysResult对象
*/
@PutMapping("/status/{id}/{status}")
public SysResult updateStatus(User user){
userService.updateStatus(user);
return SysResult.success();
}
1.8.5 编辑UserService
@Override
public void updateStatus(User user) { //id/status
userMapper.updateById(user);
}