Github仓库

今天的demo放在  github: day22-spring-angularjs-demo-app. 

什么是Tornado?

Tornado是一个开源的Python
Web框架,也是非阻塞式web服务,最初在FriendFeed开发。FriendFeed被收购后,由Facebook维护和开发。由于它的非阻塞式的网络I/O特色,有高超的可扩展性,能同时检测上千的并发连接。 

第十二步:部署到云

最后,提交代码,推送到程序gear.

bet36365注册送奖金 1bet36365注册送奖金 2

$ git add .    $ git commit -am "application code"    $ git push

View Code

这就是今天的内容,继续给反馈吧。 

原文:https://www.openshift.com/blogs/day-22-developing-single-page-applications-with-spring-mongodb-and-angularjs


查看独立文章

最后一个后台宫呢功能是查看独立文章,先指定路由。

bet36365注册送奖金 3bet36365注册送奖金 4

application = web.Application([      (r'/', IndexHandler),      (r'/index', IndexHandler),      (r'/api/v1/stories',StoriesHandler),      (r'/api/v1/stories/(.*)', StoryHandler)  ],**settings)

View Code

然后写StoryHandler.

bet36365注册送奖金 5bet36365注册送奖金 6

class StoryHandler(web.RequestHandler):      def get(self , story_id):          story = db.stories.find_one({"_id":ObjectId(str(story_id))})          self.set_header("Content-Type", "application/json")          self.write(json.dumps((story),default=json_util.default))

View Code

以上代码通过story_id查找对应文章,然后转换成json响应。 

第七步:创建StoryRepository

以上提到,Spring
MongoDB对你在哪里实现接口有存储概念,Spring会生成一个proxy类。我们来创建如下StoryRepository. 

bet36365注册送奖金 7bet36365注册送奖金 8

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();    }

View Code

以上代码的重点:

  1. StoryRepository接口继承用于定义CRUD方法和查找方法的CrudRepository接口,所以,Spring生成的proxy有所有这些方法。
  2. @Repository注释限定@Component注释,标明这个类是存储或DAO类。用@Repository注释的类适合Spring
    DataAccessException      当用户连接
    PersistenceExceptionTranslationPostProcessor时的转换。 

OpenShift上部署程序

在OpenShift上部署前,先做以下几步:

  1. 在OpenShift上注册。OpenShift完全免费,红帽给每个用户免费提供了3个Gears来运行程序。目前,这个资源分配合计有每人1.5GB内存,3GB磁盘空间。
  2. 在本机安装rhc 客户端工具,rhc是ruby
    gem包,所以你需要安装1.8.7或以上版本的ruby。安装rhc,输入 sudo     
    gem install rhc. 如果已经安装了,确保是最新的,要更新rhc,输入sudo
    gem update rhc. 想了解rhc command-line 工具,更多帮助参考
    https://www.openshift.com/developers/rhc-client-tools-install.
  3. 用rhc setup 命令安装OpenShift. 执行命令可以帮你创建空间,上传ssh
    密钥到OpenShift服务器。 

安装后,可以运行以下命令创建OpenShift程序。

bet36365注册送奖金 9bet36365注册送奖金 10

$ rhc create-app day25demo python-2.7 mongodb-2 --from-code https://github.com/shekhargulati/day25-tornado-demo-app.git

View Code

它会执行所有从创建程序,到设置公共DNS,
到创建git私有仓库,最后用Github仓库的代码发布应用。程序运行在
http://day25demo-shekhargulati.rhcloud.com/\#/ 

bet36365注册送奖金,这是今天的内容,继续给反馈吧。 

原文:https://www.openshift.com/blogs/day-25-tornado-combining-tornado-mongodb-and-angularjs-to-build-an-app


第三步:更新po.xml

接下来,用以下代码更新程序的pom.xml.

bet36365注册送奖金 11bet36365注册送奖金 12

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

View Code

以上pom.xml:

  1. 添加Maven依赖给Spring-webmvc, spring-mongodb,      jackson, 和最新
    servlet api.  
  2. 更新项目JDK 6到JDK 7.
  3. 更新项目用最新Maven
    war插件,添加一个配置避免没有web.xml时build出错。 

更新好后,确保更新maven项目 右击> Maven > Update Project. 

Github仓库

今天的demo放在 github: day25-tornado-demo-app. 

第十一步:编写AngularJS代码

App.js 放置了所有JavaScript,
程序所有路径都定义在里面,以下代码,我们定义了三个路径,每个都有一个对应的Angular控制器。

bet36365注册送奖金 13bet36365注册送奖金 14

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});    }

View Code

配置MongoDB

导入库后添加以下几行,我们定义了MongoDB连接url和数据库名字,如果程序是部署到OpenShift,
那OpenShift指定的环境变量会被使用,否则是用本地配置。

