Spring Boot构建简单的微博应用

Spring Boot构建简单的微博应用 由David发表在天码营 

使用Spring Boot可以快速开发一个非常简易的Micro Blog应用。包含微博列表、发表微博、用户登录/登出等功能。

注：有兴趣的同学可以参考一下flaskr。

环境准备

• JDK 1.8
• 文本编辑器或IDE
• Maven 3.0+，如果使用Eclipse或Idea IntelliJ等IDE，Maven是内置的

初始化代码

Spring Initializr是一个生成Spring Boot应用初始代码的工具，在网站上选择需要的功能特性，然后下载的zip包中会添加响应的配置代码，在这里我们选择Web, Thymeleaf, JDBC以及H2四个选项：

• Spring Mvc作为Web框架
• Thymeleaf作为模板引擎
• Spring JDBC连接H2内存数据库（H2仅用在开发测试、而不用于生产环境）

选择Generate Project后会下载得到一个zip包，解压缩后目录结构如下：

~/Downloads  unzip -l microblog-demo.zip
Archive:  microblog-demo.zip
  Length     Date   Time    Name
 --------    ----   ----    ----
        0  08-04-15 12:40   microblog-demo/
        0  08-04-15 12:40   microblog-demo/src/
        0  08-04-15 12:40   microblog-demo/src/main/
        0  08-04-15 12:40   microblog-demo/src/main/java/
        0  08-04-15 12:40   microblog-demo/src/main/java/demo/
        0  08-04-15 12:40   microblog-demo/src/main/java/demo/microblog/
        0  08-04-15 12:40   microblog-demo/src/main/resources/
        0  08-04-15 12:40   microblog-demo/src/main/resources/static/
        0  08-04-15 12:40   microblog-demo/src/main/resources/templates/
        0  08-04-15 12:40   microblog-demo/src/test/
        0  08-04-15 12:40   microblog-demo/src/test/java/
        0  08-04-15 12:40   microblog-demo/src/test/java/demo/
        0  08-04-15 12:40   microblog-demo/src/test/java/demo/microblog/
     1777  08-04-15 12:40   microblog-demo/pom.xml
      332  08-04-15 12:40   microblog-demo/src/main/java/demo/microblog/MicroblogDemoApplication.java
        0  08-04-15 12:40   microblog-demo/src/main/resources/application.properties
      512  08-04-15 12:40   microblog-demo/src/test/java/demo/microblog/MicroblogDemoApplicationTests.java
 --------                   -------
     2621                   17 files

接下来可以根据自己的喜欢，选择在IDE中导入项目，或者直接选用称手的文本编辑器进行开发。

功能与页面分析

根据功能描述，我们需要实现几个页面以及处理用户表单提交数据的POST请求：

• 页面GET请求：首页——包含Micro Bog列表和创建Micro Blog条目的表单
• POST请求：创建Micro Blog
• GET请求：登录(log in)页面，包含用户登录的输入表单
• POST请求：登录
• GET, Post请求：登出(log out)

数据模型与数据库设计

Micro Blog的条目可以简单的用Entry类来抽象：

class Entry {
    public String title;
    public String text;

    public Entry() {
    }

    public Entry(String title, String text) {
        this.title = title;
        this.text = text;
    }
}

为了将数据持久化到关系型数据库，创建src/main/resource/schema.sql：

drop table if exists entries;
create table entries (
  id integer primary key auto_increment,
  title text not null,
  `text` text not null
);

Spring Boot在默认情况下，会加载classpath上的schema.sql并执行，这样在应用启动时数据库中的entries表已经建立好。

登录页面

创建src/main/resources/templates/login.html：

<div class="page">
<h2>Login</h2>

<form method="post">
  <dl>
    <dt>Username:</dt>
    <dd><input type="text" name="username"/></dd>
    <dt>Password:</dt>
    <dd><input type="password" name="password" /></dd>
    <dd><input type="submit" value="Login"/></dd>
  </dl>
</form>
</div>

</body>

处理登录请求：

private static final String LOGGED_IN = "logged_in";

private boolean verify( String username, String password) {
    return "admin".equals(username) && "password".equals(password);
}

@RequestMapping(value = "/login", method = RequestMethod.POST)
public String login(@RequestParam("username") String username, @RequestParam("password") String password, HttpSession session) {
    if (session.getAttribute(LOGGED_IN) != null) {
        return "redirect:/";
    }

    if (!verify(username, password)) {
        return "login";
    }

    session.setAttribute(LOGGED_IN, true);
    return "redirect:/";
}

