使用Spring、MongoDB和AngularJS開發單頁面應用

jopen 10年前發布 | 64K 次閱讀 MongoDB angularjs

使用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中：

我們為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<Story, String> {

    public List<Story> 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<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;

    }

}

第九步配置AngularJS和推ter 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

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1406882131858.html

MongoDB angularjs

使用Spring、MongoDB和AngularJS開發單頁面應用

應用

前提

Github倉庫

第一步創建Tomcat 7應用

第二步刪除模板代碼

第三步更新pom.xml

第四步編寫 `WebMvcConfig` 和 `AppConfig` 類

第五步編寫 GetBookmarksWebApplicationInitializer 類

第六步創建 Story domain類

第七步創建 StoryRepository

第八步編寫StoryResource

第九步配置AngularJS和推ter Bootstrap

第十步創建 index.html

第十一步編寫AngularJS代碼

第十一步部署代碼

相關經驗

相關資訊

相關文檔

目錄

使用Spring、MongoDB和AngularJS開發單頁面應用

應用

前提

Github倉庫

第一步 創建Tomcat 7應用

第二步 刪除模板代碼

第三步 更新pom.xml

第四步 編寫 WebMvcConfig 和 AppConfig 類

第五步 編寫 GetBookmarksWebApplicationInitializer 類

第六步 創建 Story domain類

第七步 創建 StoryRepository

第八步 編寫StoryResource

第九步 配置AngularJS和推ter Bootstrap

第十步 創建 index.html

第十一步 編寫AngularJS代碼

第十一步 部署代碼

相關經驗

相關資訊

相關文檔

目錄

第一步創建Tomcat 7應用

第二步刪除模板代碼

第三步更新pom.xml

第四步編寫 `WebMvcConfig` 和 `AppConfig` 類

第五步編寫 GetBookmarksWebApplicationInitializer 類

第六步創建 Story domain類

第七步創建 StoryRepository

第八步編寫StoryResource

第九步配置AngularJS和推ter Bootstrap

第十步創建 index.html

第十一步編寫AngularJS代碼

第十一步部署代碼