深度学习技术应用 课件 项目五：前端界面开发_第1页
深度学习技术应用 课件 项目五：前端界面开发_第2页
深度学习技术应用 课件 项目五：前端界面开发_第3页
深度学习技术应用 课件 项目五：前端界面开发_第4页
深度学习技术应用 课件 项目五：前端界面开发_第5页
已阅读5页，还剩92页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目五：前端界面开发动物识别前端页面设计Web系统概述本节目标HTML概述HTML表单CSS概述网页设计以网站形式呈现，通过浏览器访问,完成一定功能的系统Web系统概述在Web系统中，我们可以将浏览器理解为客户端，开发的代码理解为服务端，浏览网页本质上就是在使用服务端提供的服务。Web系统概述为了让用户能够更好的使用服务端提供的服务，我们需要开发前端网页，将画面呈现给用户，让用户能够更加方便的使用网站提供的功能，而一个网页的完整结构一般由三部分构成：（1）HTML：超文本标记语言，描述页面结构（2）CSS：层叠样式表，美化页面（3）JavaScript：脚本语言，实现与用户的交互Web系统概述HTML负责构建主体结构Web系统概述CSS负责添加样式JS负责赋予实际行为本节主要内容是通过HTML+CSS绘制动物图像识别前端网页，让用户可以将本地图像进行上传，需要掌握的内容有：（1）掌握HTML语言的常用标签；（2）掌握CSS语法的常用样式；本节目标HTML概述HTML又被称为超文本标记语言，主要的职责是构建网页主体结构，HTML中有三大语法结构，分别为：（1）标签（2）属性（3）文本HTML概述标签通过<标签名></标签名>声明HTML概述属性通过<标签名

属性名=”属性值”>声明，一个标签内可以添加多个属性，顺序没有要求HTML概述文本通过<标签名>文字</标签名>声明，即：文本本质上就是标签内夹杂的文字内容HTML表单

表单是HTML中最为重要的一个结构，在实际开发中表单的作用主要就是采集用户的信息并将数据提交到后台。

一个完整的表单由三部分构成，分别为：（1）表单标签：form标签（2）表单控件：input标签、select标签、textarea标签（3）表单按钮：submit按钮、reset按钮HTML表单<form>元素定义HTML表单用于声明表单作用域<form>.formelements.</form>HTML表单<input>元素是最重要的表单元素。<input>元素有很多形态，根据不同的type属性。<form>Firstname:<br><input

type="text"name="firstname"><br>Lastname:<br><input

type="text"name="lastname"></form>类型描述text文本框password密码框radio单选按钮checkbox复选框file文件上传框HTML表单常见的type属性对应的形态如下表所示HTML表单<inputtype="submit">定义用于向表单处理程序（form-handler）提交表单的按钮。<formaction="action_page">Firstname:<br><input

type="text"name="firstname"value="Mickey"><br>Lastname:<br><input

type="text"name="lastname"value="Mouse"><br><br><input

type="submit"value="Submit"></form>CSS概述CSS全称为层叠样式表，在网页开发中主要起到美工的作用，CSS语法结构如下图所示。CSS概述 CSS在网页中声明的形式共有三种：（1）行内样式（2）内部样式（3）外部样式CSS概述行内样式就是在标签的基础上直接添加style属性声明CSS样式。<body> <pstyle="color:red;">Helloworld</p></body>CSS概述内部样式就是通过style标签直接借助选择器选中指定标签然后添加CSS样式<head> <style>

