[译] 第二十二天： 用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去获取文章标题，主要图片和摘要。
   

前提准备

1. Java基础知识，安装最新的Java Development      Kit(JDK), 可以安装OpenJDK 7或者Oracle JDK 7, OpenShift支持OpenJDK 6 和7.
2. Spring基础知识。
3. 在OpenShift上注册。OpenShift完全免费，红帽给每个用户免费提供了3个Gears来运行程序。目前，这个资源分配合计有每人1.5GB内存，3GB磁盘空间。
4. 在本机安装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.
5. 用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:

1. 添加Maven依赖给Spring-webmvc, spring-mongodb,      jackson, 和最新 servlet api.  
2. 更新项目JDK 6到JDK 7.
3. 更新项目用最新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

接下来写另一个配置类AppConfig, Spring MongoDB对你在哪里实现接口有存储概念，Spring会因此生成一个proxy类，这使得写存储类很容易，移除了大量的样板式代码。Spring MongoDB允许我们通过指定@EnableMongoRepositories注释来声明激活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;



    }



}

View Code

proxy存储类内部使用MongoTemplate去执行操作，我们定义了一个MongoTemplate bean使用OpenShift MongoDB账户信息。 

以上代码在程序里用@EnableWebMvc 注释激活了Spring MVC支持。 

第五步：编写类GetBookmarksWebApplicationInitializer

3.0版本的Servlet, web.xml是可选的，一般，我们在web.xml里配置Spring WebMVC dispatcher servlet, 这次我们用WebApplicationInitializer编码方式配置，从Spring 3.1开始，提供了一个叫SpringServletContainerInitializer的 ServletContainerInitializer 接口实现。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);



    }



}

View Code

第六步：创建Story域类

这个程序，我们只有一个域类Story.

@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 and Setter removed for brevity

View Code

以上代码的重点：

1. @Docmument注释定义了一个域对象会存入MongoDB, stories指定了集合名，会在MongoDB中创建。
2. @Id注释 标明这是Id栏，会自动由MongoDB生成。 

第七步：创建StoryRepository

以上提到，Spring MongoDB对你在哪里实现接口有存储概念，Spring会生成一个proxy类。我们来创建如下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();



}

View Code

以上代码的重点：

1. StoryRepository接口继承用于定义CRUD方法和查找方法的CrudRepository接口，所以，Spring生成的proxy有所有这些方法。
2. @Repository注释限定@Component注释，标明这个类是存储或DAO类。用@Repository注释的类适合Spring DataAccessException      当用户连接 PersistenceExceptionTranslationPostProcessor时的转换。 

第八步：编写StoryResource

接下来，编写在Story上执行创建和阅读操作的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;



    }



}

View Code

第九步：安装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>

View Code

以上代码：

1. 导入了所有需要的库，程序代码在app.js.
2. 在Angular, 用ng-app指令定义项目范围。我们把ng-app用在html元素，不过也可以用其他元素。用html意味着AngularJS在整个index.html都可用，可以给ng-app指令命名，这个名字是模块名，我用getbookmarks作为程序模块名。
3. 最后一个index.htnl里有趣的是ng-view指令的用法。ngView加载当前index.html路径中对应的模板，所以，每次你切换路径只有ng-view这部分更改了。 

第十一步：编写AngularJS代码

App.js 放置了所有JavaScript, 程序所有路径都定义在里面，以下代码，我们定义了三个路径，每个都有一个对应的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});



}

View Code

第十二步：部署到云

最后，提交代码，推送到程序gear.

$ git add .



$ git commit -am "application code"



$ git push

View Code

这就是今天的内容，继续给反馈吧。 

原文：https://www.openshift.com/blogs/day-22-developing-single-page-applications-with-spring-mongodb-and-angularjs