Question

今天的 《30 天学习 30 种新技术》 挑战，我决定使用 Spring 框架 、 MongoDB 和 AngularJS 开发一个单页面应用。我很熟悉 Spring 和 MongoDB，但是我没用配合 Spring 使用过 AngularJS。今天我们将开发一个社交化的书签应用，类似我们几天前用 EmberJS 开发的那个 。我在第二天介绍了 AngularJS 的基本知识，请参阅我的 文章 获取更多信息。本文使用最新版的 Spring 框架，即 3.2.5.RELEASE ，我们将不使用 XML（连 web.xml 也不用）。我们将通过 Spring 的 annotation 支持来配置一切。我们将使用 Spring MVC 来创建一个 REST 后端。同时将 AngularJS 作为客户端的 MVC 框架来开发应用的前端。

应用

我们将开发一个社交化书签应用，允许用户提交和分享链接。你可以在 这里 查看这个应用。这个应用可以做到：

• 当用户访问 / 时，他会看到以提交时间排序的报道列表。

  

• 当用户访问某个书签时，例如 #/stories/528b9a8ce4b0da0473622359 ，用户会看到关于这个报道的信息，例如是谁提交的，何时提交的，以及文章的摘要。AngularJS 将发送一个 REST 化的 GET 请求（ /api/v1/stories/528b9a8ce4b0da0473622359 ) 来获取全文。

  

• 最后，当用户通过 #/stories/new 提交新报道时，会向 REST 后端发起一个 POST 请求，报道会被保存在 MongoDB 数据库。用户只需填写报道的 URL。应用将使用我们在 第 16 天 开发的 Goose Extractor RESTful API 获取标题、主要图片和文章摘要，

  

前提

1. 基本的 Java 知识。安装最新的 JDK。你可以安装 OpenJDK 7 和 Oracle JDK 7 。OpenShift 支持 OpenJDK6 和 7。
2. 基本的 Spring 知识。
3. 注册一个 OpenShift 账号 。注册是完全免费的，Red Hat 给每个用户三枚免费的 Gear,可以用 Gear 运行你的应用。在写作此文的时候，每个用户能免费使用总共 1.5 GB 内存和 3 GB 硬盘空间。
4. 安装 rhc 客户端工具 。 rhc 是 ruby gem，因此你的机子上需要装有 ruby 1.8.7 以上版本。 只需输入 sudo gem install rhc 即可安装 rhc 。如果你已经安装过了，确保是最新版。运行 sudo gem update rhc 即可升级。关于配置 rhc 命令行工具的详细信息，请参考： https://openshift.redhat.com/community/developers/rhc-client-tools-install
5. 使用 rhc 的 setup 命令配置你的 OpenShift 账号。这个命令会帮助你创建一个命名空间，同时将你的 ssh 公钥上传至 OpenShift 服务器。

Github 仓库

今天的示例应用的代码可从 github 取得。

第一步 创建 Tomcat 7 应用

创建新应用，使用 Tomcat 7 和 MongoDB

rhc create-app getbookmarks tomcat-7 mongodb-2

这会为我们创建一个应用容器 - gear，然后设置公开的 DNS，创建私有 git 仓库，最后利用你的 Github 仓库中的代码来部署应用。应用可以通过 http://getbookmarks-{domain-name}.rhcloud.com/ 访问。用你自己的 OpenShift 域名替换 {domain-name} （域名有时也被称为命名空间）。

第二步 删除模板代码

接着我们删除 OpenShift 创建的模板代码