p{ color:red; } </style></head><body> <p>Helloworld</p></body>CSS概述外部样式就是通过声明单独的CSS文件，在CSS文件中编写CSS代码，然后通过link标签引入CSS文件。<head> <linkrel="stylesheet"href="css/demo.css"/></head><body> <p>Helloworld</p></body>CSS概述 CSS使用外部样式相对更好一些，原因如下：（1）页面HTML代码与CSS代码完全分离（2）维护更加方便（3）如果需要改变风格，只需修改公共CSS文件（4）可以在多个HTML文档中引用同一个CSS文件网页设计经过对HTML和CSS的介绍后，我们通过HTML和CSS可以构建一个完成的前端画面，引入图片后，网站效果如图所示。项目五：前端界面开发动物识别前端页面设计项目五：前端界面开发动物图片上传JS语言简介JS事件JS读写操作JQ语法简介Ajax技术简介Ajax异步处理本节我们通过介绍JS与JQ基本语法，通过创建Ajax引擎实现与后端的异步交互，提高客户端与服务端的响应速度，加快文件上传的与识别并响应结果的速度。主要任务JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。主要功能如下：（1）将动态文本嵌入HTML页面。（2）对浏览器事件做出响应。（3）对HTML元素进行读写操作。（4）检测访客的浏览器信息。（5）基于Node.js技术进行服务器端编程。JavaScript语言简介JavaScript在编写时共有两种声明手段，分别为内部样式和外部样式左侧为内部样式，直接在网页内通过script标签声明JS代码右侧为外部样式，单独将JS代码声明在JS文件后，通过script标签引入即可JavaScript语言简介JavaScript可以通过定义事件对用户在浏览器中的操作做出响应，一个完整的JS事件中主要包含如下三大部分：（1）触发对象：指的是HTML元素，一般表示用户操作的某个标签（2）触发时机：又称为触发条件，指的是用户的操作方式，根据操作方式不同，JS将触发条件分成了很多种类，例如单击事件、双击事件、键盘事件等（3）触发内容：通过function函数声明的具体代码，表示触发事件后需要操作的内容。JavaScript事件任务需求：比如，现在我们需要点击画面中的按钮，在按下按钮后弹出警告框，并显示HelloWorld内容。JavaScript事件通过分析我们知道，触发对象就是按钮，触发条件就是单击，当用户单击按钮后，调用aa()函数，并运行函数内部的代码，这就是触发事件的完整工作流程。JavaScript事件JavaScript除了定义事件能与用户交互外，最主要的还可以对HTML元素进行读写操作，通过读写操作来动态改变HTML画面显示的内容。我们分别从HTML属性和文本两个方面入手演示一下JS的读取和写入操作。JavaScript读写操作JS可以通过给HTML标签添加id属性来读取指定标签内的属性或者文本。读取属性：通过id名.属性名读取文本：通过id名.innerHTMLJavaScript读写操作根据文本框设置的id名，通过t.value读取文本框value属性值的内容并弹出警告框显示。根据h1标签设置的id名，通过t.innerHTML获取h1标签内部的文本信息并通过警告框弹出。JavaScript读写操作写入操作与读取操作类似，首先通过给标签设置id属性，通过id名操作并进行写入。写入属性：通过id名.属性名=属性值写入文本：通过id名.innerHTML=文本值JavaScript读写操作将HelloWorld写入到文本框的value属性内将HelloWorld文本写入到h1标签中JavaScript读写操作jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery的核心特性可以总结为：（1）具有独特的链式语法和短小清晰的多功能接口；（2）具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；（3）拥有便捷的插件扩展机制和丰富的插件。jQuery语法简介jQuery中通过$(“选择器”)即可通过指定选择器选中某个或者多个HTML标签，例如： $(“#id名”)：id选择器

$(“.class名”)：class选择器 $(“标签名”)：标签选择器jQuery语法简介jQuery语法简介需要注意的是JQ在使用前一定要引入核心JS文件，并且单独声明一个额外的script标签编写代码读取id为t的文本框的value属性值并弹出警告框显示。将HelloWorld写入到id为t的文本框的value属性内jQuery语法简介Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。Ajax引擎的创建可以基于JS或者JQ，JQ相对于JS而言创建Ajax引擎的方式更加简单快捷，本项目主要基于JQ的形式创建Ajax引擎将用户图像异步上传到服务端。Ajax技术简介与传统Web交互形式不同，在之前的交互方式中，我们需要将模板对应的网页所有代码响应回客户端，客户端才能查看到网页完整的代码。但是当网页内部的数据有更新时，需要重新发送最新的网页代码回客户端，导致每一次客户端都需要接收网页所有的代码，导致网页加载效率低下。异步处理的优势在于，只将变化的数据响应回客户端，并且通过JQ代码将数据渲染到画面中，提高了网页的加载效率。Ajax异步处理接下来我们可以通过Ajax技术在页面不刷新的情况下将文件传送到后端并获取响应的结果，图片中的代码为HTML。Ajax异步处理然后通过JQ创建Ajax引擎，将采集到的文件按钮中用户上传的图像提交到后台，并获取后台响应的数据结果。Ajax异步处理总结本节我们主要介绍了JavaScript和jQuery的基本语法和对HTML的操作，为了引出Ajax技术的异步处理方式，后续我们会针对Ajax文件上传的具体操作进行详细的介绍。本章总结项目五：前端界面开发动物图片上传项目五：前端界面开发识别结果接收与显示Ajax引擎介绍JSON格式简介后端响应JSONAjax文件上传识别结果响应总结Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作和服务器响应异步化Ajax引擎介绍图片显示的内容为传统的Web开发应用模式，首先客户端先发送一个HTTP请求，HTTP请求发送之后再将其发送给服务器，服务器计算获得结果后，将结果重新发送到HTML模板内，将模板代码响应会客户端。Ajax引擎介绍图示显示的则为Ajax交互模型。Ajax技术会使你和用户，以及服务器之间多了一个Ajax引擎，通过这个引擎就可以实现一些异步操作。意味着，用户在客户端发送请求时，这个方式是JS请求。再由Ajax引擎将其转换成HTTP请求，后台接收到这个请求之后再进行处理。效率会大大提高。Ajax引擎介绍通过jQuery代码可以有多种Ajax引擎的创建方式，例如：（1）$.post()：向服务端发送post异步请求（2）$.get()：向服务端发送get异步请求（3）$.ajax()：完整版定义方式，可以自行设置get或者post请求，本项目中主要使用此方式实现与服务端的异步交互。Ajax引擎介绍JSON（JavaScriptObjectNotation,JS对象简谱）是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。在Web开发中主要用于客户端与服务端之间数据传输的一种容器。JSON格式简介JSON格式简介JSON对象由一个大括号表示，括号中的代码用来描述对象的属性，每一个属性都是由键值对构成，键与值之间使用冒号连接,多个键值对之间使用逗号分隔。JSON格式简介通过JSON对象.键名可以解析JSON并提取出制定键名对应的值。一个JSON对象可以存储一条信息的多个数据，但是如果出现多条数据需要存储，可以借助JSON数组的形式。JSON格式简介后端响应JSON在实际Web开发中，我们有时必须以JSON的形式将数据从服务器发送到客户端。尤其是对于Ajax请求而言，JSON更是一种强制响应形式，用于发送或检索数据。Django框架中，后端响应JSON数据的方式一般有两种：（1）使用Django的内置类JsonResponse创建JSON响应（2）使用Django的内置类HttpResponse创建JSON响应后端响应JSON通过fromdjango.httpimportJsonResponse先引入函数，然后通过JsonResponse()函数即可将参数字段数据转换为JSON响应。后端响应JSON通过importjson先导入json模块，通过json.dumps()函数将参数字典转换为JSON数据在通过传统方式进行响应即可。后端响应JSON通过图示前端代码定义Ajax引擎发送请求到后台最终即可获取服务端响应的JSON格式数据，注意contentType属性需要声明数据类型为JSON。Ajax文件上传接下来通过代码演示如何通过Ajax实现文件上传，首先HTML代码如图所示，csrf_token为解决跨域问题的代码。Ajax文件上传在jQuery代码内，我们首先设置单击事件，当用户设置好上传图片后，点击提交按钮时，我们需要创建一个upload_data的对象，将用户上传的图片信息和解决跨域问题的token令牌打包准备发送到服务器端。Ajax文件上传接下来设置Ajax引擎，发送请求的种类为POST请求，请求路径为uploadFile，processData和contentType设置为false表示进行文件上传。识别结果响应首先后台设置函数，判断请求的种类后，先采集请求内用户上传的文件信息，并判断上传是否成功。识别结果响应然后通过os模块提供的open函数将用户上传的图片存储到电脑指定目录内，例如：E盘的upload文件夹，图片名称直接使用用户上传的图像名称即可。识别结果响应设置好标签集后，加载指定目录下的h5模型文件，同样我们以E盘model文件夹为例，加载刚才用户上传的图像准备进行预测。识别结果响应设置函数对用户上传的图像进行预处理，包括图像大小设置、颜色空间转换、维度设置以及归一化处理，最终将处理后的图片返回用于下一步的预测使用。识别结果响应最后调用模型提供的predict函数对处理后的图像进行预测，并根据设置好的标签集判断预测结果最终将结果响应会前端。总结本节内容主要演示了Ajax与服务器端的数据交互模式与代码，详细介绍了JSON格式的特征与用处，最终结合之前训练好的动物识别模型实现用户上传图像的最终预测。总结项目五：前端界面开发识别结果接收与显示项目五：前端界面开发前后端联调本节任务项目开发与测试常见问题项目总结本节基于之前开发的所有内容对每个模块进行整合后实现最终的项目调试并查看运行结果，基于常见的开发问题进行解析。本节任务本项目的开发模块最终已经实现了整合，大致分为如下内容：（1）爬虫技术数据采集（2）数据持久化存储与数据集制作（3）模型训练、调优、评估、存储（4）构建Web平台开发前端网页（5）上传图片识别并响应结果本节任务在Django框架构建的项目中选择Tools，点击Runmanage.py打开终端准备创建项目子模块。项目开发测试项目开发与测试在终端窗口中输入startappdpg_cat创建名为dog_cat的子项目创建后的项目如图所示，我们可以在views.py文件中声明函数创建视图处理后台逻辑。项目开发测试项目开发与测试打开settings.py文件，我们需要在文件最后声明如下代码，表示将所有静态资源引入到static文件夹内由于在设计前端网页时我们应用了bootstrap框架，所以一些css和js文件以及图片需要提前引入到设置好的静态资源目录下，也就是static文件夹内。项目开发测试项目开发与测试在templates目录下新建dog_cat_index.html文件，编写HTML代码完成网页开发，图示为网页部分代码项目开发与测试前端网页如图所示，我们可以选择图片开始识别编写Ajax代码将用户上传的图像资源发送到服务器端，并获取服务器响应的数据结果，准备渲染到画面中。项目开发测试项目开发与测试打开urls.py文件，设置两个路由路径，一个用于进入到动物识别首页，一个用于进行文件上传和识别。项目开发与测试打开dog_cat项目中的views.py文件编写第一个函数用于跳转到动物识别前端首页项目开发与测试编写第二个函数用于接收用户上传的图像并进行识别，这里与上一节演示的代码是一致的，不过多赘述。项目开发与测试重新回到网页中，点击选

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论