《大数据可视化技术》课件 第三章 技术基础_第1页
《大数据可视化技术》课件 第三章 技术基础_第2页
《大数据可视化技术》课件 第三章 技术基础_第3页
《大数据可视化技术》课件 第三章 技术基础_第4页
《大数据可视化技术》课件 第三章 技术基础_第5页
已阅读5页，还剩57页未读， 继续免费阅读

下载本文档

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

文档简介

第三章

技术基础GOAL学习目标1了解Web前后端开发技术及Echarts图表开发技术2掌握Echarts基本条形图的制作方法3掌握利用Flask开发Web应用程序的基本方法4掌握利用PyMySQL接入MySQL数据库的基本方法5掌握基于Python的JSON数据接口开发技术目录Contents3.1前端开发技术3.2服务器端开发技术3.3数据接口开发技术3.1前端开发技术

HTML

是目前应用广泛的网页制作语言，用于创建结构化的文档并提供语义。HTML

中有两个重要概念，一是标签，如“<html>”“<head>”“<body>”等，用于对内容进行描述；二是元素，由开始标签、结束标签和内容组成，如“<title>Document</title>”，是HTML文档的基本结构单元。3.1.1HTML

3.1.1HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>例3.1.1</title></head><body>

用VSCode快速生成HTML文档。</body></html>HTML示例3.1.1HTML标签说明<!DOCTYPEhtml>定义文档的类型为HTML<html>根标签，告知浏览器自身是一个HTML文档<head>头部标签，内部封装了<meta>、<title>等标签<meta>定义文档的元信息，例如为搜索引擎提供网页的关键字、内容描述等<title>定义HTML文档的标题<body>主体标签，一个HTML文档只能有一对<body>标签

CSS用于设置HTML元素的样式，主要包括文本的字体、字号、对齐方式，图像的尺寸、位置，以及版面的布局等。利用CSS可以实现内容与表现形式的解耦，有助于提高开发效率。CSS的样式规则由选择器和声明两部分组成。3.1.2CSS

CSS

常用选择器3.1.2CSS选择器应用示例说明元素选择器body{background-color:black;}将<body>元素的背景颜色设置为黑色类选择器.f1{float:left;}将所有class="f1"的元素均设置为左浮动ID选择器#A{color:green;}将id="A"的元素内容设置为红色通配符选择器*{magin:0;}将所有元素的外边距设置为0群组选择器div,span,img{padding:0;}将所有div、span、img元素的内边距设置为03.1.2CSS<divid="main"style="width:600px;height:400px;">行内式引用</div>引用方法<head>

<styletype="text/css">

h1{

font-size:14px;

color:blue;

}

</style></head>

<linkhref="link.css"rel="stylesheet">行内式内嵌式外链式3.1.3盒子模型盒子模型是

HTML元素布局的基础

盒子模型的常用属性3.1.3盒子模型属性名含义应用举例width宽度width:800px;/*宽度为800像素*/height高度height:600px;/*高度为600像素*/background背景background:url(img/bg.jpg)no-repeat50px80pxfixed;/*图像路径，不平铺，图像坐标，图像固定*/padding内边距padding:5px3px4px;/*内边距：上为5像素，左右为3像素，下为4像素*/border边框border:3pxdoublered;/*边框：3像素宽，双实线，红色*/margin外边距margin:5px3px4px;/*外边距：上为5像素，左右为3像素，下为4像素*/3.1.4页面布局默认布局与优化布局3.1.5CSS定位机制浮动属性float常用的属性值属性名属性值说明floatleft元素向左浮动right元素向右浮动none元素不浮动（默认值）3.1.5CSS定位机制浮动属性应用示例<styletype="text/css">.father{width:330px;height:220px;background:#c6c4c492;border:1pxdashed#ccc;}.child01,.child02,.child03{

float:left;height:50px;background:rgb(253,253,2);border:1pxsolid#1505f4;margin:15px;padding:0px10px;}</style><body>

<divclass="father">

<divclass="child01">child01</div>

<divclass="child02">child02</div>

<divclass="child03">child03</div>

</div></body>3.1.5CSS定位机制定位属性属性名属性值说明positionstatic静态定位（默认定位方式）relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相对于其上一个已经定位的父元素进行定位fixed固定定位，相对于浏览器窗口进行定位top像素值顶端偏移量，定义元素相对于其父元素上边线的距离bottom像素值底部偏移量，定义元素相对于其父元素下边线的距离left像素值左侧偏移量，定义元素相对于其父元素左边线的距离right像素值右侧偏移量，定义元素相对于其父元素右边线的距离

3.1.5CSS定位机制相对定位和绝对定位body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background:#ccc;border:1pxsolid#000;position:relative;}.child01,.child02,.child03{width:100px;height:50px;background:#ff0;border:1pxsolid#000;margin:10px0px;}.child02{

position:relative;left:150px;top:100px;}.child02{

position:absolute;left:150px;top:100px;}

