javascript
Day 22: 使用Spring、MongoDB和AngularJS开发单页面应用
今天的《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獲取標題、主要圖片和文章摘要, 
前提
基本的Java知識。安裝最新的JDK。你可以安裝OpenJDK 7和Oracle JDK 7。OpenShift支持 OpenJDK6 和 7。
基本的Spring知識。
注冊一個OpenShift賬號。注冊是完全免費的,Red Hat給每個用戶三枚免費的Gear,可以用Gear運行你的應用。在寫作此文的時候,每個用戶能免費使用總共 1.5 GB 內存和 3 GB 硬盤空間。
安裝 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
使用 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中:
修改之后,別忘了右擊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 {@Beanpublic 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 {@Overridepublic 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 {@Idprivate 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以上代碼中,值得注意的有兩處:
第七步 創建 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(); }上面的代碼中值得注意的是:
第八步 編寫StoryResource
接著,我們將編寫執行創建和讀取報道操作的REST JSON web服務。我們創建一個Spring MVC控制器,包含下面的方法:
@Controller @RequestMapping("/stories") public class StoryResource {private StoryRepository storyRepository;@Autowiredpublic StoryResource(StoryRepository storyRepository) {this.storyRepository = storyRepository;}@RequestMapping(consumes = MediaType.APPLICATION_JSON_VALUE)@ResponseBodypublic 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)@ResponseBodypublic List<Story> allStories() {return storyRepository.findAll();}@RequestMapping(value = "/{storyId}", produces = MediaType.APPLICATION_JSON_VALUE)@ResponseBodypublic 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代碼中:
我們導入了需要的庫。我們的應用代碼在app.js中。
在Angular中,我們使用ng-app指令定義項目的作用域。在上面的代碼中,我們在html元素中加了ng-app,實際上我們可以在任何元素中使用。在html元素中使用ng-app指令,意味著AngularJS在整個index.html中可用。ng-app指令可以指定一個名稱。這個名稱是模塊的名稱。我使用getbookmarks作為該應用的模塊名。
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這就是今天的內容。歡迎反饋。
原文  Day 22: Developing Single Page Applications with Spring, MongoDB, and AngularJS
 翻譯  SegmentFault
總結
以上是生活随笔為你收集整理的Day 22: 使用Spring、MongoDB和AngularJS开发单页面应用的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: Day 21:Docker 入门教程
- 下一篇: Day 23:使用 TimelineJS
