Spring Boot (三): TODO App

2016-04-03 本文已影响1247人射覆

这一节，我们展示如何通过 Spring Boot 提供 Rest API，并使用 AngularJS 构建界面实现一个极简的 todo 应用。

关于 Rest API 的介绍，可参考 Rest API Tutorial.

提供 TODO REST API

引入 Spring Data JPA 依赖

在 build.gradle 中加入以下依赖:

...
runtime("com.h2database:h2")
compile("org.springframework.boot:spring-boot-starter-data-jpa")
...

Spring Boot 默认支持 H2, HSQLDB, SQLITE等内嵌数据库的支持，只需要发现 classpath 中有对应 jar 包，即可正确配置数据源。

如需要使用其他数据库，可通过 application.properties 进行配置，如:

spring.datasource.url=jdbc:mysql://localhost/demo?useUnicode=true&characterEncoding=utf-8&autoReconnect=true
spring.datasource.username=devuser
spring.datasource.password=devuser
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

关于 Spirng Data JPA，请参考官方指南:

Spring Data JPA - Reference Documentation

编写 Todo.java

package li.fyunli.springboot.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import java.io.Serializable;

/**
 * Created by fyunli on 16/4/2.
 */
@Entity
public class Todo implements Serializable {

    private static final long serialVersionUID = 8277837190593516198L;

    @Id
    @GeneratedValue
    private Long id;
    @Column(length = 255, nullable = false)
    private String content;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

}

编写 TodoRepository.java

package li.fyunli.springboot.repository;

import li.fyunli.springboot.entity.Todo;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

/**
 * Created by fyunli on 16/4/2.
 */
@Repository
public interface TodoRepository extends JpaRepository<Todo, Long> {

}

编写 TodoController.java

package li.fyunli.springboot.controller;

import li.fyunli.springboot.entity.Todo;
import li.fyunli.springboot.repository.TodoRepository;
import org.hibernate.ObjectNotFoundException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

/**
 * Created by fyunli on 16/4/2.
 */
@RestController
@RequestMapping("/todos")
public class TodoController {

    Logger logger = LoggerFactory.getLogger(TodoController.class);

    @Resource
    private TodoRepository repository;

    @RequestMapping(method = RequestMethod.GET)
    public List<Todo> list() {
        return this.repository.findAll();
    }

    @RequestMapping(value = "/{id}", method = RequestMethod.GET)
    public Todo get(@PathVariable Long id) {
        Todo todo = this.repository.findOne(id);
        if (todo == null) {
            throw new ObjectNotFoundException(id, Todo.class.toString());
        }
        return todo;
    }

    @RequestMapping(method = RequestMethod.POST, consumes = {MediaType.APPLICATION_JSON_VALUE})
    public Todo create(@RequestBody Todo entity) {
        logger.debug("create() with body {} of type {}", entity, entity.getClass());
        return this.repository.save(entity);
    }

    @RequestMapping(value = "/{id}", method = RequestMethod.PUT, consumes = {MediaType.APPLICATION_JSON_VALUE})
    public Todo update(@PathVariable Long id, @RequestBody Todo entity) {
        logger.debug("update() of id#{} with body {}", id, entity);
        return this.repository.save(entity);
    }

    @RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
    public void delete(@PathVariable Long id) {
        this.repository.delete(id);
    }

}

启动，查看结果

以下内容使用 postman 进行调试。

列出 todo:

GET http://localhost:8080/todos

list todo

嗯，当前没有 todo，那我们就创建一个吧。

创建之后，list 结果如图：

list todo

创建 todo:

POST http://localhost:8080/todos

输入参数和结果如图：

create todo

查看 id=? todo

GET http://localhost:8080/todos/1

get todo

更新 todo

PUT http://localhost:8080/todos/1

update todo

删除 todo

DELETE http://localhost:8080/todos/1

delete todo

此时，在查询 id=1 的 todo，结果如下：

todo not found

使用 AngularJS 构建页面

