第一章 课程介绍与开发前的准备工作
1.1
课程目标
掌握一个电商网站从设计到上线的整个过程所涉及的流程
具备独立开发一个前端项目的能力
让你一开始就比别人起点更高,获得更快速的成长
掌握开发过程中各种坑的解决思路和方法
架构设计
前后端完全分离
分层架构
模块化
技术选型
HTML css js jQuery
辅助工具
webpack
nodejs
npm
shell
效率工具
sublime
Chrome
Charles
Git
课程安排
1.2电商平台需求分析
电商平台有什么
需求拆分原则
单个迭代不宜太大
需求可交付,能够形成功能闭环
有成本意识,遵循二八原则
有预期的价值体现
提炼核心需求
电商功能拆分--用户端
商品->首页,商品列表,商品详情
购物车->购物车数量,添加删除商品,购物车提交
订单->订单确认(地址管理),订单提交,订单列表,订单详情
支付->支付
用户->登录,注册,个人信息,找回密码,修改密码
电商功能拆分--管理后台
商品管理->添加编辑商品,查看商品,下架
品类管理->添加品类,查看品类
订单管理->订单列表,订单详情,发货
权限->管理员登录
参与感
更深入了解业务和需求
丰富其他领域的知识
提防不靠谱的需求
1.3 架构设计
架构设计--分层架构
定义:把功能相似,抽象级别相近的实现进行分层隔离
优势:松散耦合(易维护,易复用,易扩展)
常见分层方式:MVC,MVVM
架构设计--模块化
定义:解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程
意义:解耦,可并行开发
模块化方案:AMD,CMD,CommonJS,ES6
模块化方案
AMD,reactjs在推广化过程中的规范化产出
CMD,
CommonJS,
ES6
架构设计
技术选型
软件过程选择--敏捷开发
定义:以用户的需求进化为核心,采用迭代,循序渐进的方法进行软件开发
是一种迭代的意识和方法,而不是概念和工具
优点:能够应对满足不断变化的需求
不足:对团队成员的能力要求比较高
前后端分离方式--不分离
前后端共用同一项目目录,甚至页面内嵌js,css
本地开发环境搭建成本高
共同维护成本高
发布风险高
前后端分离方式--部分分离
后端负责页面模板(JSP/velocity/freemarker)
本地开发环境搭建成本较高
更新页面模板仍需后端协助,效率不够高
需要前后端同时发布
前后端分离方式--完全分离1
方案1:velocity,发布的时候同步到后端
优点:完全分离,能直接生成动态的模块,利于SEO
缺点,系统复杂度高,需要前后端同时发布
前后端分离方式--完全分离2
方案2:纯静态html,完全通过接口做数据交互
优点:完全脱离后端模板,系统复杂度低
缺点:不太利于 SEO
优化方案:server render/蜘蛛定制页面
框架选型
构建工具
版本控制:
发布方式--发布过程
发布方式--域名分布
刚刚都做了哪些选择?
软件过程:敏捷开发
前后端分离:完全分离,纯静态方式
模块化方案:CommonJS+webpack
框架选择:用户端jQuery+css,管理系统react+sass
版本控制:git
发布过程:拉去代码->编译打包->发布到线上机器
第二章 开发环境搭建与开发工具使用技巧
2.1 开发环境的搭建
开发环境
语言环境:
开发工具:
2.2 node.js,npm的介绍和安装
nodejs简介
定义:js的服务器端运行环境
用途:构建webpack的环境依赖
特点:单线程,异步编程
应用场景:低运算,高I/O
nodejs的包管理工具--npm
nodejs安装:
2.3 Git的安装和配置
介绍:Git是一款免费,来源的分布式版本控制系统,用于敏捷高效的处理任何或小或大的项目
Git常用命令
Git配置--gitconfig
2.4 sublime使用技巧
sublime优点:
功能设计合理,支持多光标操作
轻量级,运行速度快,使用流畅
界面简洁美观,有利于集中注意力
扩展性良好
sublime常用设置
快捷键:
2.5 Chrome调试工具
2.6 代理神器Charles/fiddler
HTTP代理的原理
项目开发中的作用
Charles or fiddler
2.7 本章回顾
第三章 项目初始化与基于模块化的脚手架搭建
3.1 项目初始化
有什么好初始化的?
项目目录
项目工具
3.2 git仓库的建立
git仓库的建立:
git项目建立
git权限配置
gitignore的配置
目录结构的设计:
新建组织->新建项目
git clone 远程ssh地址->配置ssh key->项目公钥管理->git clone 远程ssh地址
.gitigonre:
3.3 项目脚手架的搭建
npm init
npm install
webpack
webpack的安装
webpack安装的疑问
webpack.config.js
webpack loaders
webpack常用命令
webpack-dev-server
3.4 脚手架搭建
npm init
3.5 webpack对脚本和样式的处理
对脚本的处理
对样式的处理
第四章 项目通用功能开发
通用js工具的封装
网络请求工具
URL路径工具
模板渲染工具--Hogan
字段验证&&通用提示
统一跳转
页面布局
页面布局技巧
定宽布局
通用部分的抽离
icon-font的引用
通用样式的定义
没有设计师,程序员怎么办
能爽死强迫症的对齐
你不知道的对称美
扁平化多简单
保持一定距离
配色是一门学问,但灰色比较百搭
通用导航条的开发
通用页面头部的开发
通用侧边导航的开发
通用结果提示页的开发
未完...