2.5 完整的程序

在前面的章节中我们学会了构建一个最简单的Blade程序，这节来做一个相对完整的较为简单的Web程序。

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

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

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

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

简单明了，佩服我自己 23333

第一步，加载配置

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

  1. app.username=hello@gmail.com
  2. app.password=blade123

配置加好了，怎么读取呢，头大！！！哈哈，在blade中读取配置的方式非常简单，因为 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 子包中。

  1. @Path
  2. public class AuthController {
  4.     @GetRoute("index")
  5.     public String index() {
  6.         return "index.html";
  7.     }
  9.     @GetRoute("login")
  10.     public String login() {
  11.         return "login.html";
  12.     }
  14.     @PostRoute("login")
  15.     public String doLogin(User user, Request request, Response response) {
  17.         if (StringKit.isBlank(user.getUsername())) {
  18.             request.attribute("error", "用户名不能为空");
  19.             return "index.html";
  20.         }
  22.         if (StringKit.isBlank(user.getPassword())) {
  23.             request.attribute("error", "用户名不能为空");
  24.             return "login.html";
  25.         }
  27.         if (!Const.USERNAME.equalsIgnoreCase(user.getUsername()) ||
  28.                 !Const.PASSWORD.equalsIgnoreCase(user.getPassword())) {
  30.             request.attribute("error", "用户名或密码错误");
  31.             return "login.html";
  32.         }
  34.         request.session().attribute(Const.LOGIN_SESSION_KEY, user.getUsername());
  36.         response.redirect("/index");
  38.         return null;
  39.     }
  41.     @GetRoute("logout")
  42.     public void logout(Session session, Response response) {
  43.         session.removeAttribute(Const.LOGIN_SESSION_KEY);
  44.         response.redirect("/login");
  45.     }
  47. }

代码逻辑也非常简单，登陆成功后将用户名存储在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">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>登陆页面</title>
  10.     <!-- Bootstrap core CSS -->
  11.     <link href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  13.     <!-- Custom styles for this template -->
  14.     <link href="/static/css/signin.css" rel="stylesheet">
  16.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  17.     <!--[if lt IE 9]>
  18.     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  19.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  20.     <![endif]-->
  21. </head>
  23. <body>
  25. <div class="container">
  27.     <form class="form-signin" method="post" action="/login">
  28.         <h2 class="form-signin-heading">来吧客官 :)</h2>
  29.         <label for="inputEmail" class="sr-only">邮箱</label>
  30.         <input type="email" name="username" class="form-control" placeholder="请输入登陆邮箱" required autofocus>
  31.         <label class="sr-only">Password</label>
  32.         <input type="password" name="password" class="form-control" placeholder="请输入密码" required/>
  33.         <p style="color: red">${error}</p>
  34.         <button class="btn btn-lg btn-primary btn-block" type="submit">登 陆</button>
  35.     </form>
  36. </div>
  38. </body>
  39. </html>

刚好复习一下前面学习的 webjars 将bootstrap的css引入进来，登陆页面是这个样子:

2.5 完整的程序 - 图1

然后编写一个 index.html 页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登陆成功</title>
  6. </head>
  7. <body>
  9. <h1>${loginuser} 大兄弟，你获得力量了！！</h1>
  11. <a href="/logout">我要注销</a>
  13. </body>
  14. </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中是否有登陆状态，如果没有则跳转到登陆页面。

  1. public class Const {
  3.     public static String USERNAME;
  4.     public static String PASSWORD;
  6.     public static final String LOGIN_SESSION_KEY = "loginuser";
  8. }
  10. public class User {
  12.     private String username;
  13.     private String password;
  15.     public String getUsername() {
  16.         return username;
  17.     }
  19.     public void setUsername(String username) {
  20.         this.username = username;
  21.     }
  23.     public String getPassword() {
  24.         return password;
  25.     }
  27.     public void setPassword(String password) {
  28.         this.password = password;
  29.     }
  30. }

客官，登陆吧

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

2.5 完整的程序 - 图2

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