day19_添加 修改
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>
浙公网安备 33010602011771号