电商平台搭建笔记

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

课程导学

架构设计：前后端完全分离、分层架构、模块化
技术选型：html、css、js、jquery
辅助工具：Webpack、NodeJs、NPM、Shell
效率工具：Sublime、Chrome、Charles、Git　
课程安排：一：基础框架的搭建（１）双平台的开发环境按照（２）git仓库的规范化用法（３）webpack脚手架搭建实战
　　　　　二：通用模块（１）可高复用工具类设计与封装（２）通用模块设计与独立打包方法（３）高逼格UI开发经　验与技巧
　　　　　三：用户模块（１）数据安全性处理方案（２）表单同步/异步验证（３）小型SPA开发
　　　　　四：商品模块（１）jQuery插件模块化改造（２）独立组件抽离技巧（３）多功能列表开发
　　　　　五：购物车模块（１）商品状态随时验证方案（２）模块内部方法调用方式（３）非Form提交时的数据验证
　　　　　六：订单模块（１）Modal式组件封装思想（２）城市级联操作（３）复杂表单回填
　　　　　七：支付模块（１）支付宝支付功能对接（２）支付状态动态检测（３）支付成功回执处理
　　　　　八：管理后台（１）管理后台实现思路（２）React框架及其组件化（３）React-Router的使用
　　　　　九：访问数据分析（１）PV/UV（２）流量来源监控（３）用户特征分析
　　　　　十：SEO优化（１）SEO原理（２）关键词的设计（３）SEO监控
　　　　　十一：线上部署（１）线上服务器环境搭建（２）自动化发布脚本编写（３）域名规划与nginx配置
　　　　　十二：可用性监控（１）外部监控原理（２）第三方监控的设置（３）更高级的监控方式
需求分析
需求拆分原则：一：单个迭代不宜太大
　　　　　　　　　　二：需求可交付，能够形成功能闭环
　　　　　　　　　　三：有成本意识，遵循二八原则
　　　　　　　　　　四：有预期的价值提现
提炼核心模块

　　　　
电商功能拆分－－用户端
1. 商品　->首页、商品列表、商品详情
2. 购物车　->购物车数量、添加删除商品、购物车提交
3. 订单　->订单确认（地址管理）、订单提交、订单列表、订单详情
4. 支付　->支付
5. 用户　->登录、注册、个人信息、找回密码、修改密码
电商功能拆分－－管理后台
1. 商品管理　->添加/编辑商品，查看商品，下架
2. 品类管理　->添加品类，查看品类
3. 订单管理　->订单列表，订单详情、发货
4. 权限　->管理员登录
  架构设计和技术选型
5. 架构设计－－分层架构
  定义：把功能相似，抽象级别相近的实现进行分层隔离
  优势：松散耦合（易维护、易复用、易扩展）
  常见分层方式：MVC和MVVM
6. 架构设计－－模块化
  定义：解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程
  意义：解耦，可并行开发
  模块化方案：AMD，CMD，CommonJS，ES6
7. 架构设计－－模块分析

技术选型：软件过程、前后端分离、构建工具、框架、版本控制、发布方式
- 软件过程选择－－敏捷开发
- 前后端分离方式－－纯静态html、完全通过接口做数据交互
优点：完全脱离后端模板，系统复杂度低
缺点：不太利于SEO
优化方案：Server Render/蜘蛛定制页面
- 框架选型：jQuery、Angular、Avalon、Vue、React

构建工具：Webpack
版本控制：git
发布方式

前后端配合方式及数据接口定义

电商平台搭建笔记

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

项目目录结构设计与Git远程仓库建立

git仓库的建立：git项目建立、git权限配置、gitignore的配置
目录结构的设计

项目脚手架搭建概要

webpack搭建注意事项

webpack是天生支持commonJS规范【注意：commonJS是一个规范而不是什么语言或者插件】nodeJS是common JS规范的实现，webpack的编译原理是使用nodeJS把commonJS规范下的模块全部转换成浏览器支持的function形式的模块，然后再用模块加载器来组织这些模块，这样一来，commonJS的模块化方案通过webpack的转换就能够在浏览器上运行了。

webpack降级到1.x版本是因为2.x版本压缩js的uglify会在代码中生成一行代码叫Object.default，default是js switch case
的关键字，IE8看到这个会不兼容，所以要降回1.15版本
参数说明
entry：js的入口文件
externals：外部依赖的声明
output：目标文件
resolve：配置别名
module：各种文件，各种loader
plugins：插件
WebPack Loaders
WebPack 常用命令
webpack -p: 发布时用，最小化压缩
webpack --watch :监听文件改变，自动编译--开发时用
webpack --config webpack.config.js :改变默认配置文件
webpack-dev-server：监听文件的改变并自动刷新浏览器
作用：前端开发服务器
特色：可以在文件改变时，自动刷新浏览器
安装：npm install webpack-dev-server --save-dev
配置：webpack-dev-server/client?http://localhost:8088
使用：webpack-dev-server --port 8088 --line
- npm和webpack的初始化
  1.npm的初始化：
```
> npm install
```
  2.webpack的安装
  首先在全局安装webpack:
```
> sudo npm install webpack -g
```
  本地项目中安装1.15.0版本的webpack
```
> npm install webpack@1.15.0 --save-dev
```
  webpack对脚本和样式的处理
- webpack对脚本的处理
Js用什么loader加载？
官方文档上的例子中entry只有一个js,我们有多个怎么办？
output里要分文件夹存放目标文件，怎么设置？

Jquery引入方法？

> npm install jquery --save 然后就可以在js文件中通过require方式引入了 var $ = require('jquery'); $('body').html('hello');

利用第三方cdn

首先需要在html文件中引入第三方cdn 然后通过webpack配置文件 externals: { 'jquery': 'window.jQuery',//其中jquery来自于全局对象window.jQuery }, 最后：在js文件中通过require方式引入 var $ = require('jquery'); $('body').html('hello');

我想提取出公共模块怎么处理？
- webpack对CSS的处理
样式使用怎么的loader？
2.webpack打包的css怎么独立成单独的文件？
第四章项目通用功能开发

项目通用模块设计和拆分概要（通用JS工具，通用布局，通用样式，通用导航，通用提示页）
- 通用js封装
网络请求工具
URL路径工具
模板渲染工具--hogan
字段验证&&通用提示
统一跳转
- 页面布局技巧
定宽布局
通用部分的抽离
icon-font的引入
通用样式的定义

作者： yqyily
链接：https://www.imooc.com/article/21181
来源：慕课网

秒客网

电商平台搭建笔记

课程导学

需求分析

架构设计和技术选型

前后端配合方式及数据接口定义

项目目录结构设计与Git远程仓库建立

项目脚手架搭建概要

webpack对脚本和样式的处理

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

相关文章