webflux 用戶管理界面
一個簡單的用戶管理的CRUD已經完成，如今咱們須要在頁面上展現，方便用戶管理。儘管如今已經流行先後分離開發，可是在一些小公司作的項目並不須要前端開發人員，頁面也是後端開發在寫。因此此次咱們使用thymeleaf來開發頁面。
1 集成thymeleaf
pom文件依賴：javascript
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
開啓thymeleafcss
spring.thymeleaf.enabled=true
2 建立資源目錄
在resources目錄下建立templates和static目錄，templates下放你的html頁面，static下放你的css以及js。這些目錄是thymeleaf默認的，若是須要修改爲別的目錄，能夠自行配置。感受不必修改了。html
去bootstrap網站下載生產環境的文件放在static目錄下，這樣咱們寫頁面就不用關心樣式。前端
3 建立首頁
controllervue
@Controller
public class Index {
@GetMapping("/")
public String index(){
return "index";
}
}
頁面 首頁：java
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>歡迎頁面</title>
<link rel="stylesheet" href="/css/bootstrap.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Mike Study</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">實戰課程</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="你想學點啥？">
</div>
<button type="submit" class="btn btn-default">Go</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">上班摸魚</a></li>
<li><a href="#">下班充電</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row">
<div class="jumbotron">
<h1>案例上手 Spring Boot WebFlux!</h1>
<p>本課程是一個系列基礎教程，目標是帶領讀者上手實戰，課程以新版本 Spring Boot 2.0 WebFlux
的核心概念做爲主線。圍繞 Spring Boot 2.0 WebFlux 技術棧的系列教程，目標是帶領讀者瞭解 Spring Boot
2.0 WebFlux 各類特性，並學會使用 Spring Boot 相關技術棧上手開發項目。</p>
<blockquote>
<p>只有不斷地學習才能進步</p>
<footer>
Mike <cite title="Source Title">Liu</cite>
</footer>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<a href="/users"><p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p></a>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
<div class="col-md-3">
<img src="https://img.mukewang.com/55f8d5080001293c06000338-240-135.jpg" alt="..." style="height: 140px; width: 100%; display: block;" class="img-thumbnail">
<p>mongodb開發用戶管理系統<span class="label label-danger">mongodb</span></p>
<p>發佈時間：<i class="glyphicon glyphicon-calendar"></i>2019-01-01</p>
</div>
</div>
</div>
</body>
</html>
用戶的controller上一篇中已經寫了
頁面 用戶頁面：react
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>歡迎頁面</title>
<link rel="stylesheet" href="/css/bootstrap.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Mike Study</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/">首頁</a></li>
<li><a href="#">實戰課程</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="你想學點啥？">
</div>
<button type="submit" class="btn btn-default">Go</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">上班摸魚</a></li>
<li><a href="#">下班充電</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="page-header">
<h1>
使用mongodb存儲數據 <small> 用戶列表</small>
</h1>
<button type="button" data-toggle="modal" data-target="#myModal" onclick="add()" class="btn btn-success right">新增</button>
</div>
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>序號</th>
<th>名稱</th>
<th>性別</th>
<th>工做</th>
<th>電話</th>
<th>地址</th>
<th>編輯</th>
</tr>
</thead>
<tbody id ="tableData">
<tr th:each="u,stat : ${users}">
<td th:text="${u.id}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.sex}"></td>
<td th:text="${u.job}"></td>
<td th:text="${u.phone}"></td>
<td th:text="${u.address}"></td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#myModal" th:onclick="'javascript:editData('+${stat.index}+');'" >修改</button> <a type="button"
class="btn btn-danger" th:href="@{'/user/delete/'+${u.id}}">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- edit Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改用戶信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/user" method="post" id="userFrom">
<input id="userId" type="hidden" >
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名：</label>
<div class="col-sm-10">
<input id="name" name="name" type="text" class="form-control" placeholder="輸入姓名" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">性別：</label>
<div class="col-sm-10">
<input id="sex" name="sex" type="text" class="form-control" placeholder="輸入性別" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">工做：</label>
<div class="col-sm-10">
<input id="job" name="job" type="text" class="form-control" placeholder="輸入工做" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">電話：</label>
<div class="col-sm-10">
<input id="phone" name="phone" type="text" class="form-control" placeholder="輸入電話" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">地址：</label>
<div class="col-sm-10">
<input id="address" name="address" type="text" class="form-control" placeholder="輸入地址" aria-describedby="basic-addon1">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" onclick="sub()">確認</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript">
function editData(index){
$("#userId").val($("#tableData").children("tr").eq(index).children("td").eq(0).text());
$("#userId").attr("name","id");
$("#name").val($("#tableData").children("tr").eq(index).children("td").eq(1).text());
$("#sex").val($("#tableData").children("tr").eq(index).children("td").eq(2).text());
$("#job").val($("#tableData").children("tr").eq(index).children("td").eq(3).text());
$("#phone").val($("#tableData").children("tr").eq(index).children("td").eq(4).text());
$("#address").val($("#tableData").children("tr").eq(index).children("td").eq(5).text());
}
function sub(){
$("#userFrom").submit();
}
function add(){
//刪除id值 讓mogodb本身建立 清除編輯框的值
$("#userId").remove();
$("#name").val("");
$("#sex").val("");
$("#job").val("");
$("#phone").val("");
$("#address").val("");
}
</script>
</body>
</html>
4 總結
thymeleaf 語法須要本身去學習掌握，這種先後一塊兒開發的效率不是很高，只適合於簡單頁面的開發。若是是複雜頁面，建議仍是使用vue，react來開發，這樣數據邦定就會比較簡單。jquery
跪求關注個人公衆號：mike啥都想搞ajax