bootstrap布局（三）—后台布局实例（根据权限显示不同菜单）

最新推荐文章于 2024-07-23 19:14:21 发布

鲸鱼姐

最新推荐文章于 2024-07-23 19:14:21 发布

阅读量6k

点赞数 1

分类专栏： springboot bootstrap mybatis mysql 文章标签：菜单控制

本文链接：https://blog.csdn.net/zhaolulu916/article/details/94343695

版权

springboot 同时被 3 个专栏收录

57 篇文章 4 订阅

订阅专栏

bootstrap

42 篇文章 7 订阅

订阅专栏

mysql

17 篇文章 0 订阅

订阅专栏

一效果如下，不同用户登陆看到的菜单不同。本文是在bootstrap布局（二）的基础上增加的功能。

管理员用户id是4，地址栏输入：localhost:8090/sysmenu/4

普通用户id是6，地址栏输入：localhost:8090/sysmenu/6

平台搭建如下：

二数据库设计

1. t_menu设计如下：

2.t_role_menu设计如下：

3.t_role_user设计如下：

4.t_user设计如下：

三 html 代码

1.mainPage.html 主框架页面，「核心功能」：单击左侧菜单，右侧显示相应的页面，并激活左侧菜单。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Dashboard Template for Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a class="icon-bar" href="#">mylastday系统</a>
                    </li>
                    <li><a href="#">菜单1</a>
                    </li>
                    <li><a href="#">菜单2</a>
                    </li>
                    <li><a href="#">菜单3</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a>欢迎您,admin</a>
                    </li>
                    <li><a href="#">安全退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-2" id="menulist">
                <a href="#"  class="list-group-item active" th:onclick="loadPage('firstPage')"><span>首页</span></a>
                <a href="#"  class="list-group-item"  th:each="firstMenu:${session.menuList}" th:onclick="loadPage([[${firstMenu.href}]])">
                    <span th:text="${firstMenu.name}">菜单</span>
                </a>
            </div>
            <div class="col-sm-10" id="mainbody" >
                <h1>欢迎使用Web系统</h1>
            </div>
        </div>
    </div>

    <footer class="footer navbar-fixed-bottom ">
        <div class="container">
            <p class="text-center">
                2019 &copy; mylastday.
            </p>
        </div>
    </footer>


</body>
<script>
     //激活菜单函数
     $(document).ready(function () {
            $('#menulist> a').click(function (e) {

                $('#menulist> a').removeClass('active');
                $(this).addClass('active');
            });
        });
      //单击左侧菜单，右边显示相应的页面
       function loadPage(url){
		$.get(url,function(data,status){
			$("#mainbody").html(data);
		});

		}
</script>
</html>

2.firstPage.html 登陆进去后的第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎来到首页</h1>
</body>
</html>

四 java代码

1.mainController.java

@Controller
public class MainController {


    @Autowired
    MenuService menuService;

    @Autowired
    UserMapper userMapper;

    @GetMapping("/sysmenu/{userId}")
    public String  sysmenu(Model model, HttpSession session, @PathVariable("userId") Integer userId){
        User user=userMapper.getUserById(userId);
        List<Menu> menuList=menuService.getMenusByHrId(userId);
        model.addAttribute("userlogin",user);
        session.setAttribute("menuList",menuList);
        return "redirect:/index";
    }

    @RequestMapping("firstPage")
    public String getfirstPage(){
        return "admin/firstPage";
    }


    @GetMapping("index")
    public String index()
    {
        return "admin/mainPage";
    }
}

2.UserController.java 和RoleController.java,MenuController.java类似，本处只举例User说明。

@Controller
public class UserController {

    @Autowired
    UserMapper userMapper;
    /**
     * 跳转到用户列表页面
     *
     * @param model 用户设值返回页面
     * @return
     */

    @GetMapping("users")
    public String getAllUsers(Model model)
    {
        List<User> userList=userMapper.getALLUsers();
        model.addAttribute("userList", userList);

        /** 往前端 Thymeleaf 模板引擎时，开头不要加 "/" ，因为它默认配置的前缀就是：
         * spring.thymeleaf.prefix=classpath:/templates/
         */
        System.out.println("findAllUsers");
        return "user/userList";
    }
    \\.....其他代码未粘贴，可参考之前的增删改查
}

3.UserMapper.java和RoleMapper.java类似，本处只举例说明。

@Mapper
public interface UserMapper {
    @Select("select * from t_user where id = #{id}")
    public User getUserById(Integer id);


    @Options(useGeneratedKeys = true,keyProperty = "id") //加入自增主键
    @Insert("insert into t_user(username,password,employeeNum,departmentId) values(#{username},#{password},#{employeeNum},#{departmentId})")
    public int insertUser(User user);

    @Delete("delete from t_user where id=#{id}")
    public int deleteById(Integer id);

    @Update("update t_user set username=#{username},password=#{password} where id=#{id}")
    public int updateUser(User user);

    @Select("select * from t_user")
    public List<User> getALLUsers();

    @Select("select u.*,r.rolename from t_user u left join t_role_user ru on u.id=ru.user_id left join t_role r on ru.role_id=r.id where username=#{username}")
    public List<Role> findByUserName(String username);
}

4.MenuMapper.java，本例重点使用

@Mapper
public interface MenuMapper {

    @Select("select t_menu.* from t_role_menu, t_menu,t_role_user where t_role_menu.menu_Id = t_menu.id and t_role_user.role_Id=t_role_menu.role_Id and t_role_user.user_Id=#{userId}")
    public List<Menu> listMenuByUserId(Integer userId);

    @Select("select * from t_menu")
    public List<Menu>  getAllMenus();
}

5.MenuService.java 为了简化，本例只有menu创建了serivce

@Service
public class MenuService {

    @Autowired
    MenuMapper menuMapper;
    public List<Menu> getMenusByHrId(Integer userId){
        return menuMapper.listMenuByUserId(userId);
    }

    public List<Menu>  getAllMenus(){return menuMapper.getAllMenus();}
}

5.User.java

public class User {
    private Integer id;
    private String  username;
    private String password;
    private String employeeNum;
    private Integer departmentId;
    //get,set函数省略
}

五.数据库配置，本例数据库名称是 mybatis

spring:
  datasource:
    username: root
    password: 12345678
    url: jdbc:mysql://localhost:3306/mybatis?serverTimezone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
server:
  port: 8090

mybatis:
  configuration:
    #开启驼峰命名转换
    map-underscore-to-camel-case: true

六重点

1. 菜单加载，loadPage的参数写法[[${firstMenu.href}]]，另外<a>不能给href设置真实地址。

2. 菜单激活

$(document).ready(function () {
$('#menulist> a').click(function (e) {

$('#menulist> a').removeClass('active');
$(this).addClass('active');
});
});