技术栈

React16 + React-router4 + ES6 + less + Dbox UI

辅助工具

Yarn + webpack3.10 + Git

部署发布

环境配置 | 代码部署 | nginx配置 | 域名解析

功能模块

用户模块：登录 | 退出 | 用户列表
商品模块：商品列表 | 商品详情 | 添加/修改商品
品类模块：品类列表 | 添加品类 | 修改品类名称
订单模块：订单列表 | 订单详情 | 发货

项目展示

http://adminv2.happymmall.com

架构设计

不考虑SEO和兼容性
前后端完全分离 | 单页应用 | 模块化开发
分层架构：工具层 | 服务层 | 逻辑层

核心需求

用户端：展示 | 购物车 | 支付 | 订单 | 用户
后台管理：
商品管理：增删改查
品类管理：增改查，由商品生成，所以无需删除
订单管理：由客户生成，查，订单列表 | 订单详情 | 发货
用户管理：权限，管理员登录 | 用户列表

后管系统的特点

  • 改变习惯成本低，兼容性要求不高

  • UI要求较低，开发效率要求较高

  • 对SEO没有要求

  • 理想的技术实验场！

后端接口定义

接口文档规范（格式）

https://gitee.com/imooccode/happymmallwiki/wikis/Home

模版 // 接口名称
/product/.do // 接口地址
request // 请求信息
response // 响应信息
success
fail

基础知识

资源加载过程

URL解析：协议 + 域名 + 端口 + 路径 + 路径 + 参数 + 哈希
DNS查询：转换成IP地址，DNS缓存 + DNS服务器
资源请求：
浏览器：Request-header + 参数（url 或 body）
服务器：status + Response-header + body

浏览器解析：构建DOM树 | 构建渲染树 | 布局 | 绘制 DOM树遇到JS会等待JS执行完毕，而CSS却是同步加载，不会导致阻塞

优化方案

dns-prefetch

本地存储

Cookie

为了保存用户状态而存在,一般用于存储用户名密码相关信息，一般使用escape转义编码后存储

  • 客户端保存请求信息的机制，在浏览器和服务器端来回传递数据

  • 分号分隔的多个key-value字段

  • 存储在本地的加密文件

  • 域名和路径的限制

  • 存储大小一般不超过4k

  • cookie是不能跨域的

字段：

  • name: cookie 的名称

  • domain: cookie 生效的域名，二级域名是可以使用一级域名的cookie的，但是不能操作其它二级域名的cookie,也不能操作其它三级域名的cookie

  • path: cookie 生效的路径

  • expires: cookie 过期时间,过期时间为session的cookie会在浏览器关闭后被清除

  • HttpOnly: 客户端不可更改

  1. document.cookie // 查看cookie
  2. document.cookie = 'key=value; key1=value1 ' // 设置cookie, 当Domain 和 Path 一致是，会被认为是同一条cookie
  3. // 删除cookie,将过期时间expires设置为0

charls：Chrome插件

Session

可以用来统计当前页面元素的点击次数

  • 服务端保存请求信息的机制

  • 客户端发起http请求时，服务端生成一个sessionId，存放到客户端的cookie里或者请求参数里，或者在http头里面开辟一个token字段

    • setCookie

  • 会话由浏览器控制，会话结束，session失效

localStorage

完全为了前端展示用的，可以用来统计页面访问次数

  • H5新特性

  • 有域名限制，必须完全匹配，没有继承性，不存在作用域概念

  • 只有key-value，被存在一个对象里面，如果有如对象这种引用类型，会存储toString的值，里面的信息就丢失了

  • 没有过期时间，只要不删除就会一直存在

  • 以文件的形式存储在操作系统里，也是不可读的，浏览器关闭后并不会消失

  1. window.localStorage.setItem(key, value) // 添加localStorage
  2. window.localStorage.getItem(key) // 查看localStorage
  3. window.localStorage.renoveItem(key) // 删除localStorage
  4. window.localStorage // 查看localStorage中所有的内容
  6. window.localStorage.setItem(key, JSON.stringify(obj)) // 当value值为引用类型的对象时，需要使其字符串化

sessionStorage

  • 和localStorage及其相似

  • 浏览器关闭后消失

  • 使用方法参考localStorage

前端框架分析

  • 框：约束；架：支撑；框架会控制书写代码时各个部分的结构以及它们之间的依赖关系和交互流程，与业务无关的内容由框架来帮助完成。而后会出现系列的插件和工具，形成框架的生态系统。

  • 随着业务的复杂度越来越高，原生JS已经搞不定了（非技术上的搞不定），几个方面：开发效率 | 成本 | 团队合作效率

