falpolicy-webui
1 Install
1.1 nodejs install
$ su root
# curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
# yum install -y nodejs
*提示：卸载 nodejs 命令：yum remove nodejs npm -y *
1.2 ember install
# su falsec #切换回普通用户
$ sudo npm install -g ember-cli@3.8.1
$ ember -v
$ cd falpolicy-webui #进入 package.json所在目录，即项目根目录下执行
$ su root
# npm install
提示1：若 package.json 中已有 semantic-ui 插件，则执行 npm install命令，会到2的步骤。
提示2：Windos下请以管理员身份打开cmd，然后运行命令
卸载：npm uninstall ember-cli -g
1.3 bower install
# sudo npm install -g bower@1.8.8
$ su falsec
$ cd falpolicy-webui #进入 bower.json所在目录，即项目根目录下执行
$ bower install
1.4 ember plugin install
提示：若 package.json 中已有插件信息，请忽略此步骤。
$ ember install ember-cli-less
$ ember install ember-truth-helpers
$ ember install ember-math-helpers
$ ember install ember-resize
$ ember install ember-concurrency
$ ember install ember-history-back
$ ember install ember-route-history
下面的插件已不用：
$ ember install ember-table（会自动安装依赖：install bower packages antiscroll, jquery-mousewheel, jquery-ui）
$ ember install ember-light-table
提示：卸载插件格式 npm uninstall –save “ember-cli-less”
1.5 watchman install(mac系统下需要安装)
提示：非 Mac 系统，请忽略此步骤。
# brew install watchman
1.6 semantic-ui install
- cd falpolicy-webui
- su root
- npm install –global gulp@4.0.0
- su falsec
- npm install semantic-ui@2.2.13
- It looks like you have a semantic.json file already.
- [x] Yes, extend my current settings.
- [ ] Skip install
- We detected you are using NPM Nice! Is this your project folder? /home/admin/dev/falpolicy-webui
- [x] Yes
- [ ] No, let me specify
- Where should we put Semantic UI inside your project? (semantic/)
- 请输入：/vendor/semantic
1.7 semantic-ui build
$ su root
# su falsec #切换回普通用户
$ cd falpolicy-webui/vendor/semantic/
$ gulp build
提示：由于我们不会去修改semantic-ui项目，因此可以将 gulp build 生成的 dist目录 push到git，这样jenkins自动打包时，就不需要安装 gulp了。
1.8 WebStorm插件安装
- ember.js
2 build ember project
$ ember build #默认为development
$ ember build --environment=development
$ ember build --environment=production
3 start ember project
$ ember serve
- Visit your app at http://localhost:4200.
- Visit your tests at http://localhost:4200/tests.
4 注意事项
- 如需将Ember的dist文件夹下的内容部署到SpringBoot项目中，您需要根据SpringBoot的
context-path来调整/config/environment.js中的rootURL，这里生产环境下设为/falpolicy。 - 为了方便在
javascript中直接引用根路径，我们将它们写到了vendor/falutil.js中的rootPath、posRootPath、falCasServerPath。
5 常见错误
- 安装 semantic-ui 时发生错误：npm ERR! Unexpected end of JSON input while parsing near的方法汇总。
解决办法：1.删掉package.lock.json 2.清除cache：npm cache clean –force
6 其他
- 本框架主要使用MVC开发，因此能使用Route和Controller就尽量用他们，不要用组件来替代（虽然组件之间可以直接通信，而不需要Controller）。注意：如果Controller上需要操纵组件中的元素，请先获取组件实例并调用它的方法，而不是直接在Controller上写:$(“.credential-grid”)。
- 本框架使用了ECMAScript6，开发时建议在WebStorm中调整下JavaScrip的语言版本。
- 本框架虽然使用了semantic-ui和bootstrap两套UI框架，但我们主要使用semantic-ui。
- 本框架除了可以使用jquery，还引入了Underscore.js方便您的使用。
- 对于样式文件(.css)的编写，建议统一使用 app.less 作为入口，它最终会生成app.css并打包到/dist/assets/falpolicy-webui.css。
- 使用modal组件时需要注意，如果将modal组件放在子模板上，每次重新路由回来调用$(‘.ui.modal’).modal(‘show’)都会被重新创建modal的html，导致重复出现。本框架的解决办法是在组件的willClearRender钩子中remove掉创建的modal相关html。
- app.js中提供eventTarget用于全局事件的注册，注册好后可用于其他所有模块。
- 页面级的操作权限由page-permission组件渲染，如果您的页面要使用它，请自行添加（考虑到后续可能要支持权限控制，为了后续改动方便，这里页面权限没有在页面中写死）。
- 何时使用 jquery ajax 取数据，何时通过 store 取数据？
- 如果接口中数据是只读的，我们不需要建模，都用jquery ajax。
- 如果接口中数据不是只读的，我们要用store。
- 带有附件的表单上传使用jquery ajax。
- 使用grid控件的后台过滤、后台分页、后台排序的能力则要用jquery ajax（但增、删、改仍然通过store来处理）
- 自定义组件获取数据可以不通过route模块，可直接在组件的hook中通过store（已被注入到组件）来获取数据并set到组件上。但是如果数据要通过ajax异步获取，且使用Ember双向绑定语法将数据绑定到模板，此时会引发错误：calling set on destroyed object，虽然这个错误并不会影响数据渲染到组件上。
- 本框架使用基于ajax的jquery.form来进行表单的提交，对于表单的验证我们仍使用semantic-ui中的验证方式(不使用jquery.validate)
- 通过EmberData的save()添加或修改一个模型时，有时服务器不返回添加或修改后的实体以便回填到Store了。 这导致Store中新增或修改的这条record的某些属性值很有可能会”缺失”，但只要不影响grid显示就好。因此修改一条数据时，尽量先重新从服务器获取单条数据。
- 所有grid页面上的数据都从服务器上获取，而不是从EmberStore缓存读取（即使缓存中有数据）。这样做目前主要为了解决一个问题：打开浏览器直接输入URL进入创建credential的表单页，创建后通过route方式回到grid页面，此时发现grid里始终仅有一条新增的记录。