当前位置: 首页 > news >正文

day19_添加 修改

day19_添加 修改

1添加场景分析

image-20250819094059391

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修改场景分析

image-20250819144104589

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.hskmm.com/?act=detail&tid=19373

相关文章:

  • day18_查询功能 合并servlet
  • NOIP模拟赛 十七
  • day22_用户模块
  • 2025 丹东店推荐:丽格门窗,用 20 年技术沉淀守护家的舒适
  • NOIP2025模拟赛23
  • step
  • 2025 呼和浩特店推荐:丽格门窗,用 20 年技术沉淀守护家的温度
  • 深入解析:浏览器端音视频处理新选择:Mediabunny 让 Web 媒体开发飞起来
  • 2025 宁波门窗店推荐:丽格门窗,甬城品质家居的安心之选
  • 2025 贵阳门窗店优选:丽格门窗,用 20 年匠心适配高原宜居需求
  • 2025 济南门窗店选购指南:丽格门窗凭硬实力圈粉品质家庭
  • “鹏云杯”第十二届山东省大学生网络安全技能大赛 -- Crypto -- WriteUp
  • 服务器系统时间不对?Linux系统时间修改与同步全面指南
  • 9/27
  • 2025 常熟门窗店优选:丽格门窗,20 年技术沉淀的品质之选
  • 2025上海门窗店选购选丽格!20 年系统门窗经验,徐汇宜山路店品质之选
  • 实用指南:Apache、Nginx 和 Tomcat 的区别
  • python+uniapp基于微信小程序美食点餐实用的系统
  • JavaDoc
  • parted command for linuxg
  • 如何在不绑定Apple账号的情况下备份florr.io
  • AI智能体框架怎么选?7个主流工具详细对比解析
  • 原创OI试题 - L
  • 《深入浅出WPF》:8.3.2 自定义路由事件 事件注册类型为 EventHandlerReportTimeEventArgs,但.NET 事件包装器类型为 RoutedEventHandler
  • day 6
  • 2025 自动售货机工厂推荐 配备 Bystronic 激光切割机,快速周转准时交货
  • 7.WPF 的 TextBox 和 TextBlock 控件 - 实践
  • 从中序与后序遍历序列构建二叉树的迭代解法
  • 安装 HuggingFace datasets 模块、包、库
  • 使用 SignalR 向前端推送图像