社会主义初级阶段前端生产组 - 实战笔记

计划

两周学习为主，熟悉技术，当前系统结构
做好工作计划，写工作日志
计划需划分出若干
每个任务一般别超过半天
写好预计时长和任务输出
日志的内容大概就是今天完成了什么或者学习到了什么
还有哪些没完成

任务 erp-图表图组件

用echarts来显示报表的图表图鉴，将会输入model和data
需要做的基本上就是根据model来生成一个echart的配置（具体怎么搞看官网上的范例就能知道个大概了）
再把data带入进去就可以了，一开始不会涉及到太复杂的显示内容，但还是得留好余地
目前的model属性应该是能涵盖多数情况，如果觉得需要新增或者修改model的属性，可以先记下来讨论下，如果真的需要的话再给加上

报表图表类型（show_type）

• bubble 气泡图
• line 折线图
• bar 柱形图
• pie 饼图
• radar 雷达图
• funnel 漏斗图

model格式

{
    "code": "",
    "name": "",
    "memo": "",
    "ds_code": "bind_dataset_code",//所属数据集
    "show_type": "line|bar|...",//显示类型
    "fields": [{
        "code": "",//字段编码
        "name": "",//显示名称
        "type": "integer|code|memo",//数据类型
        "tpl": "",//显示模板
        "pos": 0,//排序顺序
        "series": "x|y|z|none", //所在轴
    }],
}

（目前没有完整的数据，自己编几个就好了）

CMS 内容管理系统

我们要搞一个内部用的，CMS内容管理系统

这是目前的公司主站，
我们的目的就是把他给替掉
样式可以完全扒他的无所谓，主要是他的后台系统需要我们来重置

会有几个类型，每个类型下有几个模板
可能包括的的类型有

企业主页 / 博客 / 电子商城
大概就是
让用户选个外观类型，
再填几个参数，
配置完成之后点击发布就能生成网页的

配置网页的管理系统和生成网站的位置是不同的，

管理系统会配置完成后会生成静态的html文件
然后传输到网站的服务器上

最终目标：
输出的能构建出公司主站的功能（先用团队博客练手）

第一步

企业官网，功能清单

标注最小功能集

后台菜单

１．首页：第一次打开跳出向导 选择主题，之后显示 页面树形结构 和 常用功能的入口（包括向导）

２．页面：默认打开 所有页面
所有页面：用表格组件显示所有页面（包括编辑按钮、复选框、日期）
点击 编辑 跳转至 页面详情

页面详情中包括一个 列表 和一个 表单
列表用来增删每个实例，点击 编辑 旁边渲染出对应表单
表单用来输入每个实例的具体参数（数组之类问题用弹窗或子表组件解决）
（PS:最好能加上实时预览功能（实例预览组件））

新建页面：同上，但要先选择创建的位置，然后跳转至 页面详情

３．主题：切换不同主题只抓取当前基本配置

４．用户：暂时只有管理员权限

５．设置：默认打开 常规
更改向导初次填的内容，网站标题、首页地址、备案号、公司名称等等

后端： express中出叛徒搞出来的框架 koa2
前端： 直接上 typescript + vue2

需求调研-功能列表 12/21
整体结构设计-前端功能结构文档 12/24
相关技术学习准备-使用新技术重构当前组件
vue2 / vuex / ssr
typeScript
webpack+gulp

随时更新笔记

Gulp

使用指定几个功能目标：

1. 检测 hbs文件变动
2. 打包输出到dist
3. 清空目录
4. 将文件复制到dist目录
5. 压缩js文件，文件名重命名（逆序名称），生成版本号
6. html中引用文件重替换
7. 检测 js变化启动相应测试

• 安装 cnpm

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

• 配置 package.json

$ npm init

Mocha + karma 测试

Handlebars

预编译 handlebars.runtime.js 文件版本要和编译生成的一致

数据验证

在html里头定义条件（大概包括输入类型，长度，正则匹配公式，远程验证），在某个字段验证不通过的时候在底部显示信息可以定义的提示信息
/
查询联动（如省市区选择栏）
状态改动（某字段改变后其他字段的可编辑和显示状态发生改变）
数据导入（如选择商品后自动填入商品的价格名称等信息）
公式计算（如填入单价数量自动计算出总价）
模型变化（如选择不同的支付手段需要填入不同的信息）
额外操作（出现提交和清空外的操作，如应用，绑定等。。。）

目前的技术

• jquery(core,plugin)+bootstrap
• 前端模板 handlebars
• 后端模板 freemarker
• 依赖管理 npm
• 构建工具 gulp
• 版本管理 git

data.json 数据结构

技术储备

• es6/es7（babel）
• typescript
• vue2.0/vuex
• node koa2
• webpack
• karma+mocha