day22_用户模块
1查询
sql分析
-- 定制系统
-- 查询分段记录
select au1.*,au2.username create_uname from admin_user au1 left join admin_user au2 on au1.create_uid = au2.uidwhere au1.username like CONCAT('%','a','%')
AND au1.isvalid = 0limit 0,3-- 统计总记录数
select count(1) from admin_user au1where au1.username like CONCAT('%','a','%')
AND au1.isvalid = 0
dao代码
<select id="listUserByCondition" resultMap="AdminUserMap">select au1.*,au2.username create_uname from admin_user au1 left join admin_user au2 on au1.create_uid = au2.uid<where><if test="inputUser.username !=null and inputUser.username != ''">au1.username like CONCAT('%',#{inputUser.username},'%')</if><if test="inputUser.isvalid !=null">AND au1.isvalid = #{inputUser.isvalid}</if></where>limit #{startIdx},#{pageSize}</select><select id="countUserByCondition" resultType="java.lang.Integer">select count(1) from admin_user au1<where><if test="inputUser.username !=null and inputUser.username != ''">au1.username like CONCAT('%',#{inputUser.username},'%')</if><if test="inputUser.isvalid !=null">AND au1.isvalid = #{inputUser.isvalid}</if></where></select>
查询接口
protected void listUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String isvalidStr = req.getParameter("isvalid");String pageStr = req.getParameter("page");String pageSizeStr = req.getParameter("pageSize");Integer isvalid = null;if(isvalidStr!=null&&!"".equals(isvalidStr)){isvalid = Integer.valueOf(isvalidStr);}AdminUser inputUser = new AdminUser(username, isvalid);Integer page = 1;Integer pageSize = 3;if(pageStr!=null&&!"".equals(pageStr)){page = Integer.valueOf(pageStr);}if(pageSizeStr!=null&&!"".equals(pageSizeStr)){pageSize = Integer.valueOf(pageSizeStr);}//调用serviceAdminUserService adminUserService = new AdminUserServiceImpl();//1查总记录数Integer total = adminUserService.countUserByCondition(inputUser);Integer totalPage = PageInfo.getTotalPage(total, pageSize);//2控制超页if(page>totalPage&&page!=1){page = totalPage;}//3查询分段记录List<AdminUser> adminUsers = adminUserService.listUserByCondition(inputUser, page, pageSize);//反馈数据Result result = null;if(adminUsers.size()>0){PageInfo pageInfo = new PageInfo(page,pageSize,total);result = new Result(ReturnCode.QUERY_SUCCESS.getCode(),ReturnCode.QUERY_SUCCESS.getMsg(),adminUsers,pageInfo);}else{result = new Result(ReturnCode.QUERY_NODATA.getCode(),ReturnCode.QUERY_NODATA.getMsg());}resp.setContentType("application/json;charset=utf-8");PrintWriter writer = resp.getWriter();writer.print(JSON.toJSONString(result));writer.close();}
查询界面
<template><el-form ref="queryFormRef" :model="queryForm" :inline="true"><el-form-item label="用户名称" prop="username"><el-input v-model="queryForm.username" style="width: 240px;" placeholder="username" clearable /></el-form-item><el-form-item label="用户状态" prop="isvalid"><el-select v-model="queryForm.isvalid" placeholder="请选择" style="width: 240px;" clearable><el-option label="离职" :value="0" /><el-option label="在职" :value="1" /><el-option label="休假" :value="2" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="querySubmit">查询</el-button><el-button @click="queryReset">重置</el-button></el-form-item></el-form><el-table height="450" :data="tableData.tableList" style="width: 100%"><el-table-column prop="uid" fixed label="编号" width="180" /><el-table-column prop="username" label="用户名" width="180" /><el-table-column prop="password" label="密码" width="180"><template #default="scope"><el-text type="info">{{ transPassword(scope.row.password) }} </el-text></template></el-table-column><el-table-column prop="isvalid" label="用户状态" width="180"><template #default="scope"><el-text v-if="scope.row.isvalid == 1" type="success">在职</el-text><el-text v-else-if="scope.row.isvalid == 0" type="danger">离职</el-text><el-text v-else-if="scope.row.isvalid == 2" type="warning">休假</el-text></template></el-table-column><el-table-column prop="createUid" label="创建人" width="180"/><el-table-column prop="createUname" label="创建名称" width="180"/><el-table-column prop="regTime" label="注册时间" width="180"><template #default="scope"><el-tag type="primary">{{scope.row.regTime}}</el-tag></template></el-table-column><el-table-column prop="loginTime" label="最后登录时间" width="180"><template #default="scope"><el-tag type="primary">{{scope.row.loginTime}}</el-tag></template></el-table-column><el-table-column prop="headImg" label="头像地址" width="180"><template #default="scope"><img :src="scope.row.headImg"></img></template></el-table-column></el-table><el-paginationv-model:current-page="tableData.pageInfo.page"v-model:page-size="tableData.pageInfo.pageSize":total="tableData.pageInfo.total":page-sizes="[3, 6, 9]"layout="total, sizes, prev, pager, next, jumper"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></template><script setup>
import { ref,reactive,onMounted } from 'vue'
import {Check,Delete,Edit,Message,Search,Star,Share} from '@element-plus/icons-vue'
import { myGet, myPost } from '@/myaxios'
import { ElMessage, ElMessageBox } from 'element-plus'/**查询功能 */
//table绑定的数据
const tableData = reactive({tableList:[],pageInfo:{page:1,pageSize:3,total:55}
})
//查询表单对象
const queryFormRef = ref()//查询表单
const queryForm = reactive({username:'',isvalid:''
})
//查询按钮
const querySubmit = ()=>{myQuery(queryForm)
}
//重置按钮
const queryReset = ()=>{//清数据queryFormRef.value.resetFields()//重新查myQuery({})
}//page改变
const handleCurrentChange = (page)=>{//改页码参数tableData.pageInfo.page = pagelet params1 = tableData.pageInfolet params2 = queryForm//查询请求myQuery({...params1,...params2})
}
//pageSize改变
const handleSizeChange = (pageSize)=>{//改页码参数tableData.pageInfo.page = 1tableData.pageInfo.pageSize = pageSizelet params1 = tableData.pageInfolet params2 = queryForm//查询请求myQuery({...params1,...params2})
}/**公共函数 */
//密码脱敏(把密码字段通过程序逻辑做部分隐藏)
const transPassword = (pwd)=>{let pwdStart = pwd.substr(0,1)let pwdEnd = pwd.substr(pwd.length-1,1)return `${pwdStart}***${pwdEnd}`;
}//查询函数
const myQuery = async (params)=>{
/*** await 异步同步等待* async 异步同步控制* 回调地狱 .then互相嵌套调用 代码结构显得杂乱* * 语法糖 简化和优化语法的语法功能* 使用了await语法之后 ajax请求代码结构更简洁*///await 主线程会等待 await的函数 执行完 主线程才会继续执行let resp = await myGet("/users/listUser",params)if(resp.data.code == 20000){tableData.tableList = resp.data.returnDatatableData.pageInfo = resp.data.pageInfo}else if(resp.data.code == 20001){tableData.tableList = []tableData.pageInfo = {page:1,pageSize:3,total:0}}}/**页面加载结束 加载查询数据 */
onMounted(()=>{myQuery({})
})</script><style scoped>img{width: 50px;height: 50px;}
</style>
2添加
sql分析
-- 添加语句
insert into admin_user (username,`password`,reg_time,isvalid,create_uid,head_img) VALUES ('test1','abc123',NOW(),1,7,'/test1')
-- 界面 默认 系统函数 默认 session后端取 界面
dao
<insert id="insertAdminUser">insert into admin_user(username,`password`,reg_time,isvalid,create_uid,head_img)VALUES(#{username},'abc123',NOW(),1,#{createUid},#{headImg})</insert>
插入接口
protected void insertUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String headImg = req.getParameter("headImg");//把当前登录的用户编号 存入createUidAdminUser loginUser =(AdminUser) req.getSession().getAttribute("loginUser");//createUid是创建人编号AdminUser inputUser = new AdminUser(loginUser.getUid(), username, headImg);//调用serviceAdminUserService adminUserService = new AdminUserServiceImpl();Integer resNum = adminUserService.insertAdminUser(inputUser);Result result = null;if(resNum>0){result = new Result(ReturnCode.OPERATION_DATA_SUCCESS.getCode(), ReturnCode.OPERATION_DATA_SUCCESS.getMsg());}else{result = new Result(ReturnCode.OPERATION_DATA_FAILED.getCode(), ReturnCode.OPERATION_DATA_FAILED.getMsg());}resp.setContentType("application/json;charset=utf-8");PrintWriter writer = resp.getWriter();writer.print(JSON.toJSONString(result));writer.close();}添加界面
<el-drawer title="添加" size="30%" v-model="drawerVisable" direction="rtl"><el-form ref="insertFromRef" :model="insertForm" label-width="70"style="max-width: 600px"><el-form-item label="用户名称" prop="username"><el-input v-model="insertForm.username" /></el-form-item><el-form-item label="头像地址" prop="headImg"><el-input v-model="insertForm.headImg" /></el-form-item><el-form-item><el-button type="primary" @click="insertSubmit">保存</el-button></el-form-item></el-form><!-- <template #footer><div style="flex: auto"><el-button @click="cancelClick">cancel</el-button><el-button type="primary" @click="confirmClick">confirm</el-button></div></template> --></el-drawer>
/**添加功能 */
//抽屉显示 隐藏 bol值
const drawerVisable = ref(false)
//添加表单对象
const insertForm = reactive({username:'',headImg:''
})//添加表单对象
const insertFromRef = ref()//添加提交
const insertSubmit = async ()=>{let resp = await myPost('/users/insertUser',insertForm);if(resp.data.code==20010){drawerVisable.value = falseElMessage.success(resp.data.msg)//当前查询条件let params1 = tableData.pageInfolet params2 = queryForm//查询请求myQuery({...params1,...params2})//清空表单insertFromRef.value.resetFields()}else{ElMessage.error(resp.data.msg)}}//抽屉开框
const openInsert = ()=>{drawerVisable.value = true
}3修改
这次修改直接从页面table取值 (简化做法) 减少了从后端取修改数据的接口
sql分析
update admin_user set username = '测试用户',`password` = 'bbcccb',reg_time = '2011-11-11 11:11:11',isvalid =0,head_img ='/测试'where uid = 5562dao
<update id="updateAdminUser">update admin_user setusername = #{username},`password` = #{password},reg_time = #{regTime},isvalid = #{isvalid}, head_img = #{headImg}where uid = #{uid}</update>
修改接口
protected void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String password = req.getParameter("password");String regTime = req.getParameter("regTime");String isvalidStr = req.getParameter("isvalid");String headImg = req.getParameter("headImg");String uidStr = req.getParameter("uid");Integer isvalid = null;Long uid = null;if(isvalidStr!=null&&!"".equals(isvalidStr)){isvalid = Integer.valueOf(isvalidStr);}if(uidStr!=null&&!"".equals(uidStr)){uid = Long.valueOf(uidStr);}AdminUser inputUser = new AdminUser(uid, username, password, regTime, isvalid, headImg);//调用serviceAdminUserService adminUserService = new AdminUserServiceImpl();Integer resNum = adminUserService.updateAdminUser(inputUser);Result result = null;if(resNum>0){result = new Result(ReturnCode.OPERATION_DATA_SUCCESS.getCode(), ReturnCode.OPERATION_DATA_SUCCESS.getMsg());}else{result = new Result(ReturnCode.OPERATION_DATA_FAILED.getCode(), ReturnCode.OPERATION_DATA_FAILED.getMsg());}resp.setContentType("application/json;charset=utf-8");PrintWriter writer = resp.getWriter();writer.print(JSON.toJSONString(result));writer.close();}
修改界面
<!-- table加一列 --><el-table-column fixed="right" label="操作" width="180"><template #default="scope"><el-button type="primary" @click="openUpdate(scope.row)">修改</el-button></template></el-table-column>
<!-- 修改弹出框(抽屉) --><el-drawer title="修改" size="30%" v-model="updateVisable" direction="rtl"><el-form :model="editForm.editData" label-width="70"style="max-width: 600px"><el-form-item label="用户编号" ><el-input disabled v-model="editForm.editData.uid" /></el-form-item><el-form-item label="用户名称"><el-input v-model="editForm.editData.username" /></el-form-item><el-form-item label="用户密码"><el-input v-model="editForm.editData.password" /></el-form-item><el-form-item label="注册时间"><!-- <el-input v-model="editForm.editData.regTime" /> --><el-date-pickerv-model="editForm.editData.regTime"type="datetime"placeholder="请选择日期"value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"/></el-form-item><el-form-item label="用户状态"><el-select v-model="editForm.editData.isvalid" placeholder="请选择" ><el-option label="离职" :value="0" /><el-option label="在职" :value="1" /><el-option label="休假" :value="2" /></el-select></el-form-item><el-form-item label="头像地址" ><el-input v-model="editForm.editData.headImg" /></el-form-item><el-form-item><el-button type="primary" @click="updateSubmit">保存</el-button></el-form-item></el-form><!-- <template #footer><div style="flex: auto"><el-button @click="cancelClick">cancel</el-button><el-button type="primary" @click="confirmClick">confirm</el-button></div></template> --></el-drawer>/**修改功能 */
//修改抽屉显示 隐藏
const updateVisable = ref(false)
//修改表单对象
const editForm = reactive({editData:{uid:'',username:'',password:'',regTime:'',isvalid:'',headImg:'',
}})//打开修改框
const openUpdate = (currentRow)=>{updateVisable.value = true// console.log(currentRow);// console.log(JSON.parse(JSON.stringify(currentRow)) );//需要做对象复制 不能直接传引用editForm.editData = JSON.parse(JSON.stringify(currentRow)) }
//提交修改
const updateSubmit = async ()=>{let resp = await myPost("/users/updateUser", editForm.editData)if(resp.data.code==20010){updateVisable.value = falseElMessage.success(resp.data.msg)//当前查询条件let params1 = tableData.pageInfolet params2 = queryForm//查询请求myQuery({...params1,...params2})}else{ElMessage.error(resp.data.msg)}}4删除
单条删除 table中 每条数据后放一个删除按钮 配合单条删除的接口
sql分析
delete from admin_user where uid = 5557
dao
<delete id="deleteAdminUser">delete from admin_user where uid = #{uid}</delete>
删除接口
protected void deleteUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uidStr = req.getParameter("uid");Long uid = null;if(uidStr!=null&&!"".equals(uidStr)){uid = Long.valueOf(uidStr);}AdminUserService adminUserService = new AdminUserServiceImpl();Integer resNum = adminUserService.deleteAdminUser(uid);Result result = null;if(resNum>0){result = new Result(ReturnCode.OPERATION_DATA_SUCCESS.getCode(), ReturnCode.OPERATION_DATA_SUCCESS.getMsg());}else{result = new Result(ReturnCode.OPERATION_DATA_FAILED.getCode(), ReturnCode.OPERATION_DATA_FAILED.getMsg());}resp.setContentType("application/json;charset=utf-8");PrintWriter writer = resp.getWriter();writer.print(JSON.toJSONString(result));writer.close();}
删除界面
<el-table-column fixed="right" label="操作" width="180"><template #default="scope"><el-button type="primary" @click="openUpdate(scope.row)">修改</el-button><el-button type="primary" @click="openDelete(scope.row.uid)">删除</el-button></template></el-table-column>
/**删除功能 */
const openDelete = (uid)=>{ElMessageBox.confirm(`确定要删除编号为[${uid}]记录么?`,'注意',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(async () => {//发送请求let resp = await myPost("/users/deleteUser",{uid:uid})if(resp.data.code==20010){ElMessage.success(resp.data.msg)//当前查询条件let params1 = tableData.pageInfolet params2 = queryForm//查询请求myQuery({...params1,...params2})}else{ElMessage.error(resp.data.msg)} }).catch(() => {})
}5用户授权
1点击授权按钮 弹出授权框
用tree列出所有的权限菜单 去要查出完整的菜单列表
2用户勾选 提交给后端保存
sql分析
开框 加载数据
-- 查询所有的权限菜单select am2.*,am1.* from admin_menu am1 right join admin_menu am2 on am1.pid = am2.midwhere am2.pid = 0-- 当前用户的已有权限编号列表 通过tree组件 默认选中
-- select mid from rel_admin_user_menu where uid = 3
保存授权信息
-- 处理权限信息时的sql-- 先删除
delete from rel_admin_user_menu where uid = 3-- 再添加insert into rel_admin_user_menu(uid,mid) VALUES (3,11001),(3,11002),(3,12001),(3,13001)
