Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 02.账户列表展示

原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-list1.html
更多教程:光束云 - 免费课程

账户列表展示

序号 文内章节 视频
1 修改ManagerController -
2 修改manager_list.jsp -
3 页面效果 -
4 实例源码 -

请参照如上章节导航进行阅读

1.修改ManagerController

参照 AdminLTE-3.0.2/pages/tables/simple.html 简单表格功能,改造我们的列表。

修改 list 方法,代码如下:

@RequestMapping(value = "list", method = RequestMethod.GET)
public String list(Model model) {
    List<AuthManager> authManagers = authManagerService.selectAll();
    model.addAttribute("authManagers", authManagers);
    System.out.println("--------------------------------------------------");
    System.out.println(authManagers);
    System.out.println("--------------------------------------------------");
    return "auth/manager_list";
}

2.修改manager_list.jsp

修改 manager_list.jsp 文件,将数据展示到页面上,代码如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>查询列表 - 后台账户 | IoT-Admin</title>
    <jsp:include page="../includes/resources_header.jsp" />
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

    <jsp:include page="../includes/layout_header.jsp" />

    <jsp:include page="../includes/layout_left.jsp" />

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">查询列表</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">后台账户</a></li>
                            <li class="breadcrumb-item active">查询列表</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col">

                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">
                                    <div class="btn-group">
                                        <a href="/auth/manager/add" type="button" class="btn btn-primary">新增</a>
                                        <button type="button" class="btn btn-default">更多...</button>
                                        <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                            <span class="sr-only">Toggle Dropdown</span>
                                            <div class="dropdown-menu" role="menu">
                                                <a class="dropdown-item" href="#">批量锁定</a>
                                                <a class="dropdown-item" href="#">批量解锁</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">批量删除</a>
                                            </div>
                                        </button>
                                    </div>
                                </div>

                                <div class="card-tools">
                                    <div class="btn-group">
                                        <a href="/auth/manager/list" type="button" class="btn btn-default"><i class="fas fa-redo"></i></a>
                                        <button type="button" class="btn btn-default"><i class="fas fa-print"></i></button>
                                        <button type="button" class="btn btn-default"><i class="fas fa-download"></i></button>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>角色</th>
                                        <th>状态</th>
                                        <th>更新时间</th>
                                        <th width="120px" align="center">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${authManagers}" var="authManager">
                                        <tr>
                                            <td>${authManager.id}</td>
                                            <td>${authManager.userName}</td>
                                            <td>${authManager.roles}</td>
                                            <td>${authManager.status}</td>
                                            <td><fmt:formatDate value="${authManager.updated}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a href="#" type="button" class="btn btn-default btn-sm"><i class="fas fa-eye"></i></a>
                                                    <a href="#" type="button" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                                                    <a href="#" type="button" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <jsp:include page="../includes/layout_footer.jsp" />
</div>
<!-- ./wrapper -->
<jsp:include page="../includes/resources_body.jsp" />

</body>
</html>

3.页面效果

重启 Tomcat 运行,页面效果如下:

Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 02.账户列表展示

4.实例源码

实例源码已经托管到如下地址:


上一篇:使用include

下一篇:新增账户


如果对课程内容感兴趣,可以扫码关注我们的 公众号QQ群,及时关注我们的课程更新

Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 02.账户列表展示
Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 02.账户列表展示

上一篇:asp.net发送E-mail


下一篇:带你读《计算机组成与设计:硬件/软件接口(英文版原书第5版RISC-V版)》之一:Computer Abstractions and Technology