bet36365注册送奖金 15bet36365注册送奖金 16

MONGODB_DB_URL = os.environ.get('OPENSHIFT_MONGODB_DB_URL') if os.environ.get('OPENSHIFT_MONGODB_DB_URL') else 'mongodb://localhost:27017/'  MONGODB_DB_NAME = os.environ.get('OPENSHIFT_APP_NAME') if os.environ.get('OPENSHIFT_APP_NAME') else 'getbookmarks'     client = MongoClient(MONGODB_DB_URL)  db = client[MONGODB_DB_NAME]

View Code

我们创建了一个MongoClient实例,传给连接url,
这会连接到运行的MongoDB实例,接下来用MongoClient实例获取数据库。 

第六步:创建Story域类

这个程序,我们只有一个域类Story.

bet36365注册送奖金 17bet36365注册送奖金 18

@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 and Setter removed for brevity

View Code

以上代码的重点:

  1. @Docmument注释定义了一个域对象会存入MongoDB,
    stories指定了集合名,会在MongoDB中创建。
  2. @Id注释 标明这是Id栏,会自动由MongoDB生成。 

AngularJS前端

我决定继续用第22天写的AngularJS前端,第22天展示了怎样用AngualrJS和Java
Spring框架,用JavaScript
MV*框架最好的是如果你继续坚持REST客户端界面需求,那你可以重用前端代码。详情请参考第22天博客。 

你可以从我的github下载AngularJS前端,复制static和templates文件夹到getbookmarks.py后面。 

第四步:编写WebMvcConfig和AppConfig类

新建包 com.getbookmarks.config 和类WebMvcConfig.
用以下代码替换,这个类会激活Spring Web MVC框架。

bet36365注册送奖金 19bet36365注册送奖金 20

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{     }

View Code

接下来写另一个配置类AppConfig, Spring
MongoDB对你在哪里实现接口有存储概念,Spring会因此生成一个proxy类,这使得写存储类很容易,移除了大量的样板式代码。Spring
MongoDB允许我们通过指定@EnableMongoRepositories注释来声明激活Mongo存储。

bet36365注册送奖金 21bet36365注册送奖金 22

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;        }    }

View Code

proxy存储类内部使用MongoTemplate去执行操作,我们定义了一个MongoTemplate
bean使用OpenShift MongoDB账户信息。 

以上代码在程序里用@EnableWebMvc 注释激活了Spring MVC支持。 

前言

今天的30天挑战,我决定先暂停JavaScript,学习一款叫Tornado的web框架。学Tornado是为了能用Python开发web程序,我只会Flask框架,所以学Tornado能好好补充一下我的Python
web开发技能。本文我们要开发的程序会用到Tornado作为REST后端,MongoDB数据库,AngularJS为客户端JavaScript
MV*框架,OpenShift作为部署平台。

 bet36365注册送奖金 23

前言

今天的30天挑战,我决定用Spring框架,
MongoDB和AngularJS开发一个单页网页应用。我对Spring和MongoDB很熟悉但是没有AngualrJS和Spring框架一起用过。所以本文就来开发一个网摘程序就像几天前用EmberJS写的一样。在这个系列的第二天我们已经讨论过AngularJS基础知识,详情参考博客。本文我们来讨论最新版本的Spring框架如3.2.5
RELEASE, 不采用XML(甚至没有web.xml).
我们用Spring注释支持来配置所有东西,Spring
MVC(同Spring框架一起)用来创建RESTful后端。AngularJS用做客户端MVC框架来开发前端。 

创建和显示所有文章

现在来加新建和显示文章的功能,先加如下路由到程序实例。

bet36365注册送奖金 24bet36365注册送奖金 25

application = web.Application([      (r'/', IndexHandler),      (r'/index', IndexHandler),      (r'/api/v1/stories',StoriesHandler),  ],**settings)

View Code

然后定义StoriesHandler用于响应保存文章到MongoDB和查找文章。

bet36365注册送奖金 26bet36365注册送奖金 27

class StoriesHandler(web.RequestHandler):      def get(self):          stories = db.stories.find()          self.set_header("Content-Type", "application/json")          self.write(json.dumps(list(stories),default=json_util.default))          def post(self):          story_data = json.loads(self.request.body)          story_id = db.stories.insert(story_data)          print('story created with id ' + str(story_id))          self.set_header("Content-Type", "application/json")          self.set_status(201)

View Code

以上代码:

  1. 当用户发出GET请求到 ‘/api/v1/stories’, 我们调用find()到MongoDB,
    因为我们没有指定查询条件,所以它会获取数据库中所有文章,我们指定内容类型为
         “application/json”, 就会给出json响应。
  2. 当用户发出POST请求到 ‘/api/v1/stories’,
    我们先解码json主体到字典,然后写到MongoDB,
    设置相应状态为201(已创建)。 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图