devbox
人工智能逻辑思维
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-菜单管理实现

作者：人工智能逻辑思维 | 2024-01-31 08:22:10

赞

踩

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-菜单管理实现

锋哥原创的Springboot+Layui python222网站实战：

python222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )共计23条视频，包括：python222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )、第2讲 架构搭建实现、第3讲 页面系统属性动态化设计实现等，UP主更多精彩视频，请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1yX4y1a7qM/

后端：

  1. package com.python222.controller.admin;
  2.  
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.python222.entity.Menu;
  5. import com.python222.service.MenuService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.RestController;
  9.  
  10. import java.util.HashMap;
  11. import java.util.List;
  12. import java.util.Map;
  13.  
  14. /**
  15.  * 管理员-菜单控制器
  16.  * @author python222小锋老师
  17.  * @site www.python222.com
  18.  */
  19. @RestController
  20. @RequestMapping(value = "/admin/menu")
  21. public class MenuAdminController {
  22.  
  23.     @Autowired
  24.     private MenuService menuService;
  25.  
  26.     /**
  27.      * 根据条件查询菜单
  28.      * @return
  29.      * @throws Exception
  30.      */
  31.     @RequestMapping(value = "/list")
  32.     public Map<String,Object> list()throws Exception{
  33.         Map<String, Object> resultMap = new HashMap<>();
  34.         List<Menu> menuList=menuService.list(new QueryWrapper<Menu>().orderByAsc("sort"));
  35.         resultMap.put("code", 0);
  36.         resultMap.put("data", menuList);
  37.         return resultMap;
  38.     }
  39.  
  40.     /**
  41.      * 添加或者修改菜单
  42.      * @param menu
  43.      * @return
  44.      */
  45.     @RequestMapping("/save")
  46.     public Map<String,Object> save(Menu menu){
  47.         if(menu.getId()==null){
  48.             menuService.save(menu);
  49.         }else{
  50.             menuService.updateById(menu);
  51.         }
  52.         Map<String, Object> resultMap = new HashMap<>();
  53.         resultMap.put("success", true);
  54.         return resultMap;
  55.     }
  56.  
  57.     /**
  58.      * 删除菜单
  59.      * @param id
  60.      * @return
  61.      * @throws Exception
  62.      */
  63.     @RequestMapping("/delete")
  64.     public Map<String,Object> delete(Integer id)throws Exception{
  65.         Map<String, Object> resultMap = new HashMap<>();
  66.         menuService.removeById(id);
  67.         resultMap.put("success", true);
  68.         return resultMap;
  69.     }
  70.  
  71.     /**
  72.      * 根据id查询菜单实体
  73.      * @param id
  74.      * @return
  75.      * @throws Exception
  76.      */
  77.     @RequestMapping("/findById")
  78.     public Map<String,Object> findById(Integer id)throws Exception{
  79.         Map<String, Object> resultMap = new HashMap<>();
  80.         Menu menu=menuService.getById(id);
  81.         resultMap.put("menu", menu);
  82.         resultMap.put("success", true);
  83.         return resultMap;
  84.     }
  85.  
  86. }