使用框架的优缺点

  • 传统的原生JS开发存在的问题 VS 框架可以解决的问题：

    • 代码层面的问题

      • 缺少规划，代码混乱 | 结构化开发

      • 缺少限制，容易冲突 | 独立文件，独立作用域

      • 缺少支撑，能力要求高，需要负责架构，负责工具，负责业务 | 提供支持，只需要关注业务

    • 效率的问题

      • 必须关注除了业务以外的所有的流程 | 只需要关注业务

      • 团队效率低下，代码耦合严重，没有模块的划分 | 可以并行开发

      • 测试效率低下，每次改动影响的就是全局 | 模块测试，自动化测试

    • 多页应用的问题

      • 路由体验问题 | 使用单页路由

      • 加载另一个页面时，前一个页面会立即销毁，无页面切换效果 | 整个页面并没有销毁，页面的切换就是DOM元素的变化，可以添加过场动画

      • 浪费服务器资源 | 减少服务器请求

  • 框架开发的不足

    • 兼容性问题，SEO不好。因此对面向用户的产品上并没有太大的发挥空间

    • 有场景要求，开发自由度降低。如不能用react去做一个3D游戏

    • 黑盒开发，框架本身有出错的风险

    • 有学习成本

三大框架

Angular

  • 2009年，Google，6.X

  • 基于html的大而全的MVC框架

React

  • 2013年05月，Facebook，16.X

  • 基于JS的视图层框架

Vue

  • 2014年02月，尤雨溪，现加入阿里的Weex团队

  • 主要版本：0.1X，1.X，2.X

  • 基于html的视图层的框架

框架对比

框架 | Angular | React | Vue
组织方式 | MVC | 模块化 | 模块化
数据绑定 | 双向 | 单向 | 双向
模板能力 | 强大 | 自由 | 简洁
自由度 | 较小 | 大 | 较大
路由 | 静态路由 | 动态路由 | 动态路由
文档 | 英文 | 英文 | 多语言
上手难度 | 较高 | 较高 | 一般
APP方案 | Ionic | RN | Weex
场景 | 后端开发人员构建CRUD类型应用 | 前端开发人员构建复杂的web应用 | 前端开发人员快速构建web应用

开发环境

  • git

  • node: 偶数版是稳定版

  • yarn: mac下可以用homebrew安装

  • node-sass

  • webpack

git

.gitconfig的配置

ls -al # 可以查看当前目录下所有的文件包括隐藏文件

vim ~.gitconfig

  1. [user]
  2.         email = lulu27753@163.com
  3.         name = lulu27753
  4. [alias]
  5.         co = checkout
  6.         br = branch
  7.         ci = commit
  8.         st = status
  9.         unstage = reset HEAD --
  10.         last = log -1 HEAD
  11.         visual = !gitk

生成SSH公钥：ssh-keygen -t rsa -C “xxx@163.com”
在github新建项目 并 添加个人公钥

在项目根目录下新建gitignore文件
vim .gitignore

  1. .DS_Store
  2. node_modules
  3. dist
  4. *.log
  5. .vscode

yarn 语法

yarn | npm
yarn init | npm init
yarn | npm i
yarn global add [XXX] | npm i [XXX] -g
yarn add [XXX] | npm i [XXX] —save
yarn add [XXX] —dev | npm i [XXX] —save-dev
yarn remove [XXX] | npm uninstall [XXX] —save-dev
yarn run [XXX] | npm run [XXX]

webpack

  • webpack的安装和配置: yarn add webpack@3.10.0 --dev

  • 系统里多个版本webpack项目共存的处理

  • webpack对各种类型文件的处理方式

    • html: html-webpack-plugin

    • js: babel | babel=preset-react

    • css: css-loader | sass-loader | style-loader | extract-text-webpack-plugin

    • 图片/字体：url-loader | file-loader

    • CommonsChunkPlugin 一个模块超过被引用的次数（如3次）就会被放到这个js文件中，从而抽取出通用模块

  • webpack-dev-server:

    • 提供web服务器

    • 为webpack提供web服务，更改代码自动刷新，路径转发

    • yarn add webpack-dev-server@2.9.7 —dev

    • 解决多版本共存的问题

    • devServer.historyApiFallback.index的设置，会使得404或者其他页面都会重定向到该配置的页面下

    • devServer.proxy自动代理到本地接口

      • target

      • changeOrigin: true

React基础知识

生命周期节点

  • Mounting: 挂载阶段

  • updating: 运行时阶段

  • Unmounting: 卸载阶段

  • Error Handing：错误处理（V16新增，只能处理在render里出现的错误）

数据管理

  • 状态提升：找到共同的祖先组件。适合组件层级扁平，兄弟组件通信情况很少的情况。

  • 发布| 订阅 ：订阅中心，事件暴露，不太方便管理，容易造成事件冲突和混乱，数据放在子组件中会有数据冗余的问题。适合业务规模较小，层级较深的业务。

  • Readux单向数据流：业务复杂，组件层级较深，兄弟组件通信密切。

代码的上线

上线前准备

  • 增加上线需要的适配代码

  • 提交pull request

  • 将代码合并到master分支

生产环境配置

  • 安装NodeJS

  • 安装Yarn

  • 安装Git并配置权限

  • 安装Nginx服务器

代码发布过程

  • 拉取最新master分支的代码

  • 项目初始化

  • 执行线上环境的打包编译

  • 复制dist目录到目标目录

nginx 和 域名配置

  • nginx中vhost的配置

  • 通过指定hosts方式做线上回归测试

  • 更改域名解析（要在域名供应商做备案，否则即使域名解析了也是访问不了的）

开发

免费皮肤及模版 | WebThemez