cd getbookmarks
git rm -rf src/main/webapp/*.jsp src/main/webapp/index.html src/main/webapp/images src/main/webapp/WEB-INF/web.xml  
git commit -am "deleted template files"

请注意我们同时也删除了 web.xml 。

第三步 更新 pom.xml

用以下代码替换 pom.xml 的内容

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>getbookmarks</groupId>
  <artifactId>getbookmarks</artifactId>
  <packaging>war</packaging>
  <version>1.0</version>
  <name>getbookmarks</name>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>3.2.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>3.2.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework.data</groupId>
      <artifactId>spring-data-mongodb</artifactId>
      <version>1.3.2.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-mapper-asl</artifactId>
      <version>1.9.13</version>
    </dependency>


    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

  </dependencies>
  <profiles>
    <profile>

      <id>openshift</id>
      <build>
        <finalName>getbookmarks</finalName>
        <plugins>
          <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.4</version>
  `           <configuration>
              <failOnMissingWebXml>false</failOnMissingWebXml>
              <outputDirectory>webapps</outputDirectory>
              <warName>ROOT</warName>
            </configuration>
          </plugin>
        </plugins>
      </build>
    </profile>
  </profiles>

</project>

上述 pom.xml 中：

1. 我们为 spring-webmvc、spring-mongodb、jackson 和最新的 servlet api 添加了 Maven 依赖。
2. 项目使用 JDK 7 代替 JDK 6。
3. 使用最新的 Maven 的 war 插件。为了避免由于 web.xml 不存在导致的构建错误，我们添加了一个配置选项。

修改之后，别忘了右击 Maven > Update Project 来更新 maven 项目。

第四步 编写 WebMvcConfig 和 AppConfig 类

创建 com.getbookmarks.config 包和 WebMvcConfig 类。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.json.MappingJacksonJsonView;

@EnableWebMvc
@ComponentScan(basePackageClasses = StoryResource.class)
@Configuration
public class WebMvcConfig{

}

接下来我们将创建 AppConfig 配置类。Spring MongoDB 有一个仓库概念，你在其中实现接口，然后 Spring 会生成相应的代理类。这使得编写仓库类非常容易，也节省了大量的样板代码。Spring MongoDB 允许我们通过 @EnableMongoRepositories annotation 声明激活 Mongo 仓库。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.authentication.UserCredentials;
import org.springframework.data.mongodb.MongoDbFactory;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.SimpleMongoDbFactory;
import org.springframework.data.mongodb.repository.config.EnableMongoRepositories;

import com.getbookmarks.repository.StoryRepository;
import com.mongodb.Mongo;

@Configuration
@EnableMongoRepositories(basePackageClasses = StoryRepository.class)
public class ApplicationConfig {

  @Bean
  public MongoTemplate mongoTemplate() throws Exception {
    String openshiftMongoDbHost = System.getenv("OPENSHIFT_MONGODB_DB_HOST");
  `   int openshiftMongoDbPort = Integer.parseInt(System.getenv("OPENSHIFT_MONGODB_DB_PORT"));
    String username = System.getenv("OPENSHIFT_MONGODB_DB_USERNAME");
    String password = System.getenv("OPENSHIFT_MONGODB_DB_PASSWORD");
    Mongo mongo = new Mongo(openshiftMongoDbHost, openshiftMongoDbPort);
    UserCredentials userCredentials = new UserCredentials(username, password);
    String databaseName = System.getenv("OPENSHIFT_APP_NAME");
    MongoDbFactory mongoDbFactory = new SimpleMongoDbFactory(mongo, databaseName, userCredentials);
    MongoTemplate mongoTemplate = new MongoTemplate(mongoDbFactory);
    return mongoTemplate;
  }

}

第五步 编写 GetBookmarksWebApplicationInitializer 类

Servlet 3.0 下，web.xml 是可选的。通常，我们在 web.xml 中配置 Spring WebMVC 调度器，不过从 Spring 3.1 开始，我们可以使用 WebApplicationInitializer 以编程方式配置了。Spring 提供了 ServletContainerInitializer 接口的一个实现 SpringServletContainerInitializer 。 SpringServletContainerInitializer 类将任务委派给你提供的 org.springframework.web.WebApplicationInitializer 实现。你只需实现一个方法 WebApplicationInitializer#onStartup(ServletContext) ，传递需要初始化的 ServletContext。

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration.Dynamic;

import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;

public class GetBookmarksWebApplicationInitializer implements WebApplicationInitializer {

  @Override
  public void onStartup(ServletContext servletContext) throws ServletException {
    AnnotationConfigWebApplicationContext webApplicationContext = new AnnotationConfigWebApplicationContext();
    webApplicationContext.register(ApplicationConfig.class, WebMvcConfig.class);

    Dynamic dynamc = servletContext.addServlet("dispatcherServlet", new DispatcherServlet(webApplicationContext));
    dynamc.addMapping("/api/v1/*");
    dynamc.setLoadOnStartup(1);
  }

}

第六步 创建 Story domain 类

本应用中，我们只有一个 Story domain 类。

@Document(collection = "stories")
public class Story {

  @Id
  private String id;

  private String title;

  private String text;

  private String url;

  private String fullname;

  private final Date submittedOn = new Date();

  private String image;

  public Story() {
  }

// 为了行文简洁，移除了 Getter 和 Setter

以上代码中，值得注意的有两处：

1. @Document annotation 指明了将在 MongoDB 中持续化的 domain 对象。 stories 指明了将在 MongoDB 中创建的 collection 名。
2. @Id 标记此字段为 Id，相应的字段会由 MongoDB 自动生成。

第七步 创建 StoryRepository

正如前面所说，。Spring MongoDB 有一个仓库概念，你在其中实现接口，然后 Spring 会生成相应的代理类。让我们创建如下所示的 StoryRepository.

import java.util.List;

import org.springframework.data.repository.CrudRepository;
import org.springframework.stereotype.Repository;

import com.getbookmarks.domain.Story;

@Repository
public interface StoryRepository extends CrudRepository<Story, String> {

  public List<Story> findAll();
}

上面的代码中值得注意的是：

1. StoryRepository 接口扩展了 CrudRepository 接口，CrudRepository 接口定义了 CRUD、finder 方法。因此 Spring 生成的代理将具备这些方法。
2. @Repository 是一个特殊的 @Component annotation，表明这个类是一个仓库或 DAO 类。配合 PersistenceExceptionTranslationPostProcessor 使用时，有 @epository 的类可以被 Spring 的 DataAccessException 转换。

第八步 编写 StoryResource

接着，我们将编写执行创建和读取报道操作的 REST JSON web 服务。我们创建一个 Spring MVC 控制器，包含下面的方法：

@Controller
@RequestMapping("/stories")
public class StoryResource {

  private StoryRepository storyRepository;

  @Autowired
  public StoryResource(StoryRepository storyRepository) {
    this.storyRepository = storyRepository;
  }

  @RequestMapping(consumes = MediaType.APPLICATION_JSON_VALUE)
  @ResponseBody
  public ResponseEntity<Void> submitStory(@RequestBody Story story) {
    Story storyWithExtractedInformation = decorateWithInformation(story);
    storyRepository.save(storyWithExtractedInformation);
    ResponseEntity<Void> responseEntity = new ResponseEntity<>(HttpStatus.CREATED);
    return responseEntity;
  }

  @RequestMapping(produces = MediaType.APPLICATION_JSON_VALUE)
  @ResponseBody
  public List<Story> allStories() {
    return storyRepository.findAll();
  }

  @RequestMapping(value = "/{storyId}", produces = MediaType.APPLICATION_JSON_VALUE)
  @ResponseBody
  public Story showStory(@PathVariable("storyId") String storyId) {
    Story story = storyRepository.findOne(storyId);
    if (story == null) {
      throw new StoryNotFoundException(storyId);
    }
    return story;
  }

  private Story decorateWithInformation(Story story) {
    String url = story.getUrl();
    RestTemplate restTemplate = new RestTemplate();
    ResponseEntity<Story> forEntity = restTemplate.getForEntity(
        "http://gooseextractor-t20.rhcloud.com/api/v1/extract?url=" + url, Story.class);
    if (forEntity.hasBody()) {
      return new Story(story, forEntity.getBody());
    }
    return story;

  }

}

第九步 配置 AngularJS 和 Twitter Bootstrap

从官网下载最新版的 AngularJS 和 Bootstrap 。或者，你可以从 本项目的 github 仓库 复制过来。

第十步 创建 index.html

现在我们要编写应用的页面

<!DOCTYPE html>
<html ng-app="getbookmarks">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="css/bootstrap.css"/>
  <link rel="stylesheet" href="css/toastr.css"/>
  <style>
    body {
      padding-top: 60px;
    }
  </style>
  <title>GetBookmarks : Submit Story</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="#">GetBookmarks</a>

    </div>
  </div>
</div>

<div class="container" ng-view>

</div>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/toastr.js"></script>
<script src="js/app.js"></script>
</body>
</html>

在以上展示的 html 代码中：

1. 我们导入了需要的库。我们的应用代码在 app.js 中。
2. 在 Angular 中，我们使用 ng-app 指令定义项目的作用域。在上面的代码中，我们在 html 元素中加了 ng-app ，实际上我们可以在任何元素中使用。在 html 元素中使用 ng-app 指令，意味着 AngularJS 在整个 index.html 中可用。 ng-app 指令可以指定一个名称。这个名称是模块的名称。我使用 getbookmarks 作为该应用的模块名。
3. index.html 中使用了 ng-view 指令。该指令渲染与 index.html 中的路由相应的模板。所以，每次你访问一个路由，只有 ng-view 区域发生改变。

第十一步 编写 AngularJS 代码

app.js 中包含所有的应用相关代码。定义了所有的应用路由。在以下代码中，我们将定义三个路由，以及相应的 Angular 控制器。

angular.module("getbookmarks.services", ["ngResource"]).
  factory('Story', function ($resource) {
    var Story = $resource('/api/v1/stories/:storyId', {storyId: '@id'});
    Story.prototype.isNew = function(){
      return (typeof(this.id) === 'undefined');
    }
    return Story;
  });

angular.module("getbookmarks", ["getbookmarks.services"]).
  ` config(function ($routeProvider) {
    $routeProvider
      .when('/', {templateUrl: 'views/stories/list.html', controller: StoryListController})
      .when('/stories/new', {templateUrl: 'views/stories/create.html', controller: StoryCreateController})
      .when('/stories/:storyId', {templateUrl: 'views/stories/detail.html', controller: StoryDetailController});
  });

function StoryListController($scope, Story) {
  $scope.stories = Story.query();

}

function StoryCreateController($scope, $routeParams, $location, Story) {

  $scope.story = new Story();

  $scope.save = function () {
    $scope.story.$save(function (story, headers) {
      toastr.success("Submitted New Story");
      $location.path('/');
    });
  };
}


function StoryDetailController($scope, $routeParams, $location, Story) {
  var storyId = $routeParams.storyId;

  $scope.story = Story.get({storyId: storyId});

}

第十一步 部署代码

最后，提交代码，推送到应用 gear.

git add .
git commit -am "application code"
git push

这就是今天的内容。欢迎反馈。