iot-admin v0.0.5

IOT-ADMIN

IOT管理后台

Step 1

1. npm install

Dev Mode

1. npm run build-dll
2. npm start
3. open browser and type http://localhost:3000.

Prod Mode

1. edit src/app/config.js

2. build

• 逐步执行以下命令

npm install
npm run build-dll
npm run build-client
npm run build-server
npm run copy-files

或者执行这个脚本

build/shell/build-prod.bat

3. 启动Node服务

node ./bin/server/server.js 3000

4. 最后打开浏览器访问 http://localhost:3000.

#设计规范

• 关键词

modules, routes, pages, layouts, components, actions, reducers 

• 整体架构示意

• 代码结构

	---node_modules
	---bin---(es5)
	     |---client
	     |---common
	     |---server
	---config
	     |---dll.config.js
	     |---webpack.config.js
	     |---webpack.config.product.js
	---public
	     |---static---
	     |      |---lib.js
	     |      |---bundle.js
	     |      |---bundle.css
	     |      |---reset.css
	---src
	     |---app
             |      |---config
             |      |---modules
             |      |      |---demo
	     |      |      |      |---pages
	     |      |      |      |---models
	     |      |      |      |---config
	     |      |      |      |---components
	     |      |      |---common
             |      |---store
             |      |---utils
             |---browser
	     |---server 	    
	---.babelrc
	---cmrh.conf.js
	---package.json
	---README.md

命名规范： 1. 属于定义class的文件或文件目录名规则都是首字母大写跟着驼峰，若是目录内部的文件，除了index.js其他如样式文件的命名跟class名保持一致 比如： - MyComponent.js - OtherComponent/ - index.js - OtherComponent.css 2. 除了class之外的文件或目录的命名都采用 小写单词+减号连接 比如： - my-constants.js - my-utils - my-request.js - my-helper.js 3. Model虽然不是class，也跟class一样的命名规则

4. modules目录下第一层目录表示模块名字，以小写单词+减号连接，模块内部的子目录结构也要求规范 比如： /modules
   • demo
     • config
   • routes.js
   • models.js
   • components
     • Header
       • Header.css
       • index.js
     • Nav
       • Nav.css
       • index.js
     • DemoForm
       • DemoForm.css
       • index.js
       • pages
         • home
           • home.css - index.js
         • about
           • about.css - index.js
       • models
         • UserDataModel.js
         • SessionDataModel.js
         • MessageDataModel.js
         • AuthDataModel.js
         • HomeUIModel.js
         • HeaderUIModel.js
         • NavUIModel.js
   • zbus-demo
   • hello-world

##笔记

• Page应该是被设计为最顶层的（路由器）组件
• 任何一种Action的发起引起的State变化必然会引起Page组件及以下所有组件的rerender
• 特别注意在使用[].map进行React组件构建时，其属性key非常重要，它决定了rerender结果是否更新到真实dom上面
• 关于babel preset

1. preset = plugin + plugin ...
2. stage-0是对ES7一些提案的支持 ,它包含stage-1,2,3的所有功能，同时还另外支持两个功能插件:transform-do-expressions,transform-function-bind
3. babel plugin runtime的加入会导致代码中 export * from 'x'报错（Babel编译后的代码加了runtime的一些库，导致modules undefined报错，去掉runtime后，编译后的代码干净无错）

• 惊天大BUG，在css/less文件里直接使用./xxx.svg会报找不到文件的错, 改成相对目录就没问题：

.logo { background: url('./logo.svg') }// 报错
.logo { background: url('../{parent_dir}/logo.svg') }// 正常
// https://stackoverflow.com/questions/34480228/how-to-load-svg-images-in-webpack

##TODO

• AdminPage

1. x登录注册页面
2. x退出登录

• TableListPage

1. ×新增/修改/详情
2. ×交互设置功能(弹窗、抽屉、主题、固定列水平不滚动、固定头垂直不滚动)
3. √删除功能
4. √批量删除功能
5. √排序功能
6. √行操作图标化
7. ×右上角Popover z-index问题
8. ×增加关键词搜索
9. ×高级搜索（与或、括号组合、比较符），基本上按照KOM的where条件格式来生成
10. ×行上移、下移
11. ×行拷贝
12. ×行编辑
13. ×单元格编辑
14. ×主从表(一表带多Tab页)
15. ×主子表(行展开)
16. ×整个表格数据行全选
17. ×合并列
18. ×合并行(合并单元格)
19. ×行分组
20. ×分页器固定底部飘浮
21. x外键翻译
22. x用 Jest 或 Mocha 进行单元测试
23. x用 Cypress 或者 Nightwatch 进行 E2E 测试