电商平台系统-前端

1. 系统架构设计

1. 前后端完全分离（rest 接口）

2. 分成架构

   常见分层方式：MVC、MVVM

3. 模块化

   模块化方案：AMD、CMD、CommonJS、ES6

   

2. 技术选型

1. 技术选型方案

   

   目录结构设计：

   

2. 软件过程

   敏捷开发：是一种迭代的意识和方法，而不是概念和工具

   优点：能够应对满足不断变化的需求

   缺点：对团队成员的能力要求比较高

3. 前后端分离

   完全分离：

   1. 方案 1：velocity，发布的时候同步到后端

      优点：能直接生成动态的模板，利于 SEO

      缺点：系统复杂度高、需要前后端同时发布

   2. 方案 2：纯静态 html、完全通过接口做数据交互

      优点：完全脱离后端模板，系统复杂度低

      缺点：不太利于 SEO

      优化方案：Server Render/蜘蛛定制页面

4. 构建工具 ：Grunt、Gulp、Webpack

5. 框架

   

6. 版本控制：svn、git

7. 发布方式

   

   

3. 系统模块设计

1）基础框架的搭建

1. 双平台的开发环境安装
2. git 仓库的规范化用法
3. webpack 脚手架搭建

2）通用模块

1. 可高复用工具类设计与封装
2. 通用模块设计与独立打包方法
3. 高逼格 UI 开发经验与技巧

3）系统业务模块

用户模块

1. 数据安全性处理方案
2. 表单同步/异步验证
3. 小型 SPA 开发

商品模块

1. jQuery 插件模块化改造
2. 独立组件抽离技巧
3. 多功能列表开发

购物车模块

1. 商品状态随时验证方案

2. 模块内部方法调用方式

3. 非 Form 提交时的数据

订单模块

1. Modal 式组件封装思想
2. 城市级联操作
3. 复杂表单回填

后台管理（附）

1. 后台管理实现思路

2. React 框架及其组件化

3. React-Router 单页应用的使用

4）系统后续管理

访问数据分析

1. PV / UV
2. 流量来源监控
3. 用户特征分析

SEO 优化

1. SEO 原理
2. 关键词的设计
3. SEO 监控

线上部署

1. 线上服务器环境搭建
2. 自动化发布脚本比编写
3. 域名规划与 nginx 配置

可用性监控

1. 外部监控原理
2. 第三方监控的设置
3. 更高级的监控方式

4）业务核心需求

用户端

1. 商品展示模块：首页、商品列表、商品详情
2. 购物车模块：购物车数量、添加删除商品、购物车提交
3. 下单模块：下单
4. 支付模块：支付
5. 订单模块：订单确认（地址管理）、订单提交、订单列表、订单详情
6. 用户账户模块：登录、注册、个人信息、找回密码、修改密码

后台管理

1. 商品管理：添加/编辑商品、查看商品、下架
2. 品类管理：添加品类、查看品类
3. 订单管理：订单列表、订单详情、发货
4. 管理员登录：权限