全程真实数据对接 带你从0开发前后端分离的企业级上线项目

课程导学

• 架构设计：前后端完全分离、分层架构、模块化
• 技术选型：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. 架构设计－－模块分析
     

1. 技术选型：软件过程、前后端分离、构建工具、框架、版本控制、发布方式
   • 软件过程选择－－敏捷开发
   • 前后端分离方式－－纯静态html、完全通过接口做数据交互
2. 优点：完全脱离后端模板，系统复杂度低
3. 缺点：不太利于SEO
4. 优化方案：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的转换就能够在浏览器上运行了。

1. webpack降级到1.x版本是因为2.x版本压缩js的uglify会在代码中生成一行代码叫Object.default，default是js switch case
   的关键字，IE8看到这个会不兼容，所以要降回1.15版本

2. 参数说明
   entry：js的入口文件
   externals：外部依赖的声明
   output：目标文件
   resolve：配置别名
   module：各种文件，各种loader
   plugins：插件
3. WebPack Loaders
4. WebPack 常用命令
   webpack -p: 发布时用，最小化压缩
   webpack --watch :监听文件改变，自动编译--开发时用
   webpack --config webpack.config.js :改变默认配置文件
5. 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对脚本的处理
6. Js用什么loader加载？
7. 官方文档上的例子中entry只有一个js,我们有多个怎么办？
8. output里要分文件夹存放目标文件，怎么设置？
9. 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');

10. 我想提取出公共模块怎么处理 ？
    • webpack对CSS的处理
11. 样式使用怎么的loader？
    2.webpack打包的css怎么独立成单独的文件？

    ---

    第四章 项目通用功能开发

    ---

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

    • 通用js封装
12. 网络请求工具
13. URL路径工具
14. 模板渲染工具--hogan
15. 字段验证&&通用提示
16. 统一跳转
    • 页面布局技巧
17. 定宽布局
18. 通用部分的抽离
19. icon-font的引入
20. 通用样式的定义