摘要:今天的天學習種新技術挑戰,我決定使用框架和開發一個單頁面應用。應用我們將開發一個社交化書簽應用,允許用戶提交和分享鏈接。在元素中使用指令,意味著在整個中可用。我使用作為該應用的模塊名。
編者注:我們發現了有趣的系列文章《30天學習30種新技術》,正在翻譯,一天一篇更新,年終禮包。下面是第22天的內容。
今天的《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的內容
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中:
我們為spring-webmvc、spring-mongodb、jackson和最新的servlet api添加了Maven依賴。
項目使用JDK 7代替JDK 6。
使用最新的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
以上代碼中,值得注意的有兩處:
@Document annotation指明了將在MongoDB中持續化的domain對象。stories指明了將在MongoDB中創建的collection名。
@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{ public List findAll(); }
上面的代碼中值得注意的是:
StoryRepository接口擴展了CrudRepository接口,CrudRepository接口定義了CRUD、finder方法。因此Spring生成的代理將具備這些方法。
@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第九步 配置AngularJS和Twitter BootstrapsubmitStory(@RequestBody Story story) { Story storyWithExtractedInformation = decorateWithInformation(story); storyRepository.save(storyWithExtractedInformation); ResponseEntity responseEntity = new ResponseEntity<>(HttpStatus.CREATED); return responseEntity; } @RequestMapping(produces = MediaType.APPLICATION_JSON_VALUE) @ResponseBody public List 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 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和Bootstrap?;蛘撸憧梢詮谋卷椖康膅ithub 倉庫復制過來。
第十步 創建 index.html現在我們要編寫應用的頁面
GetBookmarks : Submit Story
在以上展示的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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/18697.html
摘要:在被收購之后,維護并繼續發展。設置是告訴應用在目錄尋找應用模板。設置告訴應用使用目錄里面的類似圖像文件等靜態文件。我們會在應用開發過程中,保持著調試器在后臺運行。這能提供高效的開發環境。我們會把回應狀態設為已創建。 編者注:我們發現了有趣的系列文章《30天學習30種新技術》,正在翻譯,一天一篇更新,年終禮包。下面是第23天的內容。 今天的《30天學習30種新技術》,我決定暫時放下...
摘要:指南無論你正在構建什么,這些指南都旨在讓你盡快提高工作效率使用團隊推薦的最新項目版本和技術。使用進行消息傳遞了解如何將用作消息代理。安全架構的主題指南,這些位如何組合以及它們如何與交互。使用的主題指南以及如何為應用程序創建容器鏡像。 Spring 指南 無論你正在構建什么,這些指南都旨在讓你盡快提高工作效率 — 使用Spring團隊推薦的最新Spring項目版本和技術。 入門指南 這些...
摘要:在我的機子上,運行于端口,以避免和其他默認運行于端口的沖突。我們可以使用命令連接數據庫查看定義應用層次創建的模板應用有一個問題,客戶端和服務器段的代碼是一樣的。在中加入然后添加問題模板注意我們使用了來確保用戶未登錄的情況下應用。 編者注:我們發現了有趣的一系列文章《30天學習30種新技術》,正在翻譯中,一天一篇更新,年終禮包。下面是第15天的內容。 到目前為止我們討論了Bower...
摘要:在我的機子上,運行于端口,以避免和其他默認運行于端口的沖突。我們可以使用命令連接數據庫查看定義應用層次創建的模板應用有一個問題,客戶端和服務器段的代碼是一樣的。在中加入然后添加問題模板注意我們使用了來確保用戶未登錄的情況下應用。 編者注:我們發現了有趣的一系列文章《30天學習30種新技術》,正在翻譯中,一天一篇更新,年終禮包。下面是第15天的內容。 到目前為止我們討論了Bower...
摘要:通過如下命令發布控制臺,運行編寫的默認程序。默認禁用,啟用它需要打開并取消注釋以下行。啟用數據庫啟動應用程序的數據庫,框架提供了內置的數據庫的支持。當用戶發出請求到,一個新的將被創建。方法為給定的獲取,把這個轉換成格式并返回響應。 編者注:我們發現了有趣的系列文章《30天學習30種新技術》,正在翻譯,一天一篇更新,年終禮包。下面是第 30 天的內容。 今天是最后一天,我決定學習一...
閱讀 780·2023-04-25 16:55
閱讀 2815·2021-10-11 10:59
閱讀 2079·2021-09-09 11:38
閱讀 1792·2021-09-03 10:40
閱讀 1491·2019-08-30 15:52
閱讀 1131·2019-08-30 15:52
閱讀 960·2019-08-29 15:33
閱讀 3501·2019-08-29 11:26