再谈前后端分离式 手把手从0打造电商平台-前端开发

首次推出完整大型电商平台的前端项目，手把手带你打造一套前后端完全分离、分层架构设计、模块化开发的前端线上电商项目，并讲解与服务端真实数据的对接，让你掌握一线互联网前端开发的经验和技巧。【毕设项目精品】

博客插入.png

第1章 课程介绍（更新课程专属大礼包）

本章中会先让大家了解课程整体情况，然后手把手带大家做一些开发前的准备工作。配套的服务端课程：https://coding.imooc.com/class/96.html

• 1-1 课前必读（不看会错过一个亿）

• 1-2 课程导学试看

• 1-3 电商平台需求分析试看

• 1-4 架构设计及技术选型

• 1-5 前后端配合方式及数据接口定义

加vx：dailaoer-com

9.9￥全

第2章 开发环境搭建与开发工具使用技巧

本章会手把手带大家搭建起开发环境，并在正式开发之前，教大家一些提高开发效率的工具使用技巧。（nodejs和npm安装、git安装和配置、sublime使用技巧、chrome调试工具、代理神器charles&Fiddler）

• 2-1 开发环境的搭建

• 2-2 nodejs和npm的介绍与安装（mac，windows）

• 2-3 git的安装和配置（mac，windows）

• 2-4 sublime使用技巧

• 2-5 chrome调试工具

• 2-6 代理神器Charles&Fiddler

• 2-7 本章知识点总结

第3章 项目初始化与基于模块化的脚手架搭建

本章我会手把手带大家对项目进行初始化，包括项目创建，项目结构设计和一整套基于模块化的开发脚手架的搭建（知识点：项目创建、项目结构设计、项目脚手架搭建、npm和webpack初始化、webpack--js、css文件处理、webpack -- html处理、icon-font和图片处理、webpack--dev-server、代码提交，Git远程仓库的规范化用法等）...

• 3-1 项目初始化概要

• 3-2 项目目录结构设计与Git远程仓库的建立

• 3-3 项目脚手架搭建概要

• 3-4 npm和webpack的初始化

• 3-5 webpack对脚本和样式的处理

• 3-6 webpack对html模板的处理

• 3-7 webpack对icon-font和图片的处理

• 3-8 webpack-dev-server

• 3-9 项目初始代码提交与本章知识点总结

第4章 项目通用功能开发

本章中我会先带着大家对项目的业务进行分析，并提取出项目的通用功能，然后手把手带大家完成通用模块的开发，让大家学会代码的高复用技巧。（知识点：通用功能分析和拆分思想、高逼格UI开发经验与技巧，通用模块设计与独立打包方法，通用JS工具类封装、全局样式开发、通用结果提示页开发、通用导航组件开发、通用搜索组件开...

• 4-1 项目通用模块设计和拆分概要（通用JS工具，通用布局，通用样式，通用导航，通用提示页）

• 4-2 通用JS工具类封装（网络数据请求功能）试看

• 4-3 通用JS工具类封装(获取服务端接口url、参数功能)

• 4-4 通用JS工具类封装(hogan 渲染html模板功能)

• 4-5 通用提示功能，验证功能封装（手机号验证，邮箱格式验证，非空验证功能）

• 4-6 通用UI布局，样式开发

• 4-7 通用导航开发(UI 层)

• 4-8 通用导航开发(逻辑层)

• 4-9 通用footer开发

• 4-10 通用header开发

• 4-11 通用侧边导航开发

• 4-12 通用操作提示页开发

• 4-13 代码提交与本章知识点总结

第5章 用户模块开发

本章我会带着同学们分析，拆解用户模块的功能及技术点，并手把手带大家实现登录、注册、找回密码、个人中心、修改密码等功能。（知识点：数据安全性处理方案，表单同步/异步验证，小型SPA开发）

• 5-1 用户模块的设计，功能拆分，交互数据接口解析

• 5-2 登录页面的开发1

• 5-3 登录页面的开发2

• 5-4 注册页面的开发

• 5-5 找回密码页面的开发

• 5-6 个人中心的开发1

• 5-7 个人中心的开发2

• 5-8 修改密码功能的开发

• 5-9 本章知识点总结与课后作业

第6章 商品模块开发

本章我会带着同学们分析，拆解商品模块的功能与技术点，并手把手带大家实现商品首页，商品列表，商品详情等功能（知识点：JQuery插件模块化改造，独立组件抽离技巧，多功能列表开发，轮播图开发、分页组件拆分和封装、商品排序，商品大图与缩略图联动等）...

• 6-1 商品模块的设计，功能拆分，交互数据接口解析

• 6-2 首页左侧关键字导航界面开发

• 6-3 首页Banner及F楼层界面开发1

• 6-4 首页Banner,F楼层界面开发2

• 6-5 商品列表页的开发1

• 6-6 商品列表页的开发2

• 6-7 商品列表页的开发3

• 6-8 商品列表页的开发4

• 6-9 商品列表页的开发5

• 6-10 商品详情页的开发1

• 6-11 商品详情页的开发2

