界面还挺好看的... 可以记录每天的点点滴滴...
1.使用 express 作为服务器
2.fs 模块 fs.writeFileSync 随机写入模拟数据
3.vuex 包括 states 存储数据 actions 触发方法(比如异步请求可以放在这里, 成功后在submit改变数据) mutations 同步改变states数据
vuex 用保持一些全局的数据 和 状态, 方便调用不同数据的方法, 易于找到数据改变的源头, 和数据状态的跟踪调试
4. webpack配置比较全, 使用vue-cli构建的, vue-cli 有些复杂, 需要研究, 才能自行增加, 更改配置, 如果有需要
5. 使用jade 模板, 这个模板简洁, 但容易出错, 用好得多了解这个模板介绍
6. 使用 Echarts 还是比较简单, 先 npm 安装, 然后再模块中引入 特定的图表 import Echarts from 'echarts/lib/echarts'
再mouted周期调用 Echart.init方法 初始化页面, option是echart格式的数据源
let chart = Echarts.init(document.querySelector('#bar-chart-year'))
chart.setOption(option)
7. 首页星星飘动效果, 是用canvas绘制的, 用es6 的 class 定义出 一个星星类 Star,
这个类包含了星星的属性: 半径, 位置, 透明度 ; 和星星的动作: move 不断让它的y 和 alpha 变小
用另个Startflow 类 的构造器中 创建 不同大小的星星,
然后在方法 flowing 用 window.requestAnimationFrame 循环
清空画布, 渲染画布的动作, 看起来有动态效果
这个方法写的还是不错的, 思路很清晰
8. devtool: '#eval-source-map' 在开发模式 webpack 配置这个
可以看到会生成一个webpack:// 目录, 在控制台可以调试原生的代码
9. 后台采用express作为服务器, mvc结构, 分别是数据的读取 存储 更新, 视图(webpack生成), http请求处理
这部分需要了解 express-session 的配置, 和路径的配置
10. router配置相对简单, 就普通的json格式, 填写path 和对应的component就可以
router.beforeEach((to, from, next) => { // 对特定路径进行验证，增强锁屏功能
if (to.path === '/') {
next('/auth')
} else if (to.path === '/auth' && !store.state.lockScreen) {
//如果调到验证页面, 而且没有锁屏, 则跳到主页面
next('/main')
} else if (to.path !== '/auth' && store.state.lockScreen) {
// 任何其他页面跳转, 如果已经锁屏, 都要去验证页面
next('/auth')
} else {
next()
}
})
11. 切换组件 还有 日期组件, 暂时没找到....
https://github.com/hongchh/timeline-x
http://www.qdfuns.com/notes/40585/b4d9eff4ea2a6aff3265b742ad9d57f4.html
http://blog.csdn.net/hongchh/article/details/54744318