Day 22： 使用Spring、MongoDB和AngularJS开发单页面应用

时间  2019-11-21
标签 day 使用 spring mongodb angularjs 发单 页面 应用 栏目 Spring 繁體版
原文   原文链接

编者注：咱们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第22天的内容。css

今天的《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框架来开发应用的前端。html

应用

咱们将开发一个社交化书签应用，容许用户提交和分享连接。你能够在这里查看这个应用。这个应用能够作到：前端

  • 当用户访问/时，他会看到以提交时间排序的报道列表。java

    GetBookmarks Homepage

  • 当用户访问某个书签时，例如#/stories/528b9a8ce4b0da0473622359，用户会看到关于这个报道的信息，例如是谁提交的，什么时候提交的，以及文章的摘要。AngularJS将发送一个REST化的GET请求（/api/v1/stories/528b9a8ce4b0da0473622359)来获取全文。jquery

    GetBookMarks Story View

  • 最后，当用户经过#/stories/new提交新报道时，会向REST后端发起一个POST请求，报道会被保存在MongoDB数据库。用户只需填写报道的URL。应用将使用咱们在第16天开发的Goose Extractor RESTful API获取标题、主要图片和文章摘要，git

    GetBookMarks Submit Story.

前提

  1. 基本的Java知识。安装最新的JDK。你能够安装OpenJDK 7和Oracle JDK 7。OpenShift支持 OpenJDK6 和 7。angularjs

  2. 基本的Spring知识。github

  3. 注册一个OpenShift帐号。注册是彻底免费的，Red Hat给每一个用户三枚免费的Gear,能够用Gear运行你的应用。在写做此文的时候，每一个用户能无偿使用总共 1.5 GB 内存和 3 GB 硬盘空间。web

  4. 安装 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-installspring

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

  1. 咱们为spring-webmvc、spring-mongodb、jackson和最新的servlet api添加了Maven依赖。
  2. 项目使用JDK 7代替JDK 6。
  3. 使用最新的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

以上代码中，值得注意的有两处：

  1. @Document annotation指明了将在MongoDB中持续化的domain对象。stories指明了将在MongoDB中建立的collection名。
  2. @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();
}

上面的代码中值得注意的是：

  1. StoryRepository接口扩展了CrudRepository接口，CrudRepository接口定义了CRUD、finder方法。所以Spring生成的代理将具有这些方法。
  2. @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和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代码中：

  1. 咱们导入了须要的库。咱们的应用代码在app.js中。

  2. 在Angular中，咱们使用ng-app指令定义项目的做用域。在上面的代码中，咱们在html元素中加了ng-app，实际上咱们能够在任何元素中使用。在html元素中使用ng-app指令，意味着AngularJS在整个index.html中可用。ng-app指令能够指定一个名称。这个名称是模块的名称。我使用getbookmarks做为该应用的模块名。

  3. 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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程