2.5 完整的程序

    这个程序只有一个登陆的功能，用户名和密码暂时写在配置文件中。

    这样的一个程序大概可以在脑海里浮现，嗯。。有一个登陆页面，一个提交表单的请求，一个登陆成功后的页面。
    还需要一个注销的功能，非常简单的web常用小功能。

    我们梳理一下完成这个功能的思路：

    1. 编写配置文件将用户名密码存储起来
    2. 创建4个路由（index, login[GET], login[POST], logout）
    3. 编写login.html, index.html 页面
    4. 编写登陆逻辑，将登陆成功状态存储在session中
    5. 编写注销逻辑，将登陆状态从session清除
    6. 编写一个webhook，用于拦截没有登陆的用户

    简单明了，佩服我自己 23333

    项目还是继续用之前创建的 ，在 resources 目录下创建一个 app.properties 的配置文件，Blade会在启动的时候加载它，然后我们加入两行配置：

    1. Blade.me().event(EventType.SERVER_STARTED, (e) -> {
    2.     Environment environment = e.blade.environment();
    3.     Const.USERNAME = environment.get("app.username").get();
    4.     Const.PASSWORD = environment.get("app.password").get();
    5. }).start(Application.class);

    这段代码是配置一个启动后执行的事件，将配置文件中的 username 和 password 存储到常量中去。

    虽然项目非常的小，你可以不用创建包，直接写在主类里或者写一个 Controller，为了让大家养成良好的编码习惯，我还是将控制器写在 controller 子包中。

    代码逻辑也非常简单，登陆成功后将用户名存储在session里，注销后跳转到登陆页面；Blade支持将 username，password 通过对象的方式传递到后台中，你也可以选择一个参数一个参数的获取。

    在 resources 目录下创建一个名为 templates 的目录，我们将模板文件放在这里

    login.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    9.     <!-- Bootstrap core CSS -->
    10.     <link href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    12.     <!-- Custom styles for this template -->
    13.     <link href="/static/css/signin.css" rel="stylesheet">
    15.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    16.     <!--[if lt IE 9]>
    17.     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    18.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    19.     <![endif]-->
    20. </head>
    22. <body>
    24. <div class="container">
    26.     <form class="form-signin" method="post" action="/login">
    27.         <label for="inputEmail" class="sr-only">邮箱</label>
    28.         <input type="email" name="username" class="form-control" placeholder="请输入登陆邮箱" required autofocus>
    29.         <label class="sr-only">Password</label>
    31.         <p style="color: red">${error}</p>
    32.         <button class="btn btn-lg btn-primary btn-block" type="submit">登 陆</button>
    33.     </form>
    34. </div>
    36. </body>
    37. </html>

    然后编写一个 index.html 页面

    我们不允许未登录的用户访问 index，那么在blade中最简单的实现方式就是注册一个 before 请求或者实现 webhook，这里我们简单起见写一个 before 请求完成这个功能，逻辑复杂的时候请使用webhook单独去处理。

    1. Blade.me().before("/*", ((request, response) -> {
    2.     String uri = request.uri();
    3.     if("/index".equals(uri)){
    4.         String username = request.session().attribute(Const.LOGIN_SESSION_KEY);
    5.         if (StringKit.isBlank(username)) {
    6.             response.redirect("/login");
    7.             return;
    8.         }
    9.     }
    10. }));

    判断当访问 /index 的时候session中是否有登陆状态，如果没有则跳转到登陆页面。

    当我们输入错误的用户名密码，页面会有提示，输入正确后会是这样：

    点击 后会跳转到登陆页面，本章节的源码在 github。