原文位址： 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
運作，頁面效果如下：
4.執行個體源碼
執行個體源碼已經托管到如下位址：
- https://github.com/work100-net/training-stage2/tree/master/iot-cloud3 https://github.com/work100-net/training-stage2/tree/master/iot-cloud3
- https://gitee.com/work100-net/training-stage2/tree/master/iot-cloud3 https://gitee.com/work100-net/training-stage2/tree/master/iot-cloud3
上一篇：
使用include下一篇：
新增賬戶如果對課程内容感興趣，可以掃碼關注我們的或公衆号
，及時關注我們的課程更新QQ群