• 6-12 商品详情页的开发3

• 6-13 商品详情页的开发4

• 6-14 代码提交与本章知识点总结

第7章 购物车模块开发

本章我会带着同学们分析，拆解购物车模块的功能与技术点，并手把手带大家开发购物车功能，包括购物车的常见用法、和后端的交互等。（知识点：商品状态随时验证方案，模块内部方法调用方式，非Form提交时的数据验证等）...

• 7-1 购物车模块的设计，功能拆分，交互数据接口解析

• 7-2 购物车页面的实现(UI)1

• 7-3 购物车页面的实现(UI)2

• 7-4 购物车页面的实现(逻辑)1

• 7-5 购物车页面的实现(逻辑)2

• 7-6 购物车页面的实现(逻辑)3

• 7-7 代码提交与本章知识点总结

第8章 订单模块开发

本章我会带着同学们分析，拆解订单模块的功能与技术点，并手把手带大家实现订单的信息填写、订单的生成和确认订单的整个流程。（知识点：Modal式组件封装思想，城市级联操作，复杂表单回填等）

• 8-1 订单模块的设计，功能拆分，交互数据接口解析

• 8-2 订单确认页的开发(UI)1

• 8-3 订单确认页的开发(UI)2

• 8-4 订单确认页的开发(UI)3

• 8-5 订单确认页的开发(逻辑)1

• 8-6 订单确认页的开发(逻辑)2

• 8-7 订单确认页的开发(逻辑)3

• 8-8 订单确认页的开发(逻辑)4

• 8-9 订单列表的开发(UI)

• 8-10 订单列表的开发(逻辑)

• 8-11 订单详情页的开发(UI,逻辑)

• 8-12 代码提交与本章知识点总结

第9章 支付模块开发

本章我会带着同学们分析，拆解支付模块的功能与技术点，并手把手带大家使用支付宝沙箱环境，在没有企业资质的情况下完成支付功能的真实接入，并完成支付功能的开发。（知识点：支付宝功能对接，支付状态动态检测，支付成功回执处理等）...

• 9-1 支付模块的设计，功能拆分，交互数据接口解析

• 9-2 支付页面的开发

• 9-3 代码提交与本章知识点总结

第10章 数据统计和SEO优化

本章我们会做上线前的附加工作，包括访问数据统计（知道活的怎么样），基本SEO优化（想活的更好）等。（知识点：PV/UV,流量来源监控，用户特征分析，SEO原理，关键词设计，SEO监控等）

• 10-1 生产环境适配

• 10-2 基本的SEO优化

• 10-3 访问数据统计

• 10-4 本章知识点总结

第11章 后台管理系统介绍（附赠内容）

本章作为附赠内容，会为大家提供一套基于React技术后台管理系统源码，并对关键代码与技术点进行讲解，以方便大家能搭建起自己的后台管理系统。（知识点：React项目结构的设计、router原理及React-Router简介、React组件的封装方法 sass等），后台管理系统测试账号和密码（切勿修改，导致其他同学体验不了） 账号：admin ...

• 11-1 后台管理系统介绍

• 11-2 后台管理系统功能演示

• 11-3 后台管理系统代码演示

第12章 线上环境配置与项目自动化发布

本章我会教同学们把我们之前开发完成的代码发布到线上，包含线上域名的解析、线上nginx的配置、线上基于shell的自动化发布脚本的编写等内容。让我们开发出的项目跑在真实的生产环境上，成为自己的一款上线作品。（知识点：线上阿里云服务器环境搭建，自动化发布脚本编写，域名规划与nginx配置，可用性监控，外部监控原理，...

• 12-1 项目上线过程

• 12-2 线上服务器环境搭建

• 12-3 发布流程及发布脚本的开发

• 12-4 nginx配置和域名解析

• 12-5 网站可用性监控

• 12-6 本章知识点总结

第13章 课程总结与下期内容展望

本章会带着大家一起对电商平台相关知识点以及界面用到的相关技术点，框架等进行总结。同时也对下期内容进行一个展望，期待能一步步把这个项目不断演进，最后非常感谢大家的支持，有你们的支持，我将更加有动力，并努力的把更多更好的课程做好，回馈给大家。...

• 13-1 课程总结与下期课程展望

第14章 服务端课程体验

本章为大家开通服务端课程体验内容，初衷是希望能降低大家学习服务端课程的选择风险，让大家少走冤枉路，少花冤枉钱，祝大家学习愉快！

• 14-1 课程导学

• 14-2 课程学习与解决问题指南（最重要的一节课）

• 14-3 大型Java项目架构演进解析

• 14-4 用户模块开发概要与接口设计讲解

• 14-5 登录功能开发

• 14-6 登出，注册，校验功能开发

• 14-7 获取用户登录信息，忘记密码，提示问题与答案，重置密码功能开发

• 14-8 忘记密码中的重置密码功能开发

• 14-9 登录状态下重置密码功能开发

• 14-10 更新用户个人信息功能开发

• 14-11 获取用户详细信息功能开发及MD5加密补充

• 14-12 用户模块所有功能自测试