menuManage.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>菜单管理</title>
  6. <link rel="stylesheet" href="/static/layui/css/layui.css"/>
  7. <link rel="stylesheet" href="/static/css/css.css"/>
  8. </head>
  9. <body>
  10.  
  11.  
  12.    <div style="padding: 20px">
  13.            <span class="layui-breadcrumb">
  14.            <a>首页</a>
  15.            <a><cite>菜单管理</cite></a>
  16.          </span>
  17.           <div style="padding-top: 20px;">
  18.              <div>
  19.                 <div>
  20.                    <button class="layui-btn layuiadmin-btn-list" data-type="batchdel" onclick="addMenu()">添加</button>
  21.                 </div>
  22.              </div>
  23.              <div>
  24.                 <table width="100%" id="menuListTable" ></table>
  25.              </div>
  26.          </div>
  27.      </div>
  28.  
  29. <script src="/static/layui/layui.js"></script>
  30.    <script src="/static/js/jquery.js"></script>
  31.    <script src="/static/js/common.js"></script>
  32. <script type="text/javascript">
  33.  
  34.    layui.use(['element','form','table'], function(){
  35.        var form=layui.form;
  36.         var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  37.         $ = layui.jquery; // 使用jquery
  38.         table = layui.table;
  39.  
  40.         table.render({
  41.           elem: '#menuListTable'
  42.           ,url:'/admin/menu/list'
  43.           ,cols: [[
  44.            {type:'checkbox'}
  45.               ,{field:'id', width:100,title: '编号'}
  46.             ,{field:'name', width:200,title: '菜单名称'}
  47.             ,{field:'url',title: '菜单地址'}
  48.             ,{field:'sort', width:100, title: '排列序号',align:'center'}
  49.             ,{field:'action', width:150, title: '操作',align:'center',templet:formatAction}
  50.           ]]
  51.         });
  52.  
  53.  
  54.    });
  55.  
  56.  
  57.    function deleteOne(id){
  58.       layer.confirm('您确定要删除这条记录吗？', {
  59.        title:"系统提示"
  60.         ,btn: ['确定','取消'] //按钮
  61.       }, function(){
  62.          layer.closeAll('dialog');
  63.          $.post("/admin/menu/delete",{"id":id},function(result){
  64.             if(result.success){
  65.                layer.msg("删除成功！");
  66.                table.reload("menuListTable",{});
  67.             }else{
  68.                layer.msg("删除失败，请联系管理员！");
  69.             }
  70.          },"json");
  71.       }, function(){
  72.  
  73.       });
  74.    }
  75.  
  76.    function addMenu(){
  77.       layer.open({
  78.            type: 2,
  79.            title: '添加菜单',
  80.            area: ['500px', '500px'],
  81.            content: '/admin/saveMenu.html' //iframe的url
  82.          });
  83.    }
  84.  
  85.    function modifyMenu(id){
  86.       layer.open({
  87.            type: 2,
  88.            title: '修改菜单',
  89.            area: ['500px', '500px'],
  90.            content: '/admin/saveMenu.html?id='+id //iframe的url
  91.          });
  92.    }
  93.  
  94.  
  95.    function formatAction(d){
  96.       return "<button class='layui-btn layui-btn-normal layui-btn-xs' onclick='modifyMenu("+d.id+")'><i class='layui-icon layui-icon-edit'></i>编辑</button><button class='layui-btn layui-btn-warm layui-btn-xs' onclick='deleteOne("+d.id+")'><i class='layui-icon layui-icon-delete' ></i>删除</button>";
  97.    }
  98.  
  99.  
  100.  
  101. </script>
  102. </body>
  103. </html>

