开发者学堂课程【基于STM32的端到端物联网全栈开发：前端服务开发（1）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/574/detail/7947
前端服务开发（1）
内容介绍：
一、前端的基本概念
二、前端的开发语言
三、前端 web 应用的开发流程
四、认识前端框架小结
五、React 技术方案
六、化繁为简的 umi 框架
七、丰富高质组件库 AntDesign
八、数据流方案 dva
内容简介：
1、前端框架，初始化首个前端项目，组件的使用和数据流转，部署。
2、在本节课程中将从前端技术的概念与知识技能入手，介绍前端开发流程以及历史演变，学习目前流行的几款前端开发框架，了解学习穿插有一个前端项目实战的案例，在实战中大家将会使用到 React、Umi.js、Ant Design，dva.js 等优秀的前端框架。
3、web 端应用是指运行在笔记本移动浏览器上供用户交互浏览的页面程序，通过电脑浏览器打开的网页、在线视频甚至运行在浏览器上的各类小游戏都属于前端开发的体系范畴。在 iot 时代，传统的互联网开发在朝着更加适合物的交互的方向发展，前端也成为用户与海量 iot 设备交互的第一媒介，是迈向物联网全站开发所必须掌握的技术技能。
4、本章内容共分为6个小节从认识前端技术原理到实现用框架搭建一个完整的前端系统，其中第三小节开始进入实践环节，将使用示例代码一步一步进行调试与搭建。
（1）认识前端框架
了解 React
学习 Umi.js
学习 Ant Design
了解 dva.js
（2）初始化并运行第一个后端项目
安装 yarn 包管理工具
全局安装 umi
使用脚手架初始化
Umi 路由页面添加
（3）创建和使用组件
Layout 组件
主页面创建
组件引入
组件完善
（4）使用 dva 实现数据流转
数据请求
Dva 管理数据
（5）应用调试与部署
项目打包
项目部署
一、前端的基本概念
1、首先通过前章节了解一下本次前端教程的各小节内容，前端基本开发流程以及主要用到的编程语言。
2、在软体架构和程序设计领域，前端是指软件系统中直接和用户交互的部分，而后端控制着系统的输出，将软件分为前端和后端是一种将软件不同功能的部分相互分离的抽象。
3、在前后端分离之前，前端页面常常嵌入在后端系统中，后端将前的页面所需要呈现的代码生成出来，然后给浏览器渲染。
（1）前端负责展示，后端渲染出前端文件
通过 jsp、jinja 等技术，后端接收到请求后将前端页面“渲染出来”返回给浏览器。
（2）后端（数据接口）网络请求前端（UI应用）
随着浏览器的性能逐渐强大，运行在浏览器的 JavaScript 代码通过 ajax 等技术向后端进行网络请求，实现了前后端的分离。
二、前端的开发语言
学习任何一门开发知识之前，都要了解相关的编程语言，在不断应用中，需要了解 html, css，JavaScript。
1、HTML
HTML 即超文本标记语言，是用来描述网页的一种语言，与编程语言不通，标记语言用来记录信息而非执行逻辑处理，HTML 语言的内容被各类标签所包裹。
<htm|>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</htm|>
在浏览器打印两段文字，会看到浏览器渲染出来标题与段落。
2、Javascript
Javascript 是一种直译式的脚本语言，不需要经过编译为机器码运行，而是直接有解释器运行，它的解释器被称为加速的引擎。JavaScript 是一种直译式的脚本语言，是一种动态的解释形语言。JavaScript 不需要经过编辑为机器码再运行，而是直接可以由解释器运行，它的解释器被称为 JavaScript 引擎，内置在各类浏览器中，JavaScript 最早是在HTML 网页上使用，用来给HTML网页增加动态功能，目前也已经拓展到服务端与硬件端。
<Script>{JS 内容}</Script>
在浏览器文件中加粗的内容有 Script 的标签进行包裹。
3、CSS
CSS 是指层叠样式表，定义如何显示 HTML 元素，一般存储在.CSS 后缀的文件中，通过 HTML 标签中的 className 以及 id 属性来进行绑定。
h1 {color:red; font-size:14px;]
以上 CSS 代码声明了 HTML中<h1>标签的文字颜色为红色，字体大小为14px，凡是在引入此 CSS 文件的 HTML 页面，被<h1></h1>标 签包裹的字体都会被此 CSS 所影响。
三、前端web应用的开发流程
需求 |
明确前后端系统需要实现的功能 |
web 页面 UI 设计 |
前端页面具象化，明确页面样式、交互功能 |
API 接口约定 |
前后端约定 APl 调用接口数据格式 |
前端编码 |
前端代码编写 |
前后端联调测试 |
通过 AP| 接口进行前后端功能联调 |
部署上线运维 |
前端程序部署到服务器，并依据系统能力进行扩容与负载均衡 |
交付 |
软件交付验收 |
前端 web 应用的开发流程如上所示，大致可以分为从需求确认、web 页面 UI 设计、API 接口约定、前端编码、前后端联调测试，部署上线运维到最终交付7个环节。
1、前端UI 设计
以当前的智能家居教室为例，一个简单的智能家居看板，传感器采集设备的温湿度进行上报，并显示在前端界面，但温度超过所设置的预制后会发生报警。前端需要将设备温湿度在线状态，当前报警状态,设备历史温湿度数据，设备历史报警数据等进行整治，其中单个设备的历史数据通过起止时间进行查询，通过前端 UI 对设备的温湿度预时进行设定，前端对设备的再离线，是否报警需要有区别的进行显示，但报警发生时点击报警指示的 logo，可以向后方发送请求清除报警状态，最终实现了前端编码输出效果图。
2、API 接口约定
API 名称 |
API 内容 |
clearAlarm |
下发命令取消设备的报警状态 |
listDeviceName |
查询设备号，请求设备列表 |
queryAlarmHistoryLogs |
查询设备历史报警记录 |
queryDeviceProp |
查询设备属性(温湿度数据) |
queryDevicePropHistoryLogs |
查询设备历史属性(温湿度数据) |
setDeviceProperty |
设定设备属性(温度报警阈值) |
为了实现前后端功能，API 接口定义如上，共有6条 API 接口。
四、认识前端框架小结
本小节重点介绍以下4个较为流行的框架方案，分别为由 Facebook 开源的 react，阿里提供的 Umi 米和 Dva 以及 Ant Design UI组件库。
1、React 框架提供底层技术支撑;
2、Umi.js 框架集成了页面路由、项目打包等工具，简化开发者配置与繁杂的操作;
3、Ant Design 提供了丰富的页面 UI 组件库;
4、dva.js 提供数据流方案，将 UI 和数据解耦，提高前端的开发效率。
为什么有这么多框架？随着机器能够不断提升，前端技术也在不断的推陈出新。众多框架的出现，一方面得益于JavaScript 的社区的繁荣，根本上是前端丰富的应用功能需求，推动着前端技术的推陈出新。在这些框架中，有的功能相近或相同，有的功能互补可以搭配使用。在接下来介绍的几位当前社区较为为热门的框架方案，React 提供底层技术支撑，工艺集成了页面路由项目打包工具，简化开发者配置以及反弹的操作，Ant Design 提供了丰富的页面UI组件库，dva.js 提供数据流方案，将UI和数据解耦提高其中的开发效率。
五、React 技术方案
React(React.js 或 ReactJS)是一个为数据提供渲染为 HTML 视图的开源 JavaScript 库。由 Facebook 在2013年instgram 项目上进行开源，具有以下特点:
（1）声明式设计: React 采用声明范式，屏蔽底层，开发者可以轻松描述构建应用。
（2）高效:React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互，从而提升页面性能。
（3）灵活:React 可以与已知的库或框架很好地配合。
（4）JSX : JSX 是 JavaScript 语法的扩展，即为 JavaScript 和 XML 的混合体。
（5）组件:通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
（6）单向响应的数据流: React 实现了单向响应的数据流，从而减少了重复代码。
1、虚拟DOM
（1）浏览器是如何呈现一个页面的
a 解析 HTML，并生成一棵 DOM tree
b 解析各种样式并结合 DOMtree 生成一棵 Rendertree
c 对 Rendertree 的各个节点计算布局信息，比如 box 的位置与尺寸
d 根据 Rendertree 并利用浏览器的 UI 层进行绘制，页面上的内容越复杂，需要计算内容就越多，从而对浏览器的性能要求就越高。
浏览器 webkit 引擎渲染过程如下：
（2）DOM(文档对象模型)
DOM 是 HTML. XML 文档的 JavaScript 对象模型，提供丰富的对象操作与查询接口。浏览器通过 HTML 解析器将HTML 文件解析成为 DOM 树并送到下游功能块渲染，JavaScript 脚本可以通过 DOM 提供的接口直接对浏览器中的DOM 树进行重构，从而引发下游模块的重新计算与渲染(Layout) 。
（3）尽量减少对 DOM 的操作
对 DOM 的每一次修改会引发 RenderTree 的重新计算，占用大量的浏览器资源，容易造成页面卡顿崩溃的情况，降低了前端应用的体验。
（4）前端请求到新数据，重新渲染整个 DOM 会对浏览器造成很大的性能损耗，如何进行有效的渲染?
React 提出了基于虛拟 DOM 差分的渲染方案，带来最小干扰。
如左边图所示，用户使用件数和浏览器的档案进行交互，例如点击按钮，触发事件被 web 应用的 js 程序捕捉到得到新的数据，需要对 DOM 的内容进行更新，则直接的让 DOM 进行了操作，造成了较大的渲染量。
而在右图中坚持程序将渲染内容交给虚拟 DOM，虚拟 DOM 计算出与浏览器目前的 DOM 结构差分的部分进行更新，实现了对 DOM 的最小干扰，提高了运行以及加载效率。
2、JSX (JavaScript + XME)
（1）JSX
react 定义的一种类似于 XML 的 JS 扩展语法:XML+JS。js 中直接可以套标签，但标签要套 jS 需要放在{}中，JSX 用来创建 react 虚拟 DOM 对象，在{}括号中的元素会自动当做 JavaScrip t执行，而外部的 XML(HTML 内容)可以给VirtualDOM 执行。JSX 语言的程序是不能被浏览器识别并直接运行的，需要转化成为浏览器可以识别的HTML+JavaScript+CSS 内容，React 提供 Babel.js 来进行处理，而开发者无需考虑和感知。
const element = <h1> Hello, world!</h1>;
（2）特点
JSX 执行更快，它在编译为 JavaScript
它是类型安全的，在编译过程中就能发现
使用 JSX 编写模板更加简单快速。
3、react 的核心思想-组件
1、随着前端项目越来越复杂，将复杂的项目简单化是必由之路, react 提供了组件化的编程办法，是用多个组件复用组成，复杂的页面组建是 react 的核心思想，react 中一切都是基于组件的，可以通过定义一个组件，然后在其他组件中，可以像html标签一样可以引用它。
import React，{ Component } from 'react' ;
import { render } from ' react-dom' ;
class HelloMessage extends Component {
render() {
return <div>Hello {this. props. name}</div>;
}
} 通过组件的 props 传参
//加载组件到 DOM 元素 mountNode
render( <HelloMessage name="John" />, mountNode) ;
输出: Hello John
既为自定义的 hello message 组件，通过组件的 props 传参，既可以接触到来自组件外部的属性参数，组件大大提升了react的应用的可拓展性和项目的可重用性，开源的高质量组件可以帮助开发者快速搭建其想要的前端应用。
可以通过<ComponentName></ComponentName>的方式进行组合
将庞大的前端项目功能分散成若干个小的组件 React 前端项目，是大量组件组合的产物进行组装，增强各组件的可移植性和复用开发效率，可一定程度上理解成“ 搭积木”。
2、Component (组件)
（1）React 的组件都要继承 React 提供的 Component 类，并可以实现组件的生命周期函数，以供在页面渲染时调用，React 也为组件提供丰富的 API 接口供调用。
（2）React 将组件看做状态机，当组件的状态发生变化时会引起组件的重新渲染。在组件中有内部状态(state)和外部状态(属性，props)。均可通过 this.state 和 this.props 访问，在 render()函数中绑定 state或 props 数据后，待数据发生变化对引起 render 函数的重新执行，组件执行重新渲染。
（3）组件常用 API 如表所示，后面实现环节主要的 API 为 setState，即为更新组件的 state 内容，从而触发组件的重新渲染，组件就会自动更新显示数据的内容。
组件 API |
|
设置状态 |
setState 开发中用到 |
替换状态 |
replaceState |
替换属性 |
replaceProps |
强制更新 |
forceUpdate |
获取 DOM 节点 |
findDOMNode |
判断组件挂载状态 |
isMounted |
（4）组件的生命周期函数是指组件在被加载卸载，组建内外部发生，变化时自动执行的回调函数主要用到周期函数，如下表所示 Component (组件)生命周期函数。
主要用到的组件生命周期函数 |
|
componentWillMount |
在渲染前调用，常用在预先请求数据或执行复杂渲 染。 |
componentDidMount |
在第一次渲染后调用，之后组件已经生成了对应的 DOM 结构，可以通过 this.getDOMNode()来进行访 问。 |
componentWillReceiveProps |
在组件接收新的 prop(更新后)时被调用。 |
shouldComponentUpdate |
返回一个布尔值，在组件接收到新的 props 或者 state 时被调用，返回true则组件执行渲染，false 为 不渲染。在初始化时或者使用 forceUpdate 时不被 调用。 |
componentWillUpdate |
在组件接收到新的 props 或者 state 但还没有 render 时被调用。在初始化时不会被调用。 |
componentDidUpdate |
在组件完成更新后立即调用。在初始化时不会被调 用。
|
componentWillUnmount |
在组件从 DOM 中移除之前 立刻被调用。 |
在界面显示 hello，通过组件属性传入 name 值，在 componentDidMount 函数中修改 state 的透明度，state 的透明度值在 UI 的 cell 中被调用，修改后会自动触发此组件的重新渲染。在本次开发历程中主要使用的生命周期函数有componentWillMount、componentDidMount、componentWillReceiveProps 等。
以下为一个简单的组件生命周期函数的示例。
import React, { Component } from 'react';
import { render } from ' react-dom' ;
class Hello extends React. Component {
constructor(props) {
super(props);
this.state = {opacity: 1.0};
}
组件在浏览器加载完执行
componentDidMount() {
this.timer = setInterval(function () {
var opacity = this. state. opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
state
调整亮度
this.setState({
opacity: opacity
});
}. bind(this), 100);
}
render () {
触发重新渲染
return (
<div style={{opacity: this.state. opacity}}>
Hello {this. props . name}
</div>
);
}
}
在组件的 React 函数中绑定了状态中的 opacity 字段为 div 的透明度属性，在组件加载完成后，componentDidMount函数会自动执行，其中剩余的定时器函数将会通过 setstate 函数定时的修改 state 中的 opacity 的数值，从而触发组件的重新渲染，显示的hello内容将会从不透明逐渐转化为透明，透明度低于0.1时重新设置为1。
六、化繁为简的 umi 框架
1、umi
尽管 React 提供了标准的组件，但是0从0搭建一个项目还比较遥远，在搭建项目时需要考虑到浏览器访问的路由多个页面之间的跳转以及衔接等等，umi 框架便是阿里内部一款非常优秀的行动框架。umi 中文可发音为乌米，是一个可插拔的企业级react应用框架。umi 以路由为基础的，支持类 next.js.的约定式路由(根据文件自动生成路由)，比如支持路由级的按需加载，可以帮助开发者快速搭建应用而无需关心复杂的路由配置，umi 是蚂蚁金服的底层前端框架，官方文档地址:https://umijs.org/zh/，文档非常详细而且清晰易懂。
2、umi 的安装过程
umi 的安装分为以下三步：
（1）安装 Node.js 环境: Node.js 下载地址:
（2）安装 yarn:命令行执行 npm i yarn tyarn -g
（3）安装 umi:命令行执行 yarn global add umi
七、丰富高质组件库 AntDesign
1、AntDesign 是专门用来开发和服务于企业级后台产品的 UI 组件库，简单来说就是提供了大量的 UI 组件，例如输入框、动效、按钮、表格等等，每个U|组件都有稳定的 API 可进行调用，开发者只要在各组件 API 基础上进行开发，即可快速搭建自己的前端页面。官网: https://ant.design/index-cn
2、Umi 在初始化时选择 antd 插件即可集成 antd 组件库,也可通过命令行执行 npm install-g antd 进行安装。对于每个组件，Ant Design 官网都给出了详细的 API 列表和参考示例，开发者只需查阅文档即可快速上手。
八、数据流方案 dva
1、Dva，基于 Redux 的方案
Redux 这样的数据流框架，核心思想是创建一个数据状态管理库(store)，所有组件的状态state都以一个对象树的形式储存在一个单一的 store 中，store 中 的数据通过组件的 props 传入，当 props 关联的数据发生改变时将会触发组件的重新渲染。
dva 是对 Redux 的进一步封装，对许多配置进行了简化。dva 官网地址:https://dvajs.com/。
2、React 框架将各个模块组件化
存在不足在于 React 只支持单向的数据流，即父组件可以将数据通过子组件的props 属性传入，但是父组件确很难获取到子组件的状态。
Umi 在初始化时选择 dva 插件即可集成，也可通过命令行执行 npm install -g dva 进行安装。