JavaScript是一种脚本语言，主要用于实现Web页面的交互效果。对于一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，结构是页面的骨架，样式是页面的外观，行为是页面的交互逻辑。JavaScript由ECMAScript和WebAPI两部分组成。其中，ECMAScript规定了JavaScript的编程语法和基础内容；WebAPI则提供了操作浏览器功能和页面元素的接口，包括DOM和BOM两部分内容。3.1.6JavaScriptDOM（DocumentObjectModel）

3.1.6JavaScriptDOM元素的常用方法和属性

3.1.6JavaScript方法说明document.getElementById()根据id获取元素document.getElementsByTagName()根据标签名获取元素document.getElementsByName()根据name属性来获取元素document.body返回文档的body元素document.title返回文档的title元素document.documentElement返回文档的html元素document.forms返回对文档中所有Form对象的引用document.images返回对文档中所有Image对象的引用BOM（BrowserObjectModel）

3.1.6JavaScript事件名称说明window.onload当文档内容加载完毕时触发该事件window.onresize当浏览器窗口大小变化时触发该事件BOM提供了一系列可以与浏览器进行互动的对象，用于实现页面与浏览器之间的动态交互效果。与DOM不同的是，BOM将浏览器当作一个对象，它的顶级对象是window。3.1.7Echarts“PM2.5浓度对比条形图”开发流程3.1.7Echarts监测站编码PM2.5观测值（μg/m3）HD0189.36XT01149.95HS01140.07SJZ0184.82CZ01101.87BD0171.02LF0163.88TS0166.33QHD0130.39ZJK0121.25CD0116.25PM2.5浓度数据集（1）准备工作创建项目目录结构3.1.7Echarts创建名为“Example3.4”的文件夹，作为项目根目录。在根目录下分别创建“CSS”和“JS”目录。（1）准备工作创建主页HTML文档“index.html”3.1.7Echarts<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>基本条形图</title></head><body>

</body></html>（1）准备工作引入Echarts库文件3.1.7Echarts在“index.html”的“<head>”标签中添加引用<scriptsrc="JS/echarts.js"></script>（1）准备工作创建DOM容器3.1.7Echarts在“index.html”的“<body>”标签中定义“<div>”标签<divid="bar"></div>（1）准备工作设置元素样式3.1.7Echarts新建名为“main.css”的CSS文档#bar{ position:absolute;/*绝对定位模式*/width:70%;/*设置容器的宽度占页面宽度的50%*/height:70%;/*设置容器的高度占页面高度的70%*/}（2）图表制作新建条形图JS脚本3.1.7Echarts新建“bar.js”，并在“index.html”的“<body>”标签中添加引用<scriptsrc="JS/bar.js"></script>/*引用JS脚本*/（2）图表制作初始化条形图实例3.1.7Echarts使用“document.getElementById()”和“echarts.init()”方法varcontainer=document.getElementById('bar')/*获取DOM容器*/varmyBar=echarts.init(container)/*初始化echarts的实例对象myBar*/（2）图表制作设置条形图配置项3.1.7Echartsvaroption={title:{/*标题组件*/text:'PM2.5浓度对比条形图'},tooltip:{},/*提示框组件*/legend:{/*图例组件*/data:['PM2.5'],right:'10%'},（2）图表制作设置条形图配置项3.1.7EchartsxAxis:{/*x轴组件*/data:['HD01','XT01','HS01','SJZ01','CZ01','BD01','LF01','TS01', 'QHD01','ZJK01','CD01']},yAxis:{},/*y轴组件*/series:[{/*数据系列组件*/name:'PM2.5',type:'bar',data:[89.36,149.95,140.07,84.82,101.87,71.02,63.88,66.33,30.39, 21.25,16.25]}]}（2）图表制作渲染条形图3.1.7Echarts调用“myBar.setOption()”方法将配置项应用到“myBar”实例上

myBar.setOption(option)使用浏览器打开“index.html”查看图表显示效果

3.1.7Echarts

3.1.8jQueryjQuery是一款开源的JS库，通过对JavaScript进行函数封装，简化了HTML与JavaScript之间的操作，使得DOM操作、事件处理的实现语法更加简洁，有助于提高前端程序的开发效率。要使用jQuery，需要在HTML的<head>标签中添加引用。<scriptsrc="JS/jquery.min.js"></script>

