基于maven的springboot+mybaits实现简单菜单增删改查

1.pom文件

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.4.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>base</groupId> <artifactId>base</artifactId> <version>0.0.1-SNAPSHOT</version> <name>base</name> <description>Demo project for Spring Boot</description> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version> </dependency> <!-- 发送邮件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-mail</artifactId> </dependency> <!-- mysql --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.46</version> </dependency> <!-- 线程池 --> <dependency> <groupId>com.mchange</groupId> <artifactId>c3p0</artifactId> <version>0.9.5.2</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.5</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.29</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.15</version> </dependency> <!-- 热启动 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <!-- redis --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-redis</artifactId> <version>1.4.7.RELEASE</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-cache</artifactId> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.11</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.4</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency> <!-- swagger2 配置 --> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.4.0</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.4.0</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>

2.实体BEAN-Menu

public class Menu { // 菜单id private String id; // 菜单名称 private String name; // 父菜单id private String parentId; // 菜单url private String url; // 菜单图标 private String icon; // 菜单顺序 private int order; // 子菜单 private List<Menu> childMenus; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getParentId() { return parentId; } public void setParentId(String parentId) { this.parentId = parentId; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public int getOrder() { return order; } public void setOrder(int order) { this.order = order; } public List<Menu> getChildMenus() { return childMenus; } public void setChildMenus(List<Menu> childMenus) { this.childMenus = childMenus; } }

3.Dao层

@Mapper public interface MenuMapper { /** * 查找用户的菜单 * * @return */ @Select("SELECT id,NAME,parentId,url,icon FROM jrbac_menu ") List<Menu> queryMenuList(); /** * 删除菜单 */ @Delete(" DELETE FROM jrbac_menu WHERE id = #{id}") void deleteMenu(Integer id); /** * 根据Id获取实体信息 * @param id * @return */ @Select("SELECT * FROM jrbac_menu WHERE id = #{id}") Menu getMenu(Integer id); /** * 更新菜单 * @param menu */ @Update("update jrbac_menu set name=#{name},url=#{url} where id=#{id}") void updateMenu(Menu menu); @Insert("INSERT INTO jrbac_menu (name,url,parentId,icon) VALUES (#{name},#{url},#{parentId},#{icon})") void insertMenu(Menu menu); }

4.service层

public interface MenuService { /** * 查询菜单 * @return */ public List<Menu> queryMenuList(); /** * 删除菜单 */ public void deleteMenu(Integer id); /** * 根据Id获取实体信息 */ public Menu getMenu(Integer id); /** * 更新菜单 * @param menu */ public void updateMenu(Menu menu); /** * 保存菜单 * @param menu */ public void saveMenu(Menu menu); } @Service public class MenuServiceImpl implements MenuService { @Autowired private MenuMapper menuMapper; /** * 查询菜单 * @return */ @Transactional(propagation = Propagation.SUPPORTS) public List<Menu> queryMenuList(){ return menuMapper.queryMenuList(); } @Transactional(propagation = Propagation.SUPPORTS) public void deleteMenu(Integer id){ menuMapper.deleteMenu(id); } @Transactional(propagation = Propagation.SUPPORTS) public Menu getMenu(Integer id){ return menuMapper.getMenu(id); } @Transactional(propagation = Propagation.SUPPORTS) public void updateMenu(Menu menu){ menuMapper.updateMenu(menu); } @Transactional(propagation = Propagation.SUPPORTS) public void saveMenu(Menu menu){menuMapper.insertMenu(menu);} }

5.controller

@RestController public class MenuController { @Autowired private MenuServiceImpl menuServiceImpl; /** * 测试界面 * @return */ @RequestMapping("/test") public ModelAndView test(){ return new ModelAndView("1"); } /** * 首页list集合 * @param session * @return */ @RequestMapping("/index") public ModelAndView MapQueryMenuList(HttpSession session) { Map<String, Object> Map = new HashMap<>(); // 原始的数据 List<Menu> rootMenu=menuServiceImpl.queryMenuList(); // 最后的结果 List<Menu> menuList = new ArrayList<Menu>(); // 先找到所有的一级菜单 for (int i = 0; i < rootMenu.size(); i++) { // 一级菜单没有parentId if (StringUtils.isBlank(rootMenu.get(i).getParentId())) { menuList.add(rootMenu.get(i)); } } // 为一级菜单设置子菜单，getChild是递归调用的 for (Menu menu : menuList) { menu.setChildMenus(getChild(menu.getId(), rootMenu)); } Map.put("menuList",menuList); session.setAttribute("menuList",menuList); return new ModelAndView("index",Map); } /** * 得到分页菜单 * @param currentPage * @return */ @RequestMapping("/menu") public ModelAndView MapQuery(@RequestParam(value = "currentPage", defaultValue = "1") int currentPage){ PageHelper.startPage(currentPage, 10); List<Menu> menuList1=menuServiceImpl.queryMenuList(); PageInfo<Menu> pageInfo = new PageInfo<>( menuList1); Map<String, Object> mm = new HashMap<>(); mm.put("menuList1",menuList1); mm.put("pageInfo", pageInfo); return new ModelAndView("menu",mm); } /** * 递归查找子菜单 * * @param id 当前菜单id * @param rootMenu 要查找的列表 * @return */ private List<Menu> getChild(String id, List<Menu> rootMenu) { // 子菜单 List<Menu> childList = new ArrayList<>(); for (Menu menu : rootMenu) { // 遍历所有节点，将父菜单id与传过来的id比较 if (StringUtils.isNotBlank(menu.getParentId())) { if (menu.getParentId().equals(id)) { childList.add(menu); } } } // 把子菜单的子菜单再循环一遍 for (Menu menu : childList) {// 没有url子菜单还有子菜单 if (StringUtils.isBlank(menu.getUrl())) { // 递归 menu.setChildMenus(getChild(menu.getId(), rootMenu)); } } // 递归退出条件 if (childList.size() == 0) { return null; } return childList; } /** * 删除菜单 * @param id */ @RequestMapping(value = "/deleteMenu", method = RequestMethod.GET) public void deleteMenu(@RequestParam Integer id){ menuServiceImpl.deleteMenu(id); } /** * 根据Id获取实体信息 * @param id * @return */ @RequestMapping("/updateMenu") public Menu getMenu(@RequestParam Integer id){ return menuServiceImpl.getMenu(id); } /** * 更新菜单 * @param id * @param name * @param url */ @RequestMapping("/updateMenu2") public void updateMenu(@RequestParam("id")Integer id, @RequestParam("name")String name, @RequestParam("url")String url){ Menu menu=menuServiceImpl.getMenu(id); menu.setName(name); menu.setUrl(url); menuServiceImpl.updateMenu(menu); } /** * 新增菜单 * @param name * @param url * @param parentId * @param icon */ @RequestMapping("/saveMenu") public void saveMenu(@RequestParam("name")String name, @RequestParam("url")String url, @RequestParam("parentId")String parentId, @RequestParam("icon")String icon){ Menu menu=new Menu(); menu.setName(name); menu.setUrl(url); menu.setParentId(parentId); menu.setIcon(icon); menuServiceImpl.saveMenu(menu); } }

6.显示界面

<script> function go(url){ window.location.href=url; } </script> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <#if menuList??> <#list menuList as menu> <!-- 一级子菜单没有parentId--> <li class="layui-nav-item layui-nav-itemed"> <a href="#"> <i class="${menu.icon } fa-fw"></i> ${menu.name } </a> <#if menu.childMenus??> <dl class="layui-nav-child"> <#list menu.childMenus as secondChild > <dd> <a href="javascript:void(0);" οnclick="go('${secondChild.url}')">${secondChild.name }</a> </dd> <#if secondChild.childMenus??> <#list secondChild.childMenus as third> <a href="${third.url}">${third.name }</a> </#list> </#if> </#list> </dl> </#if> </li> </#list> </#if> </ul> </div>

7.菜单界面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../static/layui/css/layui.css"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <#include "nav.ftl"> <#include "left.ftl"> </div> <div class="layui-body" > <button class="btn btn-primary" οnclick="updateMenu()" data-toggle="modal" data-target="#myModal2"> 新增 </button> <table class="table table-hover table-bordered"> <thead> <tr> <th>id</th> <th>地址名</th> <th>父id</th> <th>超链接</th> <th>图标</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <#list menuList1 as li> <tr> <td>${li.id}</td> <td>${li.name}</td> <#if li.parentId?exists> <td>${li.parentId}</td> <#else ><td>0</td> </#if> <td>${li.url}</td> <#if li.icon?exists> <td>${li.icon}</td> <#else > <td>0</td> </#if> <td><button class="btn btn-primary" οnclick="updateMenu('${li.id}')" data-toggle="modal" data-target="#myModal"> 编辑 </button> <button class="btn btn-danger" οnclick="deleteMenu('${li.id}')">删除</button></a></td> </tr> </#list> </tbody> </table> <div style="margin-left: 450px"> <ul class="pagination"> <li><a href="/menu?currentPage=1">首页</a></li> <li><a href="/menu?currentPage=${pageInfo.pageNum-1}">上一页</a></li> <li><a href="/menu?currentPage=${pageInfo.pageNum+1}">下一页</a></li> <li><a href="/menu?currentPage=${pageInfo.pages}">末页</a></li> </ul> </div> </div> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 修改菜单 </h4> </div> <form role="form" method="post" > <input type="hidden" name="id" id="id"> <div class="form-group"> <p><label>商品名:</label> <input name="name" id="name" type="text" class="form-control"/></p> </div> <div class="form-group"> <label>地址</label> <input name="url" id="url" type="text" class="form-control"/> </div> <button type="submit" class="btn btn-default" οnclick="updateMenu2()">提交</button> </form> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 新增菜单 </h4> </div> <form role="form" method="post" > <div class="form-group"> <p><label>商品名:</label> <input name="name" id="uname" type="text" class="form-control"/></p> </div> <div class="form-group"> <label>地址</label> <input name="url" id="uurl" type="text" class="form-control"/> </div> <div class="form-group"> <p><label>父ID:</label> <input name="parentId" id="parentId" type="text" class="form-control"/></p> </div> <div class="form-group"> <p><label>图标:</label> <input name="icon" id="icon" type="text" class="form-control"/></p> </div> <button type="submit" class="btn btn-default" οnclick="saveMenu()">提交</button> </form> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <script src="../static/layui/layui.js"></script> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script type="text/javascript"> /** * 删除菜单 * @param id */ function deleteMenu(id){ $.ajax({ type: "GET", dataType: "JSON", data:{ id:id }, url: "http://localhost:8088/deleteMenu", success: function (data) { console.log(data); } }); } /** * 根据菜单Id获取菜单数据 */ function updateMenu(id) { $.ajax({ type: "GET", dataType: "JSON", data:{ id:id }, url: "http://localhost:8088/updateMenu", success: function (data) { var id=data.id; var name=data.name; var url=data.url; $("#id").val(id); $("#name").val(name); $("#url").val(url); } }); } /** * 更新菜单 */ function updateMenu2(){ var id=$("#id").val(); var name=$("#name").val(); var url=$("#url").val(); $.ajax({ type: "POST", dataType: "JSON", data:{ id:id, name:name, url:url }, url: "http://localhost:8088/updateMenu2", success: function (data) { console.log(data); } }); } function saveMenu() { var name=$("#uname").val(); var url=$("#uurl").val(); var parentId=$("#parentId").val(); var icon=$("#icon").val(); $.ajax({ type: "POST", dataType: "JSON", data:{ name:name, url:url, parentId:parentId, icon:icon }, url: "http://localhost:8088/saveMenu", success: function (data) { console.log(data); } }); } </script> </body> </html>