前后端项⽬对接流程梳理课程⽬标
掌握⼀个电商⽹站从设计到上线的整个过程所涉及的流程
具备独⽴开发⼀个前端项⽬的能⼒
⽹址
架构设计
前后端完全分离
分层架构
模块化
技术选型
HTMl CSS JS jQery
辅助⼯具
Webpack NodeJs NPM Shell
效率⼯具
Sublime Chrome Charles Git
课程安排
//基础框架的搭建
双平台的开发环境安装
git仓库规范化⽤法
webpack脚⼿架搭建实战
//通⽤模块
可⾼复⽤⼯具类设计与封装
通⽤模块设计与独⽴打包⽅法
⾼逼格UI开发经验与技巧
//⽤户模块
数据安全性处理⽅案
表单同步/异步验证
⼩型SPA开发
//商品模块
jQuery 插件模块改造
独⽴组建抽离技巧
多功能列表开发
//购物车模块
商品状态随时验证⽅案
模块内部⽅法调⽤⽅式
⾮Form提交时的数据验证
//订单模块
Modal式组件封装思想
城市联动操作
复杂表单回填
//⽀付模块
⽀付宝⽀付功能对接
⽀付状态动态监测
⽀付成功回执处理
//后台管理
管理后台的实现思路
React框架及组件化
React-Router的使⽤
//访问数据分析
pv/uv
流量来源监控
⽤户特征分析
//SEO优化
SEO原理
关键词设计
SEO监控
/
/线上部署
jquery在项目里是干啥的线上服务器的搭建
⾃动化脚本编写
域名规划与nginx配置
//可⽤性监控
外部监控原理
第三⽅监控设置
更⾼级监控⽅式
电商平台需求分析
//需求拆分原则
单个迭代不宜太⼤
需求可交付，能够形成功能闭环
有成本意识，遵循⼆⼋原则
有预期的价值体现
//提炼核⼼需求
⽤户端（展⽰购物车下单⽀付订单⽤户）
后台管理（商品管理品类管理订单管理管理员登陆）
//电商功能拆分--⽤户端
商品》⾸页商品列表商品详情
购物车》购物车梳理阿哥，添加删除商品购物车提交
订单》订单确认（地址管理），订单提交，订单列表，订单详情
⽀付》⽀付
⽤户》登陆注册个⼈信息回密码修改密码
/
/电商功能拆分--管理后台
商品管理》添加/编辑商品查看商品，下架
品类管理》添加品类查看品类
订单管理》订单列表订单详情发货
权限》管理员登陆
//参与感
更深⼊了解业务和需求
丰富其他领域的知识
堤防不靠谱的需求
1-3 架构设计及技术选型
//架构设计--分层架构
定义：把功能相似，抽吸那个级别相近的实现进⾏分层隔离
优势：松散耦合（易维护易复⽤易扩展）
常见的分层⽅式： MVC MVVM
//架构设计--模块化
定义：解决⼀个复杂问题时，⾃顶向下逐层把系统划分成若⼲模块的过程
意义：解耦可并⾏开发
模块化⽅案： AMD CMD CommonJS ES6
//技术选型
软件过程
软件过程选择--敏捷开发
定义：以⽤户需求进化为核⼼，采⽤迭代，循序渐进的⽅法进⾏软甲开发是⼀种迭代的意识和⽅法，⽽不是概念和⼯具
优点：能够应对满⾜不断变化的需求
不⾜：对团队成员的能⼒要求⽐较⾼
前后端分离
前后端分离⽅式--不分离
前后端公⽤⼀项项⽬⽬录，甚⾄页⾯内嵌js，css
本地开发环境搭建成本⾼
共同维护成本⾼
发布风险⾼
前后端分离⽅式--部分分离
后段负责页⾯模版（JSP／Velocity／Freemarker）
本地开发环境搭建成本较⾼
更新页⾯模板仍需要后段协助，效率不够⾼
需要前后端同时发布
前后端分离⽅式--完全分离1
⽅案1：velocity发布的时候同步到后段
优点完全分离，能直接⽣成动态的模版，利于SEO
缺点：系统复杂度⾼，需要前后端同时发布
前后端分离⽅式--完全分离2
⽅案2：纯静态html完全通过接⼝做数据交互
优点：完全脱离后段模版，系统复杂程度低
缺点：不利于seo
优化⽅案：Server Render／蜘蛛定制页⾯
框架
jQuery Angular Avalon Vue React
css Less Sass
⽤户端（求稳⽤户类多样有SEO要求多页应⽤）选⽤jQuery css
管理系统（求快⽤户类型单⼀⽆SEO要求）选⽤React Sass
构建⼯具
Grunt Gulp Webpack
选⽤Webpack
版本控制
svn git
选⽤git
发布⽅式
拉取代发布代码》编译⼤包》发布到线上机器
发布⽅式--域名规划
html > www./admin
js+css > s.
image > img.
技术选型总结
软件过程：敏捷开发
前后端分离：完全分离，纯静态⽅式
模块发⽅案：CommonJS+Webpack
框架选择：⽤户端jQuery+css管理系统React
版本控制：git
发布过程：拉去代码》编译打包》发布到线上机器
1-4 前后端配合⽅式及数据接⼝定义
前后端配合⽅式及数据接⼝的定义
//职责范围
后端（数据存储⽂件服务数据接⼝）
前端（数据请求数据处理页⾯展⽰）
/
/接⼝⽂档规范--格式
模板-- 接⼝名称
／product.do --接⼝地址
request  --请求信息
reponse --响应信息

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。