Ember项目的安装与构建

By | 2021年12月31日

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

4 注意事项

  • 如需将Ember的dist文件夹下的内容部署到SpringBoot项目中,您需要根据SpringBoot的context-path来调整/config/environment.js中的rootURL,这里生产环境下设为/falpolicy
  • 为了方便在javascript中直接引用根路径,我们将它们写到了vendor/falutil.js中的rootPathposRootPathfalCasServerPath

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里始终仅有一条新增的记录。

发表评论

您的电子邮箱地址不会被公开。