3.1.8jQueryajax()方法的常用参数参数说明url处理Ajax请求的服务器地址method请求方式：GET或者POST，默认值为GETdataType请求的数据类型，如JSON、XML、HTML等success请求成功时触发的回调函数，参数为服务器返回的数据error请求失败时触发的回调函数async是否异步，true表示异步，false表示同步，默认值为truecache是否缓存，true表示缓存，false表示不缓存，默认值为true<script>$.ajax({url:'/json_for_bar',method:'GET',dataType:’json’,success:function(data){...;},error:function(msg){console.log(msg)}});</script>3.1.8jQueryajax()应用示例3.2服务器端开发技术

3.2.1FlaskFlask是基于Python的微型Web框架。在编写Flask程序之前，需要搭建开发环境，包括创建和激活Python虚拟环境、安装Flask框架、在VSCode中配置Python解释器等步骤。下面以“PM2.5浓度对比条形图”为例，演示利用Flask制作动态图表的方法。（1）创建项目目录结构3.2.1Flask（2）创建模板文件3.2.1Flask（3）加载模板文件3.2.1FlaskfromflaskimportFlask,render_templateapp=Flask(__name__)@app.route("/"defindex():returnrender_template("index.html")if__name__=='__main__':app.run()新建“server.py”（4）配置静态资源加载路径3.2.1Flask<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><scriptsrc="{{url_for('static',filename='JS/echarts.js')}}"></script><linkrel="stylesheet"href="{{url_for('static',filename='CSS/main.css')}}"><title>基本条形图</title></head><body><divid="bar"></div><scriptsrc="{{url_for('static',filename='JS/bar.js')}}"></script></body></html>（5）启动开发服务器3.2.1Flask在VSCode中使用Python解释器运行“server.py”（6）浏览图表效果3.2.1Flask运行“server.py”，通过浏览器访问URL“:5000/”

3.2.2PyMySQLPyMySQL是一款用Python编写的MySQL驱动程序，支持在Python程序中执行各种数据库操作。下面以PM2.5数据接入为例，介绍使用PyMySQL操作MySQL数据库的基本方法。（1）导入PyMySQL模块3.2.2PyMySQL新建名为“Example3.6.py”的Python脚本文件，使用“import”关键字导入PyMySQL模块importpymysql（2）连接MySQL数据库3.2.2PyMySQLconnect()方法常用参数参数说明host数据库服务器的主机名port数据库服务的端口号，MySQL默认服务端口为3306db数据库的名称user数据库的用户名password数据库用户的登录密码charset编码方式（2）连接MySQL数据库3.2.2PyMySQLif__name__=='__main__':conf={'host':'','port':3306,'db':'airpollution','user':'root','password':'root','charset':'utf8mb4'}conn=pymysql.connect(**conf)（3）编写SQL查询语句3.2.2PyMySQLsql='''SELECTpm25,stationFROMairpollutionWHEREdateLIKE"2018-01-01%"AND(station='HD01'ORstation='XT01'ORstation='HS01'ORstation='SZJ01'ORstation='CZ01'ORstation='BD01'ORstation='LF01'ORstation='TS01'ORstation='QHD01'ORstation='ZJK01'ORstation='CD01')'''（4）执行SQL查询操作3.2.2PyMySQL定义“getData()”函数，用于执行SQL查询语句并返回查询结果defgetData(conn,sql):db=conn.cursor()db.execute(sql)data=db.fetchall()db.close()returndata

（5）打印输出查询结果3.2.2PyMySQL在“main()”函数中调用“getData()”方法data=getData(conn,sql)print(data)conn.close()3.3数据接口开发技术

数据接口是指前后端进行数据交换的规范。在本项目中，数据接口采用JSON格式。JSON是一种轻量级的数据交换格式，本质上是一个由键值对组成的字符串。对于Ajax应用程序，JSON比XML更易于机器解析和生成，因而更加适用于前后端数据交换的场景。3.3.1JSON数据交换格式

3.3.1JSON数据交换格式{"station":["CD01","HD01","XT01","HS01","CZ01","BD01",

"LF01","TS01", "QHD01","ZJK01","CD01"],"pm25":[103.63,89.36,149.95,140.07,101.87,71.02,63.88,

66.33,30.39,21.25,16.25]}JSON字符串示例dumps()函数的常用参数3.3.1JSON数据交换格式参数说明obj待编码的Python对象，通常是字典类型ensure_ascii是否将字符转换为ASCII码，默认值为Trueindent设置缩进等级，默认值为None3.3.2JSON数据接

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

温馨提示

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

最新文档

评论

0/150

提交评论