day19_添加 修改
1添加场景分析
1使用弹出框 承载添加界面
2弹出框输入菜单信息 提交到添加接口
3添加接口处理完毕 反馈信息
弹窗处理结果 关闭弹出框 刷新table数据
2sql分析
-- 逻辑主键 一般不加自增 由使用人员维护编号
-- 页面使用了动态图标 图标名称 不能使用ElementPlus图标库之外的字符 会影响table数据显示
insert into admin_menu(mid,menuname,pid,url,glyphicon) VALUES (99,'测试菜单',0,'#','Compass')-- 添加数据校验 如果编号已存在 不能添加
select * from admin_menu where mid = 98
3dao编写
//添加菜单Integer insertAdminMenu(AdminMenu inputMenu);//通过ID查菜单数据AdminMenu getAdminMenuByMid(Long mid);
<insert id="insertAdminMenu">insert into admin_menu(mid,menuname,pid,url,glyphicon)VALUES (#{mid},#{menuname},#{pid},#{url},#{glyphicon})</insert><select id="getAdminMenuByMid" resultMap="AdminMenuBaseMap">select * from admin_menu where mid = #{mid}</select>
4添加接口
1.添加菜单信息时验证mid重复
protected void insertMenu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");String midStr = req.getParameter("mid");String menuname = req.getParameter("menuname");String pidStr = req.getParameter("pid");String url = req.getParameter("url");String glyphicon = req.getParameter("glyphicon");Long mid = null;Long pid = null;if(midStr!=null&&!"".equals(midStr)){mid = Long.valueOf(midStr);}if(pidStr!=null&&!"".equals(pidStr)){pid = Long.valueOf(pidStr);}AdminMenu inputMenu = new AdminMenu(mid, menuname, pid, url, glyphicon);AdminMenuService adminMenuService = new AdminMenuServiceImpl();AdminMenu menuById = adminMenuService.getAdminMenuByMid(mid);Result result = null;if(menuById!=null){//主键重复 直接返回错误 跳过添加流程result = new Result(ReturnCode.OPERATION_DATA_FAILED2.getCode(), ReturnCode.OPERATION_DATA_FAILED2.getMsg());}else{//主键可用 执行添加流程//添加流程Integer resNum = adminMenuService.insertAdminMenu(inputMenu);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();}
2.用户输入完毕后 单独校验mid是否重复
protected void insertCheck(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String midStr = req.getParameter("mid");Long mid = null;if(midStr!=null&&!"".equals(midStr)){mid = Long.valueOf(midStr);}AdminMenuService adminMenuService = new AdminMenuServiceImpl();AdminMenu menuById = adminMenuService.getAdminMenuByMid(mid);Result result = null;if(menuById!=null){//主键重复 直接返回错误 跳过添加流程result = new Result(ReturnCode.OPERATION_DATA_FAILED2.getCode(), ReturnCode.OPERATION_DATA_FAILED2.getMsg());}else{result = new Result(ReturnCode.QUERY_SUCCESS.getCode(), ReturnCode.QUERY_SUCCESS.getMsg());}resp.setContentType("application/json;charset=utf-8");PrintWriter writer = resp.getWriter();writer.print(JSON.toJSONString(result));writer.close();}
5添加界面
1.没有使用elementPlus表单校验
增加弹出框交互界面
<template><el-dialog v-model="insertDialogVisible" title="添加" width="500"><!-- 没有使用elementPlus表单校验--><el-form :model="insertForm" label-width="auto" style="max-width: 600px"><el-form-item label="菜单编号"><el-input v-model="insertForm.mid" @blur="insertCheck"/></el-form-item><el-form-item label="菜单名称"><el-input v-model="insertForm.menuname" /></el-form-item><el-form-item label="上级编号"><el-input v-model="insertForm.pid" /></el-form-item><el-form-item label="访问地址"><el-input v-model="insertForm.url" /></el-form-item><el-form-item label="菜单图标"><el-input v-model="insertForm.glyphicon" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="insertDialogVisible = false">关闭</el-button><el-button type="primary" @click="insertSubmit">保存</el-button></div></template></el-dialog></template><script setup>/**添加功能 */
//添加对话框 显示/隐藏
const insertDialogVisible = ref(false)//添加表单对象
const insertForm = reactive({mid: '',menuname: '',pid: '',url: '',glyphicon: ''
})/**没有使用elementPlus表单校验 */
//添加数据校验 mid字段
const insertCheck = ()=>{myGet('/menus/insertCheck',{mid:insertForm.mid}).then(resp=>{if(resp.data.code == 20012){ElMessage.warning('菜单编号重复 ' + resp.data.msg)}})
}//添加提交
const insertSubmit = ()=>{let params = insertForm//发请求处理数据myPost('/menus/insertMenu',params).then(resp=>{console.log(resp.data);if(resp.data.code == 20010){//关框insertDialogVisible.value = false//显示操作结果ElMessage.success(resp.data.msg)//刷新数据 保留当前页码和查询条件//把改后的page 作为参数 通过请求传走let params1 = tableData.pageInfo;let params2 = queryForm;//json对象组合语法let allParam = {...params1,...params2}//发送请求myQuery(allParam)//直接重新查询//myQuery({})}else if(resp.data.code == 20012){ElMessage.warning('菜单编号重复 ' + resp.data.msg)}})}</script>
2.使用elementPlus表单校验
增加弹出框交互界面(form设置参数不同)
<template><el-dialog v-model="insertDialogVisible" title="添加" width="500"><!-- 没有使用elementPlus表单校验<el-form :model="insertForm" label-width="auto" style="max-width: 600px"><el-form-item label="菜单编号"><el-input v-model="insertForm.mid" @blur="insertCheck"/></el-form-item><el-form-item label="菜单名称"><el-input v-model="insertForm.menuname" /></el-form-item><el-form-item label="上级编号"><el-input v-model="insertForm.pid" /></el-form-item><el-form-item label="访问地址"><el-input v-model="insertForm.url" /></el-form-item><el-form-item label="菜单图标"><el-input v-model="insertForm.glyphicon" /></el-form-item></el-form> --><el-form ref="insertFromRef" status-icon :rules="rules" :model="insertForm" label-width="auto"style="max-width: 600px"><el-form-item label="菜单编号" prop="mid"><el-input v-model="insertForm.mid" /></el-form-item><el-form-item label="菜单名称" prop="menuname"><el-input v-model="insertForm.menuname" /></el-form-item><el-form-item label="上级编号" prop="pid"><!-- <el-input v-model="insertForm.pid" /> --><el-select v-model="insertForm.pid" placeholder="请选择" style="width: 100%;"><el-option label="无" value="0" /><el-option v-for="option in menuList" :label="option.menuname" :value="option.mid" /></el-select></el-form-item><el-form-item label="访问地址" prop="url"><el-input v-model="insertForm.url" /></el-form-item><el-form-item label="菜单图标" prop="glyphicon"><!-- <el-input v-model="insertForm.glyphicon" /> --><el-select v-model="insertForm.glyphicon" placeholder="请选择" style="width: 100%;"><el-option value="User" > <el-icon><User /></el-icon> User</el-option><el-option value="More" > <el-icon><More /></el-icon> More</el-option><el-option value="ZoomIn" > <el-icon><ZoomIn /></el-icon> ZoomIn</el-option><el-option value="TurnOff" > <el-icon><TurnOff /></el-icon> TurnOff</el-option></el-select></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="insertDialogVisible = false">关闭</el-button><el-button type="primary" @click="insertSubmit">保存</el-button></div></template></el-dialog>
</template><script steup>/**添加功能 */
//添加对话框 显示/隐藏
const insertDialogVisible = ref(false)//添加表单对象
const insertForm = reactive({mid: '',menuname: '',pid: '',url: '',glyphicon: ''
})//输入框的值 用于输出错误信息
const validateMid = (rule, value, callback) => {myGet('/menus/insertCheck', { mid: value }).then(resp => {if (resp.data.code == 20012) {callback(new Error(resp.data.msg))} else if (resp.data.code == 20000) {callback()}})
}
//form校验规则 使用自定义校验
const rules = reactive({mid: [{ validator: validateMid, trigger: 'blur' }],
})//表单统一校验 如果有红框 不让提交
//添加表单对象
const insertFromRef = ref()const insertSubmit = () => {insertFromRef.value.validate((valid, fields) => {if (valid) {console.log("提交表单数据", insertForm);//let params = insertForm//发请求处理数据myPost('/menus/insertMenu', insertForm).then(resp => {console.log(resp.data);if (resp.data.code == 20010) {//关框insertDialogVisible.value = false//显示操作结果ElMessage.success(resp.data.msg)//刷新数据 保留当前页码和查询条件//把改后的page 作为参数 通过请求传走let params1 = tableData.pageInfo;let params2 = queryForm;//json对象组合语法let allParam = { ...params1, ...params2 }//发送请求myQuery(allParam)queryMenuLevel1()//直接重新查询//myQuery({})//清空表单的数据insertFromRef.value.resetFields()}})}})
}</script>
6修改场景分析
7修改sql分析
-- 加载需要修改的语句
select * from admin_menu where mid = 98-- 修改语句
update admin_menu set menuname = '测试77',pid = 20,url= '/test77', glyphicon = 'Setting'
where mid = 77
8修改dao
加载修改数据时 使用的sql语句 通过Mid 查询doa方法 可以复用
Integer updateAdminMenu(AdminMenu inputMenu);
<update id="updateAdminMenu">update admin_menu set menuname = #{menuname},pid = #{pid},url= #{url}, glyphicon = #{glyphicon}where mid = #{mid}</update>
9修改接口
1 准备修改的数据
protected void updateMenuInfo(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String midStr = req.getParameter("mid");Long mid = null;if(midStr!=null&&!"".equals(midStr)){mid = Long.valueOf(midStr);}AdminMenuService adminMenuService = new AdminMenuServiceImpl();AdminMenu menuById = adminMenuService.getAdminMenuByMid(mid);Result result = null;if(menuById!=null){//返回查到的需要修改的完整数据result = new Result(ReturnCode.QUERY_SUCCESS.getCode(), ReturnCode.QUERY_SUCCESS.getMsg(),menuById);}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();}
注意: 这个接口跟 添加时 校验mid是否重复的接口有些相似 但是 功能不同的接口不要随意合并
业务场景不同 接口尽量分开
2实际的修改数据请求
protected void updateMenu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");String midStr = req.getParameter("mid");String menuname = req.getParameter("menuname");String pidStr = req.getParameter("pid");String url = req.getParameter("url");String glyphicon = req.getParameter("glyphicon");Long mid = null;Long pid = null;if(midStr!=null&&!"".equals(midStr)){mid = Long.valueOf(midStr);}if(pidStr!=null&&!"".equals(pidStr)){pid = Long.valueOf(pidStr);}AdminMenu inputMenu = new AdminMenu(mid, menuname, pid, url, glyphicon);AdminMenuService adminMenuService = new AdminMenuServiceImpl();Integer resNum = adminMenuService.updateAdminMenu(inputMenu);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();}
10 修改界面
修改界面与添加界面 基本效果有类似 细节不同
<template><!-- table多加一列 操作列 加到table中间 --><el-table-column prop="menuname" label="操作" ><template #default="scope"><el-button type="primary" @click="openUpdateDialog(scope.row)">修改</el-button></template></el-table-column><!-- 修改对话框 --><el-dialog v-model="updateDialogVisible" title="修改" width="500"><el-form :model="updateForm.updateData" label-width="auto"style="max-width: 600px"><el-form-item label="菜单编号" prop="mid"><el-input disabled v-model="updateForm.updateData.mid" /></el-form-item><el-form-item label="菜单名称" prop="menuname"><el-input v-model="updateForm.updateData.menuname" /></el-form-item><el-form-item label="上级编号" prop="pid"><el-select v-model="updateForm.updateData.pid" placeholder="请选择" style="width: 100%;"><el-option label="无" :value="0" /><el-option v-for="option in menuList" :label="option.menuname" :value="option.mid" /></el-select></el-form-item><el-form-item label="访问地址" prop="url"><el-input v-model="updateForm.updateData.url" /></el-form-item><el-form-item label="菜单图标" prop="glyphicon"><el-select v-model="updateForm.updateData.glyphicon" placeholder="请选择" style="width: 100%;"><el-option value="User" > <el-icon><User /></el-icon> User</el-option><el-option value="More" > <el-icon><More /></el-icon> More</el-option><el-option value="ZoomIn" > <el-icon><ZoomIn /></el-icon> ZoomIn</el-option><el-option value="TurnOff" > <el-icon><TurnOff /></el-icon> TurnOff</el-option></el-select></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="updateDialogVisible = false">关闭</el-button><el-button type="primary" @click="updateSubmit">保存</el-button></div></template></el-dialog></template>
<script setup>
/**修改功能 *///修改提交
const updateSubmit = ()=>{//关框updateDialogVisible.value = false//发请求处理数据myPost('/menus/updateMenu', updateForm.updateData).then(resp => {console.log(resp.data);if (resp.data.code == 20010) {//显示操作结果ElMessage.success(resp.data.msg)//刷新数据 保留当前页码和查询条件//把改后的page 作为参数 通过请求传走let params1 = tableData.pageInfo;let params2 = queryForm;//json对象组合语法let allParam = { ...params1, ...params2 }//发送请求myQuery(allParam)queryMenuLevel1()//直接重新查询//myQuery({})}})}//修改开框
const openUpdateDialog = (currentRow)=>{console.log(currentRow);//加载修改数据myGet("/menus/updateMenuInfo",{mid:currentRow.mid}).then(resp=>{console.log(resp.data.returnData);//把后端读到的完整数据 加载到updateForm上updateForm.updateData = resp.data.returnData})//打开弹出框updateDialogVisible.value = true
}
//对话框显示/隐藏 bol值
const updateDialogVisible = ref(false)
//修改表单数据
const updateForm = reactive({updateData:{mid: '',menuname: '',pid: '',url: '',glyphicon: ''
}})</script>