在获取用户输入的username和password后，需要对其进行验证，这里我们仅仅用了最简单的静态用户名admin和静态密码password，只有完全相等才能够通过验证，在真实的环境中可以编写另外的逻辑——例如获取数据库中的密码进行比对。

如果登录成功，我们会在session中放置一个属性LOGGED_IN作为标志，那么一个优化是如果用户在已经登录的情况下仍然访问/login，那么直接为其跳转到首页。

登出请求

@RequestMapping(value = "/logout", method = { RequestMethod.GET, RequestMethod.POST})
public String logout(HttpSession session) {
    session.removeAttribute(LOGGED_IN);
    return "redirect:/";
}

首页

首页包含两个功能：

• 为用户创建Micro Blog条目提供输入表单
• 展示已经创建（存储于数据库中）的Micro Blog条目列表

从数据库中获取条目

@Autowired
private JdbcTemplate jdbcTemplate;

@RequestMapping(value = "", method = RequestMethod.GET)
public String index(Model model) {
    List<Entry> entries = this.jdbcTemplate.query("select title, text from entries",
            (rs, i) -> new Entry(rs.getString("title"), rs.getString("text")));
    model.addAttribute("entries", entries);
    return "index";
}

JdbcTemplate是Spring JDBC提供的访问数据库的模板类，通过它可以执行SQL语句并将查询结果集映射为Java对象。通过jdbcTemplate.query获取对象列表后，将其放入Spring WebMvc提供的Model中，以便在模板中将其渲染为HTML展示给用户。

页面模板

创建src/main/resources/templates/index.html：

<div class="page">
  <h1>Micro Blog</h1>
  <div class="metanav">
    <a th:unless="${session.logged_in}" href="/login">log in</a>
    <a th:if="${session.logged_in}" href="/logout">log out</a>
  </div>
  <form th:if="${session.logged_in}" method="post" class="add-entry">
    <dl>
      <dt>Title:</dt>
      <dd><input type="text" size="30" name="title"/></dd>
      <dt>Text:</dt>
      <dd><textarea name="text" rows="5" cols="40"></textarea></dd>
      <dd><input type="submit" value="Share"/></dd>
    </dl>
  </form>
  <ul class="entries">
    <li></li>
    <li th:unless="${#lists.isEmpty(entries)}" th:each="entry : ${entries}">
      <h2 th:text="${entry.title}"></h2>
      <p th:text="${entry.text}"></p>
    </li>
    <li th:if="${#lists.isEmpty(entries)}"><em>Unbelievable.  No entries here so far</em></li>
  </ul>
</div>

页面模板包含两部分，首先是一个表单，包含title和text两个<input>用于输入Micro Blog的标题和内容；然后是<ul>展示Micro Blog列表，这里用到的是Thymeleaf模板语言中的th:each迭代条目集合。

注意th:if="${session.logged_in}"的使用，在页面中当用户处于登录状态时，应该显示登出链接以及表单；如果用户没有登录，那么只应该给出一个登录按钮。

创建Micro Blog条目

当然，现在的首页是没有任何内容的，仅仅会显示Unbelievable. No entries here so far，因为我们的数据库中尚未添加任何数据。为了能够获取用户表单的输入数据，必须添加一个@Controller处理表单请求：

@RequestMapping(value = "", method = RequestMethod.POST)
public String create(@RequestParam("title") String title, @RequestParam("text") String text) {
    this.jdbcTemplate.update("insert into entries(title, text) values(?,?)", title, text);

    return "redirect:/";
}

• @RequestParam可以获取表单中的输入，它的作用相当于HttpServletRequest.getParameter(String name)。
• 获得用户输入后，jdbcTemplate.update()方法执行insert语句，将数据存储至数据库中。
• 数据保存完成后，redirect:/跳转回首页，这时刚刚提交的数据已经显示在条目列表中了。

静态资源

为了让页面更加美观、交互性更强，通常需要引入CSS和JavaScript代码。Spring Boot默认将classpath上的static目录serve出去作为静态资源访问目录，例如[http://localhost:8080/css/style.css](http://localhost:8080/css/style.css)会被映射为static/css/style.css并将其内容返回给用户。

在Thymeleaf模板中可以通过th:href引入CSS文件：

<head>
  <title>Microblog based on Spring Boot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />
</head>

运行应用

完成上述配置后，运行应用有两种方法：

• 在IDE中直接运行main方法
• 使用Maven插件：mvn spring-boot:run
• 通过Maven打包应用：maven clean install，运行：java -jar build/libs/${appname}-{version}.jar

在浏览器中访问http://localhost:8080即可看到我们的Micro Blog应用了

更多文章请访问天码营网站