day19_添加修改

news/2025/9/27 21:47:58/文章来源:https://www.cnblogs.com/hulixiangcoding/p/19115499

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/919984.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

day18_查询功能合并servlet

day18_查询功能合并servlet 1.sql分析 -- 分页+条件查询 select am1.*,IFNULL(am2.menuname,无) as pname from admin_menu am1 left join admin_menu am2 on am1.pid = am2.mid-- 动态查询条件 where am1.menuna…