timeline x

A Simple Vue SPA. 一个简单的Vue单页应用。

135
86
Vue

Timeline-X

A Simple Timeline Application. SPA. Powered By Vue/Vue-router/Vuex.

一、项目构建启动

# 安装依赖
npm install

# 生成伪数据(开发用)
npm run fake-data

# API服务器,localhost:8081
# 启动后端之前需要先完成构建得到前端的资源
# 验证密码为"hongchh",可以在/server/controller/index.js里面修改密码
# 应用比较简单故没有使用到数据库,所有数据都为文件存储,项目主要关注前端开发
npm run back-end

# 前端开发,localhost:8080
# dev-server已经使用http-proxy完成跟后端API的对接
# 在num run dev之前必须先启动服务器,即在另一个命令行窗口下执行npm run back-end
# 浏览器页面缩放请保持在100%
npm run dev

# 构建最终产品
npm run build

二、成品展示

1
2
3
4

三、基本需求

1、时间记录

  • 添加每一天的时间记录,修改某天的时间记录(因为可能记错或者忘了记某项活动)
  • 每天的记录可以有多项活动,每项活动有对应的时间
  • 每项活动划分到特定的类型
2016-01-20,星期五
1. 学习Vue, 5h,[学习]
2. 跑步,0.5h,[运动]
3. 看霹雳布袋戏,2h,[休闲]

2、数据分析

  • 按照月份统计每天的总时间,按照年份统计每月的总时间,按照分类统计各项内容的总时间
  • 以图表形式展示月份时间支出和年份时间支出的变化情况
  • 以图表形式展示各种类型的活动的时间支出情况
  • 计算总时间和平均时间

3、时光展示

  • 时光轴形式进行活动记录展示,便于回顾总结
  • 轮播图形式进行活动记录展示,便于回顾总结
  • 图片展示活动记录,不使用轮播图,轮播图在记录太多的时候会影响页面流畅程度

4、数据模型

{
  "items": [{
    "content": "string",
    "time": "number",
    "type": "string"
  }],
  "year": "number",
  "month": "number",
  "date": "number",
  "day": "number"
}

数据项示例

{
  "items": [{
    "content": "学习Vue",
    "time": "5",
    "type": "学习"
  }, {
    "content": "跑步",
    "time": "0.5",
    "type": "运动"
  }, {
    "content": "看霹雳布袋戏",
    "time": "2",
    "type": "休闲"
  }],
  "year": "2016",
  "month": "01",
  "date": "20",
  "day": "5"
}

四、开发思路

1、界面构成

  • 整个应用分成2个主要界面:【主界面】,【权限界面】
  • 【权限界面】用于用户登录,也是应用的启动界面
  • 【主界面】包含3个子界面:【管理】,【时光轴】,【时光展】
  • 【时光轴】和【时光展】用于时光展示
  • 【管理】用于展示数据分析结果以及编辑时光记录(添加/修改)

2、跳转关系

  • 【权限界面】验证成功之后跳转到【主界面】
  • 【主界面】默认展示【时光轴】界面
  • 【主界面】顶栏可以选择跳转到【管理】、【时光轴】或【时光展】界面
  • 【主界面】顶栏选择“锁屏”之后回到【权限界面】

3、组件划分

└─App:挂载整个应用
   ├─Auth:【权限界面】
   │  └─StarFlow:【权限界面】底部的动画
   └─Main:【主界面】的基本结构
      ├─Management:【管理】
      │     ├─TimeAnalysisPerMonth:月份时间分析组件
      │     ├─TimeAnalysisPerYear:年份时间分析组件
      │     ├─TimeAnalysisByType:分类时间分析组件
      │     └─EditTimeRecord:时间记录编辑组件
      ├─Timeline:【时光轴】
      └─TimeSlide:【时光展】

4、文件结构

└─build:构建用到的相关文件
├─config:构建的配置文件
├─server:应用的服务器源码
│   ├─controller:服务端业务逻辑
│   ├─model:数据存储逻辑
│   ├─static:静态文件
│   ├─views:应用的视图文件
│   ├─app.js:express服务器配置文件
│   └─server.js:服务器启动文件
├─src:前端开发源码
│   ├─assets:图片等静态资源
│   ├─components:前端组件
│   ├─router:前端路由
│   ├─store:vuex的store
│   ├─App.vue:应用的外层结构
│   └─entry.js:应用的入口文件
└─static:前端开发过程中用到的静态文件
    └─data:存放伪数据以及伪数据生成器