webflux-用户管理界面

jiezi

6 年前

一个简单的用户管理的 CRUD 已经完成，现在我们需要在页面上展示，方便用户管理。尽管现在已经流行前后分离开发，但是在一些小公司做的项目并不需要前端开发人员，页面也是后端开发在写。所以这次我们使用 thymeleaf 来开发页面。

pom 文件依赖：

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

开启 thymeleaf

spring.thymeleaf.enabled=true

在 resources 目录下创建 templates 和 static 目录，templates 下放你的 html 页面，static 下放你的 css 以及 js。这些目录是 thymeleaf 默认的，如果需要修改成别的目录，可以自行配置。感觉没必要修改了。

去 bootstrap 网站下载生产环境的文件放在 static 目录下，这样我们写页面就不用关心样式。

controller

@Controller
public class Index {@GetMapping("/")
    public String index(){return "index";}
}

页面 首页：

<!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 上一篇中已经写了
页面 用户页面：

<!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">&times;</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>

thymeleaf 语法需要自己去学习掌握，这种前后一起开发的效率不是很高，只适合于简单页面的开发。如果是复杂页面，建议还是使用 vue，react 来开发，这样数据邦定就会比较简单。

跪求关注我的公众号：mike 啥都想搞

webflux-用户管理界面

1 集成 thymeleaf

2 创建资源目录

3 创建首页

4 总结