資訊專(zhuān)欄INFORMATION COLUMN
摘要：今天的天學(xué)習(xí)種新技術(shù)挑戰(zhàn)，我決定使用框架和開(kāi)發(fā)一個(gè)單頁(yè)面應(yīng)用。應(yīng)用我們將開(kāi)發(fā)一個(gè)社交化書(shū)簽應(yīng)用，允許用戶(hù)提交和分享鏈接。在元素中使用指令，意味著在整個(gè)中可用。我使用作為該應(yīng)用的模塊名。
編者注：我們發(fā)現(xiàn)了有趣的系列文章《30天學(xué)習(xí)30種新技術(shù)》，正在翻譯，一天一篇更新，年終禮包。下面是第22天的內(nèi)容。
今天的《30天學(xué)習(xí)30種新技術(shù)》挑戰(zhàn)，我決定使用Spring框架、MongoDB和AngularJS開(kāi)發(fā)一個(gè)單頁(yè)面應(yīng)用。我很熟悉Spring和MongoDB，但是我沒(méi)用配合Spring使用過(guò)AngularJS。今天我們將開(kāi)發(fā)一個(gè)社交化的書(shū)簽應(yīng)用，類(lèi)似我們幾天前用EmberJS開(kāi)發(fā)的那個(gè)。我在第二天介紹了AngularJS的基本知識(shí)，請(qǐng)參閱我的文章獲取更多信息。本文使用最新版的Spring框架，即3.2.5.RELEASE，我們將不使用XML（連web.xml也不用）。我們將通過(guò)Spring的annotation支持來(lái)配置一切。我們將使用Spring MVC來(lái)創(chuàng)建一個(gè)REST后端。同時(shí)將AngularJS作為客戶(hù)端的MVC框架來(lái)開(kāi)發(fā)應(yīng)用的前端。
應(yīng)用我們將開(kāi)發(fā)一個(gè)社交化書(shū)簽應(yīng)用，允許用戶(hù)提交和分享鏈接。你可以在這里查看這個(gè)應(yīng)用。這個(gè)應(yīng)用可以做到：
當(dāng)用戶(hù)訪問(wèn)/時(shí)，他會(huì)看到以提交時(shí)間排序的報(bào)道列表。
當(dāng)用戶(hù)訪問(wèn)某個(gè)書(shū)簽時(shí)，例如#/stories/528b9a8ce4b0da0473622359，用戶(hù)會(huì)看到關(guān)于這個(gè)報(bào)道的信息，例如是誰(shuí)提交的，何時(shí)提交的，以及文章的摘要。AngularJS將發(fā)送一個(gè)REST化的GET請(qǐng)求（/api/v1/stories/528b9a8ce4b0da0473622359)來(lái)獲取全文。
最后，當(dāng)用戶(hù)通過(guò)#/stories/new提交新報(bào)道時(shí)，會(huì)向REST后端發(fā)起一個(gè)POST請(qǐng)求，報(bào)道會(huì)被保存在MongoDB數(shù)據(jù)庫(kù)。用戶(hù)只需填寫(xiě)報(bào)道的URL。應(yīng)用將使用我們?cè)诘?6天開(kāi)發(fā)的Goose Extractor RESTful API獲取標(biāo)題、主要圖片和文章摘要，
前提基本的Java知識(shí)。安裝最新的JDK。你可以安裝OpenJDK 7和Oracle JDK 7。OpenShift支持 OpenJDK6 和 7。
基本的Spring知識(shí)。
注冊(cè)一個(gè)OpenShift賬號(hào)。注冊(cè)是完全免費(fèi)的，Red Hat給每個(gè)用戶(hù)三枚免費(fèi)的Gear,可以用Gear運(yùn)行你的應(yīng)用。在寫(xiě)作此文的時(shí)候，每個(gè)用戶(hù)能免費(fèi)使用總共 1.5 GB 內(nèi)存和 3 GB 硬盤(pán)空間。
安裝 rhc客戶(hù)端工具。rhc是ruby gem，因此你的機(jī)子上需要裝有 ruby 1.8.7以上版本。 只需輸入 sudo gem install rhc即可安裝 rhc 。如果你已經(jīng)安裝過(guò)了，確保是最新版。運(yùn)行sudo gem update rhc即可升級(jí)。關(guān)于配置rhc命令行工具的詳細(xì)信息，請(qǐng)參考： https://openshift.redhat.com/community/developers/rhc-client-tools-install
使用 rhc 的 setup 命令配置你的 OpenShift 賬號(hào)。這個(gè)命令會(huì)幫助你創(chuàng)建一個(gè)命名空間，同時(shí)將你的ssh公鑰上傳至 OpenShift 服務(wù)器。
Github倉(cāng)庫(kù)今天的示例應(yīng)用的代碼可從github取得。
第一步 創(chuàng)建Tomcat 7應(yīng)用創(chuàng)建新應(yīng)用，使用Tomcat 7和MongoDB
rhc create-app getbookmarks tomcat-7 mongodb-2
這會(huì)為我們創(chuàng)建一個(gè)應(yīng)用容器——gear，然后設(shè)置公開(kāi)的DNS，創(chuàng)建私有g(shù)it倉(cāng)庫(kù)，最后利用你的Github倉(cāng)庫(kù)中的代碼來(lái)部署應(yīng)用。應(yīng)用可以通過(guò)http://getbookmarks-{domain-name}.rhcloud.com/訪問(wèn)。用你自己的OpenShift域名替換{domain-name} （域名有時(shí)也被稱(chēng)為命名空間）。
第二步 刪除模板代碼接著我們刪除OpenShift創(chuàng)建的模板代碼
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"
請(qǐng)注意我們同時(shí)也刪除了web.xml。
第三步 更新pom.xml用以下代碼替換pom.xml的內(nèi)容
4.0.0 getbookmarks getbookmarks war 1.0 getbookmarks UTF-8 1.7 1.7 org.springframework spring-webmvc 3.2.5.RELEASE org.springframework spring-tx 3.2.5.RELEASE org.springframework.data spring-data-mongodb 1.3.2.RELEASE org.codehaus.jackson jackson-mapper-asl 1.9.13 javax.servlet javax.servlet-api 3.1.0 provided openshift getbookmarks maven-war-plugin 2.4 `false webapps ROOT
上述pom.xml中：
我們?yōu)閟pring-webmvc、spring-mongodb、jackson和最新的servlet api添加了Maven依賴(lài)。
項(xiàng)目使用JDK 7代替JDK 6。
使用最新的Maven的war插件。為了避免由于web.xml不存在導(dǎo)致的構(gòu)建錯(cuò)誤，我們添加了一個(gè)配置選項(xiàng)。
修改之后，別忘了右擊Maven > Update Project來(lái)更新maven項(xiàng)目。
第四步 編寫(xiě) WebMvcConfig 和 AppConfig 類(lèi)創(chuàng)建com.getbookmarks.config包和WebMvcConfig類(lèi)。
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{
}
接下來(lái)我們將創(chuàng)建AppConfig配置類(lèi)。Spring MongoDB有一個(gè)倉(cāng)庫(kù)概念，你在其中實(shí)現(xiàn)接口，然后Spring會(huì)生成相應(yīng)的代理類(lèi)。這使得編寫(xiě)倉(cāng)庫(kù)類(lèi)非常容易，也節(jié)省了大量的樣板代碼。Spring MongoDB允許我們通過(guò)@EnableMongoRepositories annotation 聲明激活Mongo倉(cāng)庫(kù)。
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;
}
}
第五步 編寫(xiě) GetBookmarksWebApplicationInitializer 類(lèi)
Servlet 3.0下，web.xml是可選的。通常，我們?cè)?b>web.xml中配置Spring WebMVC調(diào)度器，不過(guò)從Spring 3.1開(kāi)始，我們可以使用WebApplicationInitializer以編程方式配置了。Spring提供了ServletContainerInitializer接口的一個(gè)實(shí)現(xiàn) SpringServletContainerInitializer。SpringServletContainerInitializer類(lèi)將任務(wù)委派給你提供的org.springframework.web.WebApplicationInitializer實(shí)現(xiàn)。你只需實(shí)現(xiàn)一個(gè)方法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);
}
}
第六步 創(chuàng)建 Story domain類(lèi)
本應(yīng)用中，我們只有一個(gè)Story domain類(lèi)。
@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() {
}
// 為了行文簡(jiǎn)潔，移除了Getter和Setter
以上代碼中，值得注意的有兩處：
@Document annotation指明了將在MongoDB中持續(xù)化的domain對(duì)象。stories指明了將在MongoDB中創(chuàng)建的collection名。
@Id標(biāo)記此字段為Id，相應(yīng)的字段會(huì)由MongoDB自動(dòng)生成。
第七步 創(chuàng)建 StoryRepository正如前面所說(shuō)，。Spring MongoDB有一個(gè)倉(cāng)庫(kù)概念，你在其中實(shí)現(xiàn)接口，然后Spring會(huì)生成相應(yīng)的代理類(lèi)。讓我們創(chuàng)建如下所示的StoryRepository.
