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表示服务器请求成功
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" : "[email protected] " ,
"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表示服务器请求成功
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)