[译] 第二十二天：用Spring, MongoDB和AngularJS开发单页应用

今天的30天挑战，我决定用Spring框架, MongoDB和AngularJS开发一个单页网页应用。我对Spring和MongoDB很熟悉但是没有AngualrJS和Spring框架一起用过。所以本文就来开发一个网摘程序就像几天前用EmberJS写的一样。在这个系列的第二天我们已经讨论过AngularJS基础知识，详情参考博客。本文我们来讨论最新版本的Spring框架如3.2.5 RELEASE, 不采用XML(甚至没有web.xml). 我们用Spring注释支持来配置所有东西，Spring MVC(同Spring框架一起)用来创建RESTful后端。AngularJS用做客户端MVC框架来开发前端。

程序用例

本文我们开发个网摘程序允许用户发布和分享链接。OpenShift上有在线程序，程序有以下功能。

当用户到程序'/' url, 可以看到保存在程序数据库中的一系列文章列表，后台，AngularJS调用了REST(/api/v1/stories)来获取所有文章。
当用户点击任意文章，如 http://getbookmarks-shekhargulati.rhcloud.com/#/stories/528b9a8ce4b0da0473622359, 他可以看到文章的内容如谁提交的，什么时候提交的，还有文章摘要. AngularJS发出RESTful GET请求(/api/v1/stories/528b9a8ce4b0da0473622359) 来获得完整文章。
最后，用户可以从 http://getbookmarks-shekhargulati.rhcloud.com/#/stories/new 提交新文章，这回向RESTful后端发出POST请求，然后保存文章到MongoDB中，用户只需输入文章的url链接，程序会用之前开发的Goose Ectractor RESTful去获取文章标题，主要图片和摘要。

前提准备

Java基础知识，安装最新的Java Development Kit(JDK), 可以安装OpenJDK 7或者Oracle JDK 7, OpenShift支持OpenJDK 6 和7.
Spring基础知识。
在OpenShift上注册。OpenShift完全免费，红帽给每个用户免费提供了3个Gears来运行程序。目前，这个资源分配合计有每人1.5GB内存，3GB磁盘空间。
在本机安装rhc 客户端工具，rhc是ruby gem包，所以你需要安装1.8.7或以上版本的ruby。安装rhc，输入 sudo gem install rhc. 如果已经安装了，确保是最新的，要更新rhc,输入sudo gem update rhc. 想了解rhc command-line 工具，更多帮助参考 https://www.openshift.com/developers/rhc-client-tools-install.
用rhc setup 命令安装OpenShift. 执行命令可以帮你创建空间，上传ssh 密钥到OpenShift服务器。

Github仓库

今天的demo放在 github: day22-spring-angularjs-demo-app.

第一步：创建Tomcat 7程序

用Tomcat 7和MongoDB cartridge新建程序开始。

$ rhc create-app getbookmarks tomcat-7 mongodb-2

View Code

这会创建一个叫gear的程序容器，安装所需的SELinux策略和cgroup配置，OpenShift也会为你安装一个私有git仓库，克隆到本地，然后它会把DNS传播到网络。可访问 http://getbookmarks-{domain-name}.rhcloud.com/ 查看程序。替换你自己唯一的OpenShift域名(有时也叫命名空间)。

第二步：删除模板代码

接下来删除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"

View Code

注意，那也会删除web.xml.

第三步：更新po.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>

View Code

以上pom.xml:

添加Maven依赖给Spring-webmvc, spring-mongodb, jackson, 和最新 servlet api.
更新项目JDK 6到JDK 7.
更新项目用最新Maven war插件，添加一个配置避免没有web.xml时build出错。

更新好后，确保更新maven项目右击> Maven > Update Project.

第四步：编写WebMvcConfig和AppConfig类

新建包 com.getbookmarks.config 和类WebMvcConfig. 用以下代码替换，这个类会激活Spring Web MVC框架。

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{ 

}

View Code