工业互联网技术与应用 课件 项目7 工业互联网中的Web开发

工业互联网技术与应用安徽省十四五职业教育规划教材项目7

工业互联网中的Web开发学习目标

了解并掌握Web前端开发框架React及其基础知识。

掌握如何在React中创建开发项目。

了解并理解react-router。

掌握antd组件库的引入使用。

掌握RestfulAPI知识

岗位能力素养

具备工业互联网中web前端设计的综合能力

具备良好技术文档编制的综合能力

项目情景工业互联网可以连接机器、人等工业要素，实现数据的智能交互，提高工业生产效率。读者在学习完工业基础设备组装以后，还需要掌握Web开发技术，设计和构建良好的用户界面，方便工业数据的收集和传送，以及操作人员对工业平台进行操作。7.1Web前端框架基础7.1.2React基础知识7.1.1认识React7.1.3antd

7.1.4RESTfulAPI拓展提升

7.1.1认识React前端开发技术React生态现状React特点React框架介绍涉及HTML、CSS、JavaScript，实现Web页面和app的用户界面交互。起源于Facebook，2013年开源，用于构建UI的JavaScript库，专注于视图部分。官网地址/前端开发框架，用于构建用户界面的JavaScript库。主要用于构建UI，更专注于MVC中的V（视图）。采用虚拟DOM，提高性能，处理浏览器兼容性，广泛应用于Web、移动设备和应用开发。已成为三大主流前端框架之一，与Vue、Angular并驾齐驱，各自拥有广泛开发者社区。7.1.2React基础知识React和ReactDOMJSX语法描述UI结构，实现UI与数据解耦。React只负责逻辑层，对数据进行处理。ReactDOM负责渲染层，完成DOM的实际渲染。逻辑和DOM分开017.1.2React基础知识JSXJSX是一种JavaScript的语法扩展，用于描述UI，需将多个子元素包裹在根元素内。如constelement=(<div><h1>Hello!</h1><h2>React!.</h2></div>);。JSX语法概览01单标签需闭合，如<img/>属性名使用camelCase（小驼峰命名），class写成className，如<divclassName='top'></div>。JSX标签规则02在JSX的{}中可写JS代码，如vara='HelloReact!';letb=<div>{a}</div>，用于动态渲染内容。Babel会将JSX转译为React.createElement()。React.createElement()创建React元素，这些元素描述UI，React根据这些元素构建和更新DOM。JSX与JavaScript融合037.1.2React基础知识元素渲染元素是用户看到的内容。将一个React元素渲染到根DOM节点中，只需把它们一起传入ReactDOM.render()。React元素是不可变对象,一旦被创建，就无法更改它的子元素或者属性。7.1.2React基础知识可复用代码块，提高代码可维护性，通过props传递数据，实现灵活配置。组件特性组件是由元素构成，类似于JavaScript函数。使用函数或class声明，接收props生成React元素，描述页面展示内容。组件props不可变。React组件定义组件7.1.2React基础知识state和setState组件状态以state表示，包括数据和用户交互结果。当state更新，通过setState触发视图层重新渲染，保持UI与数据同步。React组件的状态管理初始化state：this.state={count:0};通过this.setState({count:this.state.count+1})增加count，实现状态变更与界面更新。setState用法示例7.1.2React基础知识React组件生命周期Mounting：已插入真实DOMUpdating：正在被重新渲染Unmounting：已移出真实DOMReact组件生命周期三个状态01componentWillMount组件将要挂载。componentDidMount组件已经挂载。componentWillReceiveProps父组件传递的属性有变化，做相应响应。shouldComponentUpdate组件是否需要更新，返回一个布尔值。

componentWillUpdate组件将要更新。componentDidUpdate组件已经更新。componentWillUnmount组件已经移除。React组件生命周期的方法027.1.2React基础知识React交互——Axios交互方法支持npm、bower和cdn。使用npm安装为$npminstallaxios，使用bower为$bowerinstallaxios，使用cdn

：<scriptsrc="/axios/dist/axios.min.js"></script>Axios安装方法Axios是一个基于promise的HTTP库，在浏览器和node.js中均可使用。浏览器兼容7.1.2React基础知识React-Router用于React应用的路由管理库，实现页面与URL同步(/)reactrouter秉承react一切皆组件的原则，路由也是组件，具有分布式配置.ReactRouter简介使用Route组件定义路径和对应的组件，path指定URL，component设置渲染的组件，exact属性用于精确匹配。配置Route组件npm安装react-router-dom，通过import引入顶层路由组件、Link和Route组件。npminstallreact-router-dom--save安装与基本使用0102037.1.3antdantd是蚂蚁金服开源的组件库,提供ReactUI组件，基于AntDesign设计，用于快速构建企业级中后台应用，官网https://ant.design/index-cn。antd组件库概述01包含通用、布局、导航、数据录入、数据展示、反馈等多类别组件，丰富多样。antd组件类别02不仅有官方组件，还整合社区组件，简化开发流程，加速Web应用开发。提高开发效率03每个组件有详细说明，提供源码示例，方便开发者直接应用和定制。组件详细支持047.1.4RESTfulAPI起源：由RoyFielding在其2000年的博士论文中首次提出。定义：一种软件架构约束条件和原则，用于网络应用的设计和开发。RESTfulAPI的定义和起源01对象：操作的目标，如用户（user）。行为：对对象执行的操作，包括查看（GET）、创建（POST）、更新（PUT）、删除（DELETE）。RESTfulAPI的核心概念02资源定位：使用URL定位网络资源。操作描述：通过HTTP动词（GET、POST、PUT、DELETE）描述对资源的操作。通过这些原则和方法，RESTfulAPI简化了网络应用的开发过程，使得开发者能够更高效地构建和维护网络服务RESTfulAPI的工作原理03

拓展提升安装Node.js和npm，全局安装Webpack或yarn，使用create-react-app创建React项目。安装环境与脚手架通过npm安装antd并配置按需加载，使用react-app-rewired和customize-cra优化项目设置。安装并使用antd组件库7.2React事件处理7.2.2向事件处理程序传递参数7.2.1事件处理7.2.3React表单与事件

拓展提升7.2.1事件处理React事件绑定回调函数的绑定与性能处理函数与this阻止默认行为事件绑定属性采用驼峰式命名，传入函数而非字符串。例如：<buttononClick={activateLasers}>点击按钮</button>不能使用returnfalse，需用e.preventDefault()。如：handleClick(e){e.preventDefault();}。需绑定this，否则this在回调中为undefined。可使用属性初始化器或箭头函数语法。构造函数中绑定或使用属性初始化器语法避免每次渲染创建新回调，可能导致额外的重新渲染。7.2.2向事件处理程序传递参数bind方法传递React事件参数传递<buttononClick={(e)=>this.deleteRow(id,e)}>DeleteRow</button><buttononClick={this.deleteRow.bind(this,id)}>DeleteRow</button>使用箭头函数：(e)=>this.deleteRow(id,e)，事件对象需显式传递this.deleteRow.bind(this,id)，事件对象以及更多的参数将会被隐式的进行传递,注意：事件对象e要排在所传递参数的后面7.2.3React表单与事件在HTML当中，像<input>,<textarea>,和<select>这类表单元素会维持自身状态，并根据用户输入进行更新。在React中，可变的状态通常保存在组件的状态属性中，并且只能用setState()方法进行更新。classHelloMessageextendsReact.Component{

constructor(props){

super(props);

this.state={value:'Helloworld!'};

this.handleChange=this.handleChange.bind(this);

}

handleChange(event){

this.setState({value:event.target.value});

}

render(){

varvalue=this.state.value;

return<div>

<inputtype="text"value={value}onChange={this.handleChange}/>

<h4>{value}</h4>

</div>;

}}ReactDOM.render(

<HelloMessage/>,

document.getElementById('example'));

拓展提升Select下拉菜单<body><divid="example"></div><scripttype="text/babel">classFlavorFormextendsReact.Component{constructor(props){super(props);this.state={value:'腾讯'};this.handleChange=this.handleChange.bind(this);this.handleSubmit=this.handleSubmit.bind(this);}handleChange(event){

this.setState({value:event.target.value});

}

handleSubmit(event){

alert('你最喜欢的网站是:'+this.state.value);

event.preventDefault();

}

render(){

return(

<formonSubmit={this.handleSubmit}>

<label>

选择您最喜欢的网站

<selectvalue={this.state.value}onChange={this.handleChange}>

<optionvalue="腾讯">QQ</option>

<optionvalue="谷歌">Google</option>

<optionvalue="淘宝">Taobao</option>

<optionvalue="百度">Baidu</option>

</select>