day22_用户模块
day22_用户模块
1查询
sql分析
-- 定制系统
-- 查询分段记录
select au1.*,au2.username create_uname from admin_user au1 left join admin_user au2 on au1.create_uid = au2.uid
where au1.username like CONCAT('%','a','%')
AND au1.isvalid = 0
limit 0,3
-- 统计总记录数
select count(1) from admin_user au1
where 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);
}
//调用service
AdminUserService 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-pagination
v-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 = page
let params1 = tableData.pageInfo
let params2 = queryForm
//查询请求
myQuery({...params1,...params2})
}
//pageSize改变
const handleSizeChange = (pageSize)=>{
//改页码参数
tableData.pageInfo.page = 1
tableData.pageInfo.pageSize = pageSize
let params1 = tableData.pageInfo
let 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.returnData
tableData.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");
//把当前登录的用户编号 存入createUid
AdminUser loginUser =(AdminUser) req.getSession().getAttribute("loginUser");
//createUid是创建人编号
AdminUser inputUser = new AdminUser(loginUser.getUid(), username, headImg);
//调用service
AdminUserService 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 = false
ElMessage.success(resp.data.msg)
//当前查询条件
let params1 = tableData.pageInfo
let 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 = 5562
dao
<update id="updateAdminUser">
update admin_user set
username = #{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);
//调用service
AdminUserService 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-picker
v-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 = false
ElMessage.success(resp.data.msg)
//当前查询条件
let params1 = tableData.pageInfo
let 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.pageInfo
let 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.mid
where 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)
浙公网安备 33010602011771号