去年开始,团队的项目慢慢转变为微服务架构,通过Server(Groovy+Grails)+Gateway+Client(Angualr2+Angualr CLI)彻底实现前后台分离,这对于大型项目是非常有优势的,但对于小项目又显得过于笨重,为了不放弃使用Grails和Angualr2又可以减轻项目管理的工作,我选择用Grails的Angualr2 Profile创建应用,它可以帮助我们快速建立和同时管理server+client两个应用,此文便是记录第一次使用Grails的Profile创建Angualr2应用及遇到的坑。
背景
随着单页面应用(Single-Page Application,简写SPA)的广泛普及,越来越多的Grails的开发者开始寻找SPA框架,以提高JS客户端的开发效率,我也曾一度转战Meteor,好在,从Grails3.1开始,Grails WEB开发框架便引入了对Angular JavaScript框架的支持,它可以借助AngularJS的特性快速生成SPA应用代码,提高前端的开发效率,让一切都变得简单。
前期准备
创建应用前,我们需要安装及配置以下环境:
Grails ->3.2.1+
Node -> v5+
NPM -> v3+
Angular CLI
创建应用
使用profile angular2创建Grails应用:
grails create-app grails3-angular2 --profile angular2
下图即为Grails+Angualr2 的一个标准的目录结构,主要包括client和server两个子目录:
client
就是一个Angular CLI的前端应用,所以Angular CLI的command都支持,故profile不提供相应command,具体可查阅Angular CLI。server
一个标准的Grails目录结构,不再复赘,具体参考Grails官方文档。
启动项目
Grails提供了3个命令启动项目,可根据自己的需求选择启动命令:
启动server:
./gradlew server:bootRun
启动client:
./gradlew client:bootRun
同时启动server和client:
./gradlew bootRun --parallel
运行成功后,访问:
server: http://localhost:8080/
client: http://localhost:4200/
这样,一个Grails+Angualr2的项目便创建成功了,剩下的只是按照需求写写画画即可。你可以通过Grails的命令创建Domain:grails create-domain-class com.demo.Blog
,也可以通过Angualr CLI创建前端组件:ng g component blog
。
需要指出的是,由于client端和server端将在不同的端口上运行,因此需要 cors 配置,具体在server端server/grails-app/conf/application.yml
配置:
grails: cors: enabled: true
测试
Grails提供了两个命令去运行测试:
./gradlew test :单元测试,包括Karma 和 Jasmine.
./gradlew integrationTest :集成测试
坑
这样一个看似简单的项目创建,过程中依旧碰到了许多问题,在这儿我也记录一下。
FAILURE: Build Failed with on Exception
按照官方文档创建了应用,迎接我的却是FAILURE
:
错误原因
经过排查是因为build.gradle中的第八行 classpath "org.grails.plugins:hibernate5:${gormVersion-".RELEASE"}"
,读取的变量gormVersion并未被定义(我也是很无奈...)。
解决
直接指定hibernate5的版本 classpath "org.grails.plugins:hibernate5:6.0.4"
。
Property 'cache' does not exist on type 'Observable<any>'
再次尝试启动,依旧满屏红:Property 'cache' does not exist on type 'Observable<any>'
,第一反应是插件版本不对,但具体怎样,还是求助了Google。
错误原因
rxjs5开始,cache方法便被remove,默认创建项目的rxjs版本为5.0.1,故抛出此异常。
解决
移除下图中的cache()方法,项目正常启动。