手把手从0打造电商平台前端

第一章 课程介绍与开发前的准备工作

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的引用

        通用样式的定义

没有设计师,程序员怎么办

        能爽死强迫症的对齐

        你不知道的对称美

        扁平化多简单

        保持一定距离

        配色是一门学问,但灰色比较百搭

通用导航条的开发

 

通用页面头部的开发

通用侧边导航的开发

通用结果提示页的开发

未完...