本文已参与[新人创作礼]活动,一起开启掘金创作之路
1. 利用子查询实现左侧菜单列表
1.1 编辑映射文件
1.1.1 子查询Sql语句写法
SELECT * FROM rights WHERE parent_id = 0
SELECT * FROM rights WHERE parent_id = 3
1.1.2 xml映射文件写法
<select id="getRightsList" resultMap="rightsRM">
select * from rights where parent_id = 0
</select>
<resultMap id="rightsRM" type="Rights" autoMapping="true">
<id property="id" column="id"></id>
<collection property="children" ofType="Rights"
select="findChildren" column="id"/>
</resultMap>
<select id="findChildren" resultType="Rights">
select * from rights where parent_id = #{id}
</select>
2. 用户模块管理
2.1 分页查询补充
2.1.1 用户需求说明
说明: 用户的文本输入框,可能有值,也可能没有数据. 则在后端服务器中应该使用动态Sql的方式实现数据的查询.
2.1.2 编辑UserController
@GetMapping("/list")
public SysResult getUserList(PageResult pageResult){
pageResult = userService.getUserList(pageResult);
return SysResult.success(pageResult);
}
2.1.3 编辑UserService
@Override
public PageResult getUserList(PageResult pageResult) {
long total = userMapper.getTotal();
int size = pageResult.getPageSize();
int start = (pageResult.getPageNum() - 1) * size;
String query = pageResult.getQuery();
List<User> rows = userMapper.findUserListByPage(start,size,query);
return pageResult.setTotal(total).setRows(rows);
}
2.1.4 编辑UserMapper
- 编辑Mapper接口
List<User> findUserListByPage(@Param("start") int start,
@Param("size") int size,
@Param("query") String query);
- 编辑UserMapper.xml 映射文件
<mapper namespace="com.jt.mapper.UserMapper">
<select id="findUserListByPage" resultType="User">
select * from user
<where>
<if test="query !=null and query !='' ">username like "%"#{query}"%"</if>
</where>
limit #{start},#{size}
</select>
</mapper>
2.2 完成状态修改
2.2.1 业务说明
说明: 通过开关 控制数据库中的 status=true/false 数据库中显示1/0 1/0 与 true/false 对象映射可以互相转化.
根据用户的ID 实现状态的修改.
2.2.2 前端JS分析
- 知识点
作用域插槽: 一般在表格数据展现时,可以动态获取当前行对象.
用法:
2. emplate
3. slot-scope属性=“变量”
- 页面JS分析
<el-table-column prop="status" label="状态">
<!-- <template slot-scope="scope">
{{scope.row.status}}
</template> -->
<template slot-scope="scope">
<el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
- 页面函数说明
async updateStatus(user){
const {data: result} = await this.$http.put(`/user/status/${user.id}/${user.status}`)
if(result.status !== 200) return this.$message.error("用户状态修改失败!")
this.$message.success("用户状态修改成功!")
},
2.2.3 业务接口文档说明
- 请求路径 /user/status/{id}/{status}
- 请求类型 PUT
- 请求参数: 用户ID/状态值数据
| 参数名称 | 参数类型 | 参数说明 | 备注信息 |
|---|
| id | Integer | 用户ID号 | 不能为null |
| status | boolean | 参数状态信息 | 不能为null |
{"status":200,"msg":"服务器调用成功!","data":null}
2.2.4 编辑UserController
@PutMapping("/status/{id}/{status}")
public SysResult updateStatus(User user){
userService.updateStatus(user);
return SysResult.success();
}
2.2.5 编辑UserService
@Override
public void updateStatus(User user) {
user.setUpdated(new Date());
userMapper.updateStatus(user);
}
2.3 用户新增操作
2.3.1 页面JS分析
- 编辑新增页面
- 新增页面JS分析
2.3.2 新增业务接口说明
- 请求路径 /user/addUser
- 请求类型 POST
- 请求参数: 整个form表单数据封装为js对象进行参数传递
| 参数名称 | 参数类型 | 参数说明 | 备注信息 |
|---|
| username | String | 用户名 | 不能为null |
| password | String | 密码 | 不能为null |
| phone | String | 电话号码 | 不能为null |
| email | String | 密码 | 不能为null |
{"status":200,"msg":"服务器调用成功!","data":null}
2.3.3 编辑UserController
@PostMapping("/addUser")
public SysResult addUser(@RequestBody User user){
userService.addUser(user);
return SysResult.success();
}
2.3.4 编辑UserService
@Override
public void addUser(User user) {
Date date = new Date();
String md5Pass = DigestUtils.md5DigestAsHex(user.getPassword().getBytes());
user.setPassword(md5Pass)
.setStatus(true)
.setCreated(date)
.setUpdated(date);
userMapper.addUser(user);
}
2.3.5 编辑UserMapper/xml映射文件
- 编辑mapper接口
void addUser(User user);
- 编辑xml映射文件
<insert id="addUser">
insert into user(id,username,password,phone,email,status,created,updated)
value
(null,#{username},#{password},#{phone},#{email},#{status},#{created},#{updated})
</insert>
2.4 修改操作数据回显
2.4.1 页面JS分析
- 按钮点击事件
<el-button type="primary" icon="el-icon-edit" size="small" @click="updateUserBtn(scope.row)"></el-button>
- 数据回显JS
async updateUserBtn(user){
this.updateDialogVisible = true
const {data: result} = await this.$http.get("/user/"+user.id)
if(result.status !== 200) return this.$message.error("用户查询失败")
this.updateUserModel = result.data
},
2.4.2 页面接口文档
- 请求路径: /user/{id}
- 请求类型: GET
- 返回值: SysResult对象
| 参数名称 | 参数说明 | 备注 |
|---|
| status | 状态信息 | 200表示服务器请求成功 | 201表示服务器异常 |
| msg | 服务器返回的提示信息 | 可以为null |
| data | 服务器返回的业务数据 | 返回user对象 |
{
"status":200,
"msg":"服务器调用成功!",
"data":{
"created":"2021-02-18T11:17:23.000+00:00",
"updated":"2021-05-17T11:33:46.000+00:00",
"id":1,
"username":"admin",
"password":"a66abb5684c45962d887564f08346e8d",
"phone":"13111112222",
"email":"1235678@qq.com",
"status":true,
"role":null
}
}
2.4.3 编辑UserController
@GetMapping("/{id}")
public SysResult findUserById(@PathVariable Integer id){
User user = userService.findUserById(id);
return SysResult.success(user);
}
2.4.4 编辑UserService
@Override
public User findUserById(Integer id) {
return userMapper.findUserById(id);
}
2.4.5 编辑UserMapper
@Select("select * from user where id=#{id}")
User findUserById(Integer id);
2.4.6 页面效果展现
2.5 实现用户的更新操作
2.5.1 页面JS分析
- 页面JS
- 发起Ajax请求
2.5.2 修改的业务接口
- 请求路径: /user/updateUser
- 请求类型: PUT
- 请求参数: User对象结构
| 参数名称 | 参数说明 | 备注 |
|---|
| ID | 用户ID号 | 不能为null |
| phone | 手机信息 | 不能为null |
| email | 邮箱地址 | 不能为null |
| 参数名称 | 参数说明 | 备注 |
|---|
| status | 状态信息 | 200表示服务器请求成功 | 201表示服务器异常 |
| msg | 服务器返回的提示信息 | 可以为null |
| data | 服务器返回的业务数据 | null |
{
"status":200,
"msg":"服务器调用成功!",
"data":{}
}
2.5.3 编辑UserController
@PutMapping("/updateUser")
public SysResult updateUser(@RequestBody User user){
userService.updateUser(user);
return SysResult.success();
}
2.5.4 编辑UserService
@Override
public void updateUser(User user) {
userMapper.updateUser(user);
}
2.5.5 编辑UserMapper
@Update("update user set phone=#{phone},email=#{email} where id=#{id}")
void updateUser(User user);
2.6 用户删除操作
2.6.1 页面JS修改
3. 知识串
1.1 node.js和vue脚手架的关系
- node.js 作用Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。
- VUE脚手架 是前端开发模拟后端设计的一种开发框架体系 xxx.vue
- VUE.js 是将javascript封装的高级渐进式的JS的框架
1.2 页面简单效果
1.2.1 ElementUI 组件声明
由于elementUI中的组件很多,如果直接导入会导致JS文件特别的庞大. 最好的方式应该是按需导入. 控制JS文件的大小.
1.2.2 导入步骤
- 导入组件
import {
Button
} from 'element-ui'
- 对外声明组件
Vue.use(Button)