saveMenu.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>添加或者修改菜单</title>
  6. <link rel="stylesheet" href="/static/layui/css/layui.css"></link>
  7. <style type="text/css">
  8.  
  9.    table tr td{
  10.       padding: 10px;
  11.    }
  12.  
  13. </style>
  14. </head>
  15. <body>
  16. <div style="padding: 20px">
  17.    <form method="post" >
  18.       <table>
  19.          <tr>
  20.             <td>菜单名称：</td>
  21.             <td><input type="text" id="name" name="name" class="layui-input" style="width: 300px"/></td>
  22.          </tr>
  23.          <tr>
  24.             <td>菜单地址：</td>
  25.             <td><input type="text" id="url" name="url" class="layui-input" style="width: 300px"/></td>
  26.          </tr>
  27.          <tr>
  28.             <td>菜单颜色：</td>
  29.             <td>
  30.                <div class="layui-form-item" style="margin-bottom: 0px;">
  31.                   <div class="layui-input-inline" style="width: 120px;">
  32.                      <input type="text" id="color" name="color" placeholder="请选择颜色" class="layui-input" >
  33.                   </div>
  34.                   <div class="layui-inline" style="left: -11px;">
  35.                      <div id="color-form"></div>
  36.                   </div>
  37.                </div>
  38.             </td>
  39.          </tr>
  40.          <tr>
  41.             <td>字体加粗：</td>
  42.             <td>
  43.                <input type="checkbox" id="strong" name="strong"  style="zoom:120%;"/>
  44.             </td>
  45.          </tr>
  46.          <tr>
  47.             <td>排列序号：</td>
  48.             <td><input type="text" id="sort" name="sort" class="layui-input" style="width: 100px;display: inline;"/>&nbsp;&nbsp;<span>(根据数值从小到大排序)</span></td>
  49.          </tr>
  50.          <tr>
  51.             <td><button class="layui-btn" onclick="submitData();return false;">提交</button></td>
  52.             <td><font id="errorInfo" color="red"></font></td>
  53.          </tr>
  54.       </table>
  55.    </form>
  56. </div>
  57. <script src="/static/layui/layui.js"></script>
  58. <script src="/static/js/jquery.js"></script>
  59. <script src="/static/js/common.js"></script>
  60. <script type="text/javascript">
  61.  
  62.     layui.use(['colorpicker','form'], function(){
  63.       var colorpicker = layui.colorpicker;
  64.         var form = layui.form;
  65.  
  66.         colorpicker.render({
  67.             elem: '#color-form'
  68.             ,color: '#000000'
  69.             ,done: function(color){
  70.                 $('#color').val(color);
  71.             }
  72.         });
  73.     });
  74.  
  75.    function submitData(){
  76.       var name=$("#name").val().trim();
  77.       var url=$("#url").val().trim();
  78.         var color=$("#color").val().trim();
  79.       var sort=$("#sort").val().trim();
  80.       if(name=="") {
  81.    　　　　     　　 $("#errorInfo").text("请输入菜单名称！");
  82.            $("#name").focus();
  83.    　　　　　　      return false;
  84.    　　　}
  85.       if(url=="") {
  86.    　　　　     　　 $("#errorInfo").text("请输入菜单地址！");
  87.            $("#url").focus();
  88.    　　　　　　      return false;
  89.    　　　}
  90.       if(sort=="") {
  91.    　　　　     　　 $("#errorInfo").text("请输入排列序号！");
  92.            $("#sort").focus();
  93.    　　　　　　      return false;
  94.    　　　}
  95.    　　　if (!(/(^[1-9]\d*$)/.test(sort))) {
  96.    　　　　　　$("#errorInfo").text("排列序号必须是正整数！");
  97.            $("#sort").focus();
  98.    　　　　　　return false;
  99.    　　  }
  100.       var id=getQueryVariable("id");
  101.       if(id){
  102.          $.post("/admin/menu/save",{id:id,name:name,url:url,sort:sort,color:color,strong:$("#strong").is(':checked')},function(result){
  103.            if(result.success){
  104.                   layer.alert('修改成功！',function () {
  105.                       parent.reloadPage();
  106.                   });
  107.            }else{
  108.               $("#errorInfo").text(result.errorInfo);
  109.            }
  110.         },"json");
  111.       }else{
  112.          $.post("/admin/menu/save",{name:name,url:url,sort:sort,color:color,strong:$("#strong").is(':checked')},function(result){
  113.               if(result.success){
  114.                       layer.alert('添加成功！',function () {
  115.                           parent.reloadPage();
  116.                       });
  117.               }else{
  118.                  $("#errorInfo").text(result.errorInfo);
  119.               }
  120.            },"json");
  121.       }
  122.    }
  123.  
  124.  
  125.  
  126.    function getQueryVariable(variable){
  127.           var query = window.location.search.substring(1);
  128.           var vars = query.split("&");
  129.           for (var i=0;i<vars.length;i++) {
  130.                   var pair = vars[i].split("=");
  131.                   if(pair[0] == variable){return pair[1];}
  132.           }
  133.           return(false);
  134.    }
  135.  
  136.    $(function(){
  137.    　　
  138.       var id=getQueryVariable("id");
  139.  
  140.       if(id){
  141.          $.post("/admin/menu/findById",{id:id},function(result){
  142.               if(result.success){
  143.                  var menu=result.menu;
  144.                  $("#name").val(menu.name);
  145.                  $("#url").val(menu.url);
  146.                       $("#color").val(menu.color);
  147.                       $("#strong").attr("checked",menu.strong);
  148.                  $("#sort").val(menu.sort);
  149.               }else{
  150.                       layer.alert('服务器加载有问题，请联系管理员！');
  151.               }
  152.            },"json");
  153.       }else{
  154.           $("#color").val("#000000");
  155.       }
  156.    });
  157.  
  158.  
  159. </script>
  160. </body>
  161. </html>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号