创建用户界面

在 src/resources/static 创建 todoapp.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="fyunli">

    <title>Spring Boot - todo</title>

    <!-- Bootstrap core CSS -->
    <link href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body ng-app="myApp">
<div class="container" ng-controller="AppController">
    <div class="page-header">
        <h1>Spring Boot: TODO</h1>
    </div>
    <div class="alert alert-info" role="alert" ng-hide="items && items.length > 0">
        There are no items yet.
    </div>
    <form class="form-horizontal" role="form" ng-submit="addItem(newItem)">
        <div class="form-group" ng-repeat="item in items">
            <div class="checkbox col-xs-9">
                <label>
                    <input type="checkbox" ng-model="item.checked" ng-change="updateItem(item)"/> {{item.content}}
                </label>
            </div>
            <div class="col-xs-3">
                <button class="pull-right btn btn-danger" type="button" title="Delete"
                        ng-click="deleteItem(item)">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </div>
        </div>
        <hr/>
        <div class="input-group">
            <input type="text" class="form-control" ng-model="newItem" placeholder="Enter the content..."/>
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit" ng-disabled="!newItem" title="Add">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </span>
        </div>
    </form>
</div>

<footer class="footer">
    <div class="container">
        <p class="text-muted">&copy;2016 fyunli</p>
    </div>
</footer>

<script src="//cdn.jsdelivr.net/angularjs/1.5.0/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.5.0/angular-resource.min.js"></script>
<script src="//cdn.jsdelivr.net/lodash/4.7.0/lodash.min.js"></script>
<script type="text/javascript" src="./app/app.js"></script>
<script type="text/javascript" src="./app/controllers.js"></script>
<script type="text/javascript" src="./app/services.js"></script>
</body>
</html>

在此，我们通过

<body ng-app="myApp">
<div class="container" ng-controller="AppController">

告知 AngularJS 我们需要启用 myApp 并使用 AppController。

初始化 AngularJS

在 src/resources/static/app 添加 app.js

(function (angular) {
    angular.module("myApp.controllers", []);
    angular.module("myApp.services", []);
    angular.module("myApp", ["ngResource", "myApp.controllers", "myApp.services"]);
}(angular));

在此，我们定义了三个 module: controllers, services, application，注意，application 名字必须和 <body ng-app="myApp"> 保持一致。

并且我们让 appliation 依赖于 ngResource, controllers, services.

创建 resource factory

在 src/resources/static/app 添加 services.js

(function (angular) {
    var ItemFactory = function ($resource) {
        return $resource('/todos/:id', {
            id: '@id'
        }, {
            update: {
                method: "PUT"
            },
            remove: {
                method: "DELETE"
            }
        });
    };

    ItemFactory.$inject = ['$resource'];
    angular.module("myApp.services").factory("Item", ItemFactory);
}(angular));

在此通过 $resource (AngularJS resource framework) 自动引入查询，创建功能，并且声明加入 update, remove 功能。

创建 AngularJS Controller

在 todoapp.html 中我们看到 ng-submit="addItem(newItem)" 等指令，下面我们在 src/resources/static/app 添加 controllers.js 进行定义:

(function (angular) {
    var AppController = function ($scope, Item) {
        Item.query(function (response) {
            $scope.items = response ? response : [];
        });

        $scope.addItem = function (content) {
            new Item({
                content: content,
                checked: false
            }).$save(function (item) {
                $scope.items.push(item);
            });
            $scope.newItem = "";
        };

        $scope.updateItem = function (item) {
            item.$update();
        };

        $scope.deleteItem = function (item) {
            item.$remove(function () {
                $scope.items.splice($scope.items.indexOf(item), 1);
            });
        };
    };

    AppController.$inject = ['$scope', 'Item'];
    angular.module("myApp.controllers").controller("AppController", AppController);
}(angular));

欣赏成果

浏览器打开 http://localhost:8080/todoapp.html，欣赏成果吧：

angularjs

源代码

源代码链接: github