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

项目7工业互联网中的Web开发【学习目标】了解并掌握Web前端开发框架React及其基础知识。掌握如何在React中创建开发项目。了解并理解react-router。掌握antd组件库的引入使用。掌握RestfulAPI知识。【岗位能力素养】具备工业互联网中web前端设计的综合能力具备良好技术文档编制的综合能力项目7工业互联网中的Web开发7.1Web前端框架基础

7.2React事件处理项目实施

7.1.1认识React前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。随着高性能的移动终端设备的出现和无线网络普及，HTML5，node.jS广泛应用，各类框架类库层出不穷，前端框架也在不断的迭代和变化，现在形成了React、Vue、Angular三大主流框架。React起源于Facebook的内部项目，用来架设Instagram的网站，并于2013年5月开源。官网地址/。React是一个前端开发框架，用于构建用户界面的JavaScript库。主要用于构建UI，更专注于MVC中的V（视图）。React通过虚拟DOM，拥有较高的性能，解决跨浏览器兼容的问题，可以用于Web端界面、手机端、APP应用、PC端软件开发中。7.1Web前端框架基础7.1.2React基础知识1.react和react-domReact设计之初是用JSX描述UI，所以解耦了和DOM的操作，把逻辑和DOM分开。react只负责逻辑层，对数据进行处理。react-dom则负责渲染层，完成DOM的实际渲染。2.JSXJSX是一种JavaScript的语法扩展。React使用JSX来替代常规的JavaScript，很好地描述UI应该呈现出它应有交互的本质形式。7.1Web前端框架基础JSX的语法中有一下几点规则：1）JSX标签里能够包含多个子元素时，需要在外面包一层根元素，可以采用缩进和加括号的方式方便代码读写。constelement=(<div><h1>Hello!</h1><h2>React!.</h2></div>);2）单标签必须闭合。如：<img/>、<input/>、<br/>3）ReactDOM使用camelCase（小驼峰命名）来定义属性的名称，所以JSX里的class需要写成className，如<divclassName='top'></div>4）在JSX语法中，可以在{}里面包裹JS代码。 vara='HelloReact!'; letb=<div>{a}</div>7.1Web前端框架基础3.元素渲染元素是用户看到的内容。想要将一个React元素渲染到根DOM节点中，只需把它们一起传入ReactDOM.render()。React元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。4.组件组件是由元素构成，类似于JavaScript函数。它接受任意的入参（即“props”），并返回用于描述页面展示内容的React元素。定义组件的方式有使用函数声明和通过class声明两种，但不论是哪种方式，自身的props都不能修改。5.state和setStateReact把组件看成是一个状态机（StateMachines）。state可以根据与用户交互来实现不同状态，当state发生修改，需要根据新的state重新渲染用户界面，让用户界面和数据保持一致。在React中，使用setState完成数据改变，对view层进行渲染。7.1Web前端框架基础7.1.3antdantd是蚂蚁金服开源的组件库，是基于AntDesign设计体系的ReactUI组件库，开箱即用，用于研发企业级中后台产品。官网地址https://ant.design/index-cn。antd为Web应用提供了丰富的基础UI组件，除了官方组件，还提供了社区组件作为补充，提高开发效率。antd的组件包含通用组件、布局组件、导航组件、数据录入组件、数据展示组件、反馈组件和其他组件。每种组件中又包含了不同类型，并提供源码，用户可以直接复制使用，如图7-1所示。7.1Web前端框架基础7.1.4RESTfulAPIREST（RepresentationalStateTransfer）是表述（表征）性状态转化。它首次出现在2000年RoyFielding的博士论文中，是一组软件架构约束条件和原则，一种针对网络应用的设计和开发方式，可以降低开发的复杂性，提高系统的可伸缩性。而满足这些约束条件和原则的应用程序或设计框架就是RESTful框架。在REST规则中，有两个基础概念：对象、行为。对象就是要操作的对象，例如添加用户的操作，那么对象就是user。4种常用的行为分别是查看、创建、更新、删除，利用http现有方法来对应这4种行为分别是GET查看，POST创建，PUT更新，DELETE删除。那么RESTful就可以简单的理解为用URL定位资源、用HTTP动词（GET、POST、PUT、DELETE)描述操作。7.1Web前端框架基础7.2.1事件处理React元素的事件处理和DOM元素类似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)HTML通常写法是：<buttononclick="activateLasers()">点击按钮</button>React中写法为：<buttononClick={activateLasers}>点击按钮</button>在React中另一个不同是你不能使用返回false的方式阻止默认行为，你必须明确的使用preventDefault。7.2React事件处理例如，通常我们在HTML中阻止链接默认打开一个新页面，可以这样写：<ahref="#"onclick="console.log('点击链接');returnfalse">点击链接</a>在React的写法则如下所示，其中e是一个合成事件。functionActionLink(){functionhandleClick(e){e.preventDefault();console.log('链接被点击');}

return(<ahref="#"onClick={handleClick}>点击链接</a>);}7.2React事件处理7.2.2向事件处理程序传递参数通常我们会为事件处理程序传递额外的参数。例如，若是id是你要删除那一行的id，以下两种方式都可以向事件处理程序传递参数：<buttononClick={(e)=>this.deleteRow(id,e)}>DeleteRow</button><buttononClick={this.deleteRow.bind(this,id)}>DeleteRow</button>上述两种方式是等价的。上面两个例子中，参数e作为React事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过bind的方式，事件对象以及更多的参数将会被隐式的进行传递。7.2React事件处理classPopperextendsReact.Component{constructor(){super();this.state={name:'Helloworld!'};}

preventPop(name,e){//事件对象e要放在最后e.preventDefault();alert(name);}

render(){return(<div><p>hello</p>{/*通过bind()方法传递参数。*/}<ahref=""onClick={this.preventPop.bind(this,)}>Click</a></div>);}}7.2React事件处理7.2.3React表单与事件HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。在HTML当中，像<input>,<textarea>,和<select>这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用setState()方法进行更新。在示例1中我们设置了输入框input值value={this.state.data}。在输入框值发生变化时我们可以更新state。我们可以使用onChange事件来监听input的变化，并修改state。7.2React事件处理1.总体介绍利用react框架，我们构建了一个单页面应用(singleapp)，其页面布局如下所示。单击左侧导航栏的按钮的时候，右边的详细内容会发生变动，但是标题栏的内容保持不变。如图7-5所示使用antd控件库(https://ant.design/docs/react/introduce-cn)中所提供的控件进行页面构建。该控件库中包含了大量常用控件，比如按钮、表格、分页等，可以方便我们的开发工作。项目实施

项目实施

子目录或文件用途/category任务管理页面/dashboard仪表盘页面/error_info故障信息页面/image图片管理页面/monitor_and_control生产管理页面/nav导航栏/platform产线管理/user用户登录、权限管理界面/App.jsWeb程序入口2.导航页面1）打开App.js，在文件中导入了所有需要的页面和所有依赖。importReactfrom'react';importNavigationfrom'./nav/Navigation.js'import{Route,Switch}from'react-router-dom'import'antd/dist/antd.css';import{Layout,Typography}from'antd';importPlatformfrom'./platform/Platform.js';importErrorInfofrom'./error_info/ErrorInfo.js';importMonitorControlfrom'./monitor_and_control/MonitorControl.js'importTaskCategoryfrom'./category/TaskCategory.js';importImagefrom'./image/Image.js'importLoginManagerfrom"./user/LoginManager";importLoginfrom"./user/Login";项目实施

2）接下来，我们定义了一个PrivateRoute组件，该组件对React的Route组件的功能进行了扩展。constPrivateRoute=({...rest})=>{if(LoginManager.isUserLogin()){return<Route{...rest}/>}LoginManager.forwardMainPage()}在该组件中，我们会先调用LoginManager类的isUserLogin函数来判断用户是否登录。如果已经登录，则返回React的Route组件。Route组件是在react中用来构建单页面应用的。它会指导页面根据用户的指令加载相应的内容。如果用户没有登录，将会调用LoginManager的forwardMainPage方法，将页面重定向为登录页面。项目实施

3）定义App组件。在App组件的render方法中，我们调用LoginManager的isUserLogin方法来判断用户是否已经登录，如果没有则返回登录界面。if(!LoginManager.isUserLogin()){return<Login/>}4）引入antd的Header，Footer，Sider，Content以及Title组件。const{Header,Footer,Sider,Content}=Layout;const{Title}=Typography;5）在return语句中通过antd的Layout组件构建了整个应用的页面布局。<Layoutstyle={{height:'100%'}}> ...</Layout>项目实施

3.Platform页面本小节将以Platform页面为例讲解详细内容的展示，其他页面与此类似，有兴趣的读者可以自行阅读源代码。1）打开nav/Platform.js文件，在文件的开头引入本页面所需要的组件。importReactfrom'react';importaxiosfrom'axios'import'antd/dist/antd.css';import{Table,Tag,Button,message}from'antd';importPlatformDetailsfrom'./PlatformDetails.js'其中，axios是一个http客户端，我们将用它来调用服务端的API。PlatformDetails是有关产线的详细信息页面，我们将在添加产线和修改产线的时候以对话框的形式弹出。项目实施

2）在Platform组件中，定义一个fetchData的函数。在该函数中，通过axios调用了服务端的任务类别API（url:api/task_category,HTTP方法:get）以及产线API（api/platform,HTTP方法:get）,并且将所得到的内容放到state里面。项目实施

axios.get('api/platform').then(response=>{letid_platform_mapping={};response.data.map(x=>id_platform_mapping[x.id]=x);console.log("response.data",id_platform_mapping);this.setState({platforms:id_platform_mapping});}).catch(function(error){console.log('Error',error)});}).catch(function(error){console.log('Error',error)});}fetchData=()=>{axios.get('api/task_category').then(response=>{letid_name_mapping={};response.data.map(x=>id_name_mapping[x.id]=x);//console.log(id_name_mapping)this.setState({task_categories:id_name_mapping});returnid_name_mapping;}).then(task_categories=>{

3）在componentWillMount函数中调用了fetchData函数。componentWillMount(){this.fetchData();}componentWillMount是在浏览器将要加载页面内容之前被调用的。在该函数中调用fetchData可以保证我们在执行render函数之前所需要的产线和任务信息都已经正确的获得。项目实施

4）定义handleDelete函数。该函数在用户单击“删除”按钮的时候被调用。在该函数中，我们通过axios调用删除产线的API（url:api/task_category,HTTP方法:delete）来删除产线。handleDelete=(e)=>{letplatform_id=e.target.getAttribute('platform_id');console.log('platform_id',platform_id)axios.delete('api/platform',{data:platform_id}).then(response=>{('删除成功',1);this.fetchData();}).catch(function(error){console.log('error',error);(error.message,2);return;});}项目实施

5）在render方法中，首先获得了通过fetchData获取的产线和任务信息以及引入了antd中表格列的column组件。const{platforms,task_categories}=this.state;const{Column}=Table;6）判断产线信息是否加载成功，如果因为网络等各种原因未能加载成功，我们将不会加载页面。if(platforms===null){returnnull;}项目实施

7)在return语句中，利用antd的Table组件构建显示产线信息的表格。return(<divstyle={{'background':"white"}}><TabledataSource={Object.values(platforms)}footer={()=><PlatformDetailsupdateParent={this.fetchData}/>}><Columntitle="编号"dataIndex="id"key="id"/><Columntitle="产线名称"dataIndex="name"key="name"/><Columntitle="任务类别"dataIndex="task_category_id"key="task_category"/></Table></div>);项目实施

4.RESTfulAPI的设计与实现1）RESTfulAPI服务端Swagger是一个非常强大易用的RestfulAPI设计工具。个人可以免费使用。登录https://editor.swagger.io/进入swagger编辑器。解压code.zip,并找到server/swagger_server/swagger/swagger.yaml文件，将其中的内容复制粘贴至swagger编辑器。可以看到我们定义了7种API类型和9种数据类型。请大家浏览这些数据类型和API来了解各自的作用。然后请单击swagger编辑器上方的generateserver按钮，选择python-flask，并且将生成的文件保存在本地。下载下来的文件的名称默认是python-flask-server.zip。解压之后如图7-6所示：项目实施

项目实施

2）RestfulAPI客户端在swagger编辑器的上方单击generateclient，然后单击Python。并且将生成的文件下载到本地。生成的文件的默认文件名是python-client。打开该文件夹，可以看到如图7-14所示目录结构：项目实施

其中，swagger_client是生成的客户端代码；README.md是对该文件夹的说明，里面包含了样例程序；requirements.txt里面包含了需要安装的Python程序包。5.plc数据采集与上传1）软件包基本结构介绍以及打开①软件包介绍：“industrial_internet”文件夹内有四块内容，”example”文件