《数据可视化技术》课件吴勇15学生管理基础网页制作-23Flask Echarts Jinja可视化综合应用、24复习与测试

《数据可视化技术》《数据可视化技术》单元15学生管理基础网页制作项目介绍项目四：高校招生就业数据分析与可视化本项目采集了某高职院校的招生、就业数据。高职院校通过对招生数据的分析，了解不同专业的招生情况、招生分布、招生难易度等信息，从而更好地制订招生计划，提高招生效率。高职院校通过对历年毕业生就业数据的分析，了解不同专业的就业情况、就业分布、就业难易度等信息，从而更好地调整专业设置、优化课程设置，提高毕业生就业率01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务一：使用Flask制作学生管理基础网页现在需要使用Python开发一个简单的学生管理网站，当使用浏览器访问网站的根“/”时指向index.html主页，当访问“/register”时指向register.html，当访问“/manage”时指向manage.html。当使用浏览器访问“/login?name=admin”时，页面对name为admin的所有数据（用户ID、性别、年龄、签名、兴趣）进行对应渲染。当我们使用浏览器访问“/index?name=user”时，页面对name为user的所有数据（用户ID、性别、年龄、签名、兴趣）进行对应渲染任务1、Flask开发环境的安装和使用任务2、使用Flask的路由功能任务3、使用Flask模板渲染学习目标1、知识（1）了解Flask作用（2）掌握Flask的安装运行（3）理解Flask路由功能（4）掌握Flask模板渲染2、技能（1）能够搭建Flask开发环境（2）能够使用Flask路由功能（3）能够使用Flask进行模板渲染3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施学习内容1、教师讲解

Flask的使用

Flask路由、模板渲染2、学生讨论（1）Flask功能有哪些？（2）什么是路由？3、明确任务（1）Flask开发环境的安装和基本使用（2）使用Flask的路由功能（3）使用Flask模板渲染任务资讯1、Flask开发环境的安装和使用Flask是一个基于Python开发并且依赖jinja2模板和WerkzeugWSGI服务的一个微型框架。其用于接收http请求并对请求进行预处理，然后触发Flask框架。（1）Flask安装安装Flask的命令：pipinstallflask如果想指定Flask的版本，那么就要使用以下命令：pipinstallflask==版本如果想升级Flask的版本，那么可以使用以下命令：pipinstall--upgradeflask==版本任务资讯（2）Flask的简单使用新建一个Python脚本，命名为app1.py

打开浏览器，在地址栏输入:5000/index访问，可以看到“Hello,World!”字符任务资讯2、使用Flask的路由功能Flask路由就是对一个函数的映射，Flask的变量规则就是在路由URL中的一部分使用一个变量代替。（1）使用Flask的变量规则定制相应的路由新建一个Python脚本app2.py可以分别访问:8080/userByName/tom、:8080/userById/1验证效果。任务资讯（2）使用Flask的URL构建完成相应路由的编写Flask的URL构建就是使用url_for()函数动态获取路由中配置的URL，redirect可以实现网页重定向：redirect(url)redirect(url_for("admin"))练一练

任务要求：定义一个这样的路由，当我们访问/admin时，浏览器显示管理员：Admin；定义一个这样的路由，当我们访问/guest/alice时，浏览器显示游客：alice；当我们访问/guest/iris时，浏览器显示游客：iris；定义一个这样的路由，当我们访问/user/admin时，页面重定向到/admin；当我们访问/user/xxx，页面重定向到/guest/xxx（这里xxx表示任意字符串）。任务资讯任务资讯3、Flask模板渲染（1）编写一个获取GET请求中的参数并完成个人信息的数据渲染搭建一个基本的Flask骨架，目录结构如下：static目录：存放静态资源文件，例如：CSS、JS、图片、map3….等等；templates目录：存放jinja2模板页面，也就是HTML；app.py：Flask启动程序任务资讯flask模板渲染示例1、目录2、test.html3、test.py任务实施本任务主要分成两部分进行开发：一部分是Flask后端程序，实现路由跳转和数据发送的功能；另一部分是前端的网页制作。任务实施map={

"admin":{

"userid":"1",

"sex":"男",

"age":"28",

"introduce":"生命不止，奋斗不息",

"power":"我是管理员，可以管理所有页面。"

},

"user":{

"userid":"2",

"sex":"女",

"age":"20",

"introduce":"相信自己，一定能成功",

"power":"我是普通用户，可以查阅信息和留言。"

}}任务实施本任务主要分成两部分进行开发：一部分是Flask后端程序，实现路由跳转和数据发送的功能；另一部分是前端的网页制作。1、编写后端程序后端程序大概包括如下步骤：

1）导入相关包和依赖2）配置路由，实现不同页面的跳转3）创建用户字典数据

4）获取网址参数并取得变量，得到用户数据，在通过模板渲染跳转页面时携带参数到前端网页中去

5）创建启动代码。2、编写前端网页前端网页包括4个页面任务实施3．验证1）通过浏览器直接访问站点:5000/，显示学生管理者页2）通过浏览器访问:5000/register，显示注册页面3）通过浏览器访问:5000/manage，显示管理页面4）通过浏览器访问:5000/login?name=admin，显示管理员账户信息5）通过浏览器访问:5000/login?name=user，显示普通用户账户信息03整合活动总结、知识点梳理学习总结拓展任务使用Jinja2完成表格的数据渲染任务要求：定义一个这样的路由，当我们访问/index时，浏览器显示List中遍历的数据，渲染模板为index2.html。Python中List的内容如下：app=Flask(__name__)List=[{"name":"alice","time":"2019-10-18",},{"name":"iris","time":"2019-10-18",},拓展任务{"name":"Violet","time":"2019-10-18",}]通过Flask将List数据渲染到网页中，并通过表格显示出来，预期效果图，如下：访问方法:5000/index《数据可视化技术》单元16招生数据增删改查操作01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务：招生数据增删改查：为了方便查询学校各二级学院历年招生数据，需要将招生数据保存在数据库中。二级学院包括机械学院、电气学院、汽车学院、信息学院、经贸学院，需要存储它们的数据到MySQL数据库中，并使用Flask实现查询、新增、删除、修改等操作，实现招生数据的对比和管理本单元学习Flask操作数据库，对数据库进行增删改查操作。任务1、Flask获取请求对象参数任务2、使用Flask创建表映射任务3、使用Flask对数据添删改查学习目标1、知识（1）了解Flask获取请求参数的方法（2）掌握Flask创建表模型的方法（3）掌握Flask对数据库增删改查2、技能（1）能够使用Flask获取请求对象参数（2）能够使用Flask创建表映射（3）能够使用Flask对数据添删改查3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施任务实施1、教师讲解

Flask连接MySQL数据库、创建表映射

Flask操纵数据库2、学生讨论（1）Flask怎样连接MySQL？（2）什么是FlaskSQLAlchemy的表映射？3、明确任务（1）Flask获取请求对象参数（2）使用Flask创建表映射（3）使用Flask对数据添删改查任务资讯1、FlaskSQLAlchemy数据库是按照一定规则保存程序数据，程序再发起查询取回所需的数据，Web程序最常用基于关系模型的数据库，这种数据库也称为SQL数据库（关系型数据库），关系型数据库把数据存储在表中，表模拟程序中不同的实体。如下所示：表的列数是固定的，行数是可变的，列定义表所示的实体的数据属性。表中的行定义各列对应的真实数据。ORM全称ObjectRelationalMapping，中文意为对象-关系映射。其实它就是模型对象的概念把数据库的信息映射称一个个对象来操作。而不需要写SQL语句，简单来说就是面向对象编程。IDUserEmailPassword1张三zhangsan@163.com1234562李四lisi@163.com654321任务资讯2、Flask操作数据库Flask中的SQLAlchemy就是一个ORM框架，它依赖于pymysql，使用关系对象映射对数据库进行操作。Flask操作数据库主要步骤如下：安装依赖库。当我们使用Flask进行数据开发时，需要安装一些相应的依赖库mysqlclient、flask_sqlalchemy、pymysql连接数据库创建模型与表的映射数据库的增删改查等操作任务资讯（1）Flask连接数据库任务资讯（2）创建模型类，关联数据库中的表如要关联数据库中的users表db.Model:创建模型db.Column:创建模型属性可进入MySQL中“flask_table”数据库，查看是否存在“users”表先使用SQLAlchemy加载app并创建db实例，再创建模型类，关联数据库中的表users，id、name、email、pswd、role_id分别对应users表的字段，db.Column表示列名，db.Integer表示该字段为整型数据，db.String表示该字段为字符串数据。这些字段需要设置一个主键。任务资讯（3）增、删、改、查参考网址：/Mixtea/p/10678594.html在Flask-SQLAlchemy中，插入、修改、删除操作，均由数据库会话管理。*会话用db.session表示。在准备把数据写入数据库前，要先将数据添加到会话中然后调用commit()方法提交会话。db.session.add(role):添加到数据库的session中db.session.add_all([role1,role2]):添加多个信息到session中mit():提交数据库的修改（包括增、改、删）db.session.rollback():数据库的回滚操作db.session.delete():删除数据库任务资讯（3）创建/删除表创建表需要先创建表模型类，再执行db.create_all()命令，表示创建模型类对应的表。可以在执行创建表命令之前，使用db.drop_all()删除所有的表。任务资讯（4）插入数据要插入一条数据，可用模型类User创建实例（对应一条记录），加载列属性，再将该实例加入session事务，执行该事务，代码如下：要一次插入多条数据，则可先创建多个实例，再添加所有实例到session事务，执行该事务，代码如下：任务资讯（5）查询数据通过模型类的query方法可以实现数据查询。1）filter_by精确查询。如要查询名称为chen的所有记录信息，代码如下：User.query.filter_by(name='chen').all()其中all()返回查询到的所有对象，可以使用first()返回查询到的第一个对象。2）filter模糊查询。如要返回名字结尾字符为n的所有数据，代码如下：User.query.filter(U.endswith('n')).all()3）get()查询。通过get()，将其参数设置为主键，可以得到主键对应的记录。如果主键不存在，则没有返回内容。User.query.get(1)可以查询主键值为1的记录。任务资讯（5）查询数据通过模型类的query方法可以实现数据查询。4）逻辑条件查询。①使用逻辑非条件查询，返回名字不等于“zhou”的所有数据，代码如下：User.query.filter(U!='zhou').all()②使用逻辑与条件查询，需要导入and_依赖，返回and()条件满足的所有数据，代码如下：fromsqlalchemyimportand_User.query.filter(and_(U!='chen',User.email.endswith('163.com'))).all()③使用逻辑或条件查询，需要导入or_依赖，返回or()条件满足其一的所有数据，代码如下：fromsqlalchemyimportor_User.query.filter(or_(U!='chen',User.email.endswith('163.com'))).all(任务资讯（6）删除数据

一般会结合条件查询进行数据删除。如要删除User表的第一条数据，可执行下面命令：user=User.query.first()db.session.delete(user)mit()最后可以使用User.query.all()查询所有数据，检验是否删除了第一条记录。任务资讯（7）更新数据更新数据一般也会结合条件进行更新。如要将第一条记录的姓名修改为“dong”，先查询出第一条记录，修改name列值，再执行事务，代码如下：user=User.query.first()='dong'mit()最后可以使用User.query.first()检验是否修改成功。任务实施本任务主要使用Flask操作MySQL数据库，创建表，将某高职院校2015—2022年招生数据插入表，对数据进行查询、修改、删除等操作，并完成Web页面数据展示。具体步骤：1．创建表提前在MySQL数据库中创建名为“enroll”的数据库。创建如下Python程序，实现项目4高校招生就业数据分析与可视化MySQL数据库中表的创建。2．插入数据创建一个函数add_tb_data()，用模型类创建8个实例，插入8条记录。3．将机械学院招生数(mechanics)大于1000，或者经贸学院招生数(economy)小于500的记#录删除。4.查询数据并通过Web页面展示查询出所有数据，通过渲染模板将数据传递到网页中去。网页通过Jinja语句获取后端传递过来的数据03整合活动总结、知识点梳理学习总结拓展任务1、在前面Flask操作数据库的基础上显示数据到网页Python代码

拓展任务1、在前面Flask操作数据库的基础上显示数据到网页网页代码拓展任务2、使用flask_sqlalchemy创建用户表user，并使用Flask将查询结果显示到网页中。IDUserEmailPassword1张三zhangsan@163.com1234562李四lisi@163.com654321《数据可视化技术》单元17各专业招生录取人数分析01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务：本任务主要利用Flask结合Web技术。要求使用Flask创建数据库，读出数据库数据，通过Web页面实现折线图展示各专业计划录取与实际录取人数对比情况。本单元学习前台网页结合后台Flask实现对数据库的增删改查。任务1、使用Flask连库建表任务2、使用Flask查询数据任务3、web页面制作学习目标1、知识（1）掌握mysql的数据导入（2）掌握Flask创建表模型的方法（3）掌握Flask对数据库增删改查（4）掌握Flask+Echarts的方法2、技能（1）能够使用Flask连接MySQL数据库和创建表映射（2）能够使用FlaskSQLAlchemy查询、插入、删除、调整（3）能够制作Echarts折线图的网页3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施任务资讯1、教师讲解

Flask连库建表查询、添加、删除、修改数据及对应网页制作2、学生讨论（1）Flask怎样结合web页面开发？（2）前台页面怎样传递数据到后台？3、明确任务（1）使用Flask连库建表（2）使用Flask查询、添加、删除、修改数据（3）制作主页、插入页面、修改页面任务实施任务：使用Flask操作数据库，实现志愿录取数据汇总任务主要步骤：定义视图定义模板Sql文件导入数据库Flask操作sqlalchemy创建数据库查询志愿录取数据使用Echarts折线图展示在web页面上任务实施1、app.py后台主程序（1）先在MySQL数据库中创建“web”数据库（2）Flask连接数据库（3）创建表模型，对应MySQL数据库中的表（4）创建/show路由，查询所有数据，并展示数据任务实施2、创建网页（1）创建show.html网页，实现数据展示功能03整合活动总结、知识点梳理学习总结拓展任务志愿填报和各专业招生录取人数分析：开发一个志愿填报系统，实现数据的增删改查。首次运行时向数据库中创建表；访问根站点时进入首页，展示学生志愿填报的汇总数据。单击“志愿填报：填写专业志愿”，转入志愿填报信息页面，可以输入省份、地级市、毕业学校，以及第一、第二、第三志愿，插入记录到数据库中，并返回志愿信息展示页面；在首页选择某条记录加以编辑，进入编辑页面，修改数据并提交后，完成记录的修改，并返回展示页面；在首页选择某条记录加以删除，则可以从数据库中删除相应记录信息。单击“各专业录取分析”，可以查看各专业计划录取与实际录取人数对比图。《数据可视化技术》单元18学生就业数据分析01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务：为了直观地查看学生在本省就业方面的数据，需要对就业数据进行统计分析，绘制本省各地市就业分布图。为了更详细地了解不同月份就业分布情况，还需要绘制三维图形来展示和对比分析。本单元学习Flask+Echarts+Jinja提取文件数据到网页端，再绘制柱状图、3D柱状图。任务1、Python处理文件数据任务2、绘制学生在本省各地市就业分布图任务3、绘制学生就业在不同月份各地市分布的三维柱状图学习目标1、知识（1）掌握Python数据处理方法（2）掌握Flask渲染模板（3）掌握Echarts柱状图、3D柱状图的绘制2、技能（1）能够使用Python处理数据（2）能够使用Flask将数据传递到网页（3）能够使用Jinja获取数据并通过Echarts展示出来3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施子任务一：绘制学生在本省各地市就业分布图1、使用Pandas读取“学生就业在本省分布情况.csv”文件，计算每个地市就业的总数，提取地区和就业总数数据，使用Flask模板渲染发送数据到Web前端，Web页面通过Jinja2获取数据，借助ECharts插件，绘制学生在本省各地市就业分布图。主要步骤：使用Python读取csv文件，提取“地区”一列疫情数据，提取“总数”一列数据使用flask渲染模板，同时将两列数据传递到网页中去在网页中调用echarts，使用Jinja获取数据，绘制柱状图任务实施效果图如下子任务2绘制学生就业在不同月份各地区分布情况的三维图2、本任务需要读取JSON数据，绘制三维柱状图，来查看学生在本省不同月份各地区的就业分布情况。1）JSON数据：JSON（JavaScriptObjectNotation）是一种轻量级数据交换格式，是Web应用中常见的一种数据格式。JSON是一个序列化的对象或数组。它由一套标记符的序列组成，这套标记符包含6个构造字符（左右大括号、左右中括号、冒号、逗号）、对象、数组、字符串、数字和3个字面值（false、null、true）。知识准备下列数据都是合法的JSON实例：其中由大括号括起来，中间使用逗号分隔键值对组成的字符串是最常见的JSON数据，JSON数据基本形式如下：2）JSON数据操作

Python中处理JSON数据的函数主要有json.dumps、json.dump、json.loads、json.load（1）json.dumps用于对数据进行编码，将Python中的字典数据转换为JSON字符串。（2）Json.dump用于将Python数据写入JSON文件知识准备知识准备2）JSON数据操作（3）json.loads用于对数据进行解码，将JSON字符串转换为Python中的字典数据。（4）json.loadjson.load用于打开JSON文件，并把字符串转换为Python的字典数据。知识准备2）ECharts三维柱状图

三维图一般至少有3个方面的参数，形成3D立体结构。在绘制三维图时需要导入ECharts.js、ECharts-gl.js依赖包，在option参数设置中一般需要指定grid3D、xAxis3D、yAxis3D、zAxis3D等项目，在series中使用type指定三维图类型，如：type：'bar3D'表示三维柱状图。

type：'scatter3D'表示三维散点图。

type：'line3D'表示三维折线图。

type：'map3D'表示三维地图。知识准备2）ECharts三维柱状图代码先导入了echarts.min.js、echarts-gl.min.js两个插件，再初始化ECharts实例，关联id为“main”的DIV，配置option参数。option中列出了3D效果的一些参数，但没有设置具体的值。运行该网页代码，结果如图4-4-1所示。任务实施本任务需要读取JSON数据，绘制三维柱状图，来查看学生在本省不同月份各地区的就业分布情况。主要步骤：(1)使用Python读取“学生就业在本省分布情况_3D数据.json”文件，提取x_city作为x轴数据，提取y_date作为y轴数据，提取data_jobs列表数据作为z轴数据。(2)使用flask渲染模板，同时将三列数据传递到网页中去(3)在网页中调用echarts，使用Jinja获取数据，绘制3D柱状图任务实施效果图如下03整合活动总结、知识点梳理学习总结拓展任务在上面绘制3D柱状图的任务中，改进传递数据的结构和参数个数，使用Jinja获取数据，在echarts使用dataset方式显示数据《数据可视化技术》单元19新生生源地分布分析01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务：为了在地理位置上分析学校在本省各地区的招生数量，更加直观地查看新生生源空间分布，需要使用地图来展示本省生源录取分布情况。从MySQL数据库中读取数据，加载湖南省地图，绘制新生数量地理位置分布图。任务:使用Ajax获取数据并绘制地图学习目标1、知识（1）了解地图数据的结构（2）掌握Ajax获取后台数据的方法（3）掌握Echarts绘制地图2、技能（1）能够处理数据成地图需要的形式（2）能够使用Ajax获取Flask传递的数据（3）能够使用Echarts绘制地图3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施任务实施任务分析：本任务将使用Flask、ECharts和Ajax技术，从MySQL数据库中读取数据，加载湖南省地图，绘制新生数量地理位置分布图知识准备1．Ajax技术之前的任务在网页端都是通过Jinja2获取后端数据的，本任务使用Ajax技术来获取后端的数据。Ajax是一种在无须重新加载整个网页的情况下，能够更新部分网页的技术，可用于创建快速动态网页。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这也意味着可以在不重新加载整个网页的情况下，实现对网页某部分的更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页知识准备1．Ajax技术使用Ajax异步请求服务器后端发送的数据，需要先导入jQuery插件，导入方法为。jQuery是一个JavaScript函数库，是一个轻量级“写得少，做得多”的JavaScript库，可实现HTML元素选取、元素操作、CSS操作、事件函数、特效、动画等。jQuery提供多个与Ajax有关的方法。通过jQueryAjax方法，能够使用HTTPGET和HTTPPOST从服务器上请求文本、HTML、XML或JSON数据，同时能够把这些外部数据直接载入网页的被选元素中

如果要异步请求Flask后端数据，并加载到网页当中，步骤如下：

1）后端设置路由，发送数据方式设为“GET”或“POST”，执行函数，返回序列化为JSON的数据。知识准备1．Ajax技术2）在网页端利用JQueryAjax请求数据。

$(document).ready(function(){});表示网页加载成功后立即执行function(){}函数，$即表示JQuery。在function(){}函数体内，执行JQuery的Ajax方法，发送数据请求，请求类型为POST方式；使用async（异步）方式请求；请求地址为/data，这里要匹配后端Flask路由的路径；数据类型为“json”类型；请求数据成功后执行success方法，得到数据，将数据放入result对象中，弹出成功提示框；请求数据失败后执行error方法，得到失败信息，弹出失败提示框。知识准备2．Echarts地图要绘制矢量地图，首先要下载地图数据文件，有JS格式文件，也有JSON格式文件，包括中国地图、中国各省市地图、世界地图等。接下来需要引用地图数据文件，JS文件导入直接用：<scriptsrc="china.js"></script>即可，JSON文件则使用：$.get('china.json',(chinaJson)=>{})。要使用地图，在series参数中，指定type为‘map’，以及将mapType指定为地区或国家名称，示例：知识准备2．Echarts地图地图的数据源一般会使用字典数组形式，如下所示另外，创建地图时一般会设置相关参数，如使用roam:true来支持地图缩放效果，使用toolbox增加工具箱，使用visualMap增加视觉通道等。任务实施本任务需要读取某高职学院在本省各地区的招生录取数，将数据通过路由传递到Web前端，网页端使用jQueryAjax方法获取数据，并通过ECharts地图展示出来，直观地在地理位置分布图中展示招生数据分布情况。具体步骤：1．编写Python后端程序app1（1）读取“新生本省生源分布情况.csv”文件（2）将列名称的中文转成英文df.rename(columns={'地区':'city','招生数':'enroll_num'},inplace=True)（3）连接数据库，将新的数据写入到mysq中任务实施2．编写Python后端程序app2（1）关联数据库和表使用FlaskSQLAlchemy连接MySQL的students数据库，创建表模型，选择地区和招生数两列数据。（2）创建路由创建根站点路由，渲染模板时转向网页；创建异步请求数据的路由，执行函数，查询出所需数据，JSON化数据并返回前端页面。（3）创建app运行语句3．编写前端网页脚本前端网页创建ECharts地图主要包括下面几个步骤：引入JS文件；创建DIV容器；创建ECharts实例；创建jQueryAjax方法请求数据；设置EChartsoption参数，包括title、tooltip、legend、dataset、visualMap、toolbox、series等；ECharts实例关联option参数。03整合活动总结、知识点梳理学习总结《数据可视化技术》单元20招聘数据不同学历的IT热门职业平均薪资分析01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务：招聘数据薪资分析与可视化：随着全球信息化进程的不断加快，信息产业的发展水平直接影响到了国家的综合实力。我国IT行业的发展越来越受到国家管理层的重视，我国目前正在大力推行国民经济与社会信息化建设，这无疑为IT行业的发展提供了巨大的需求和更广阔的空间，IT行业从业者的薪资待遇也随之不断攀升。这样一个有前景的行业，也不外乎很多年轻人想要转行到IT行业。本次训练将基于某招聘网站的招聘数据，完成数据可视化过程，并基于数据分析结果、编写数据分析报告，提出IT行业人才培养方向若干建议等。学习内容本单元学习使用FlaskSQLAlchemy进行复杂的查询，并将查询的数据传递到网页，用Echarts绘制多条折线图。任务1、MySQL插入数据任务2、Flask查询、处理数据任务3、Ajax获取数据并使用Echarts绘制折线图学习目标1、知识（1）掌握MySQL的基本操作（2）掌握Flask创建表模型的方法（3）掌握Ajax获取数据的方法（4）掌握Echarts绘制多条折线图2、技能（1）能够操作MySQL数据库（2）能够使用Flask读取MySQL数据并传递到网页前端（3）能够使用Ajax+Echarts绘制折线图3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施任务实施1、教师讲解

MySQL插入数据

FlaskSQLAlchemy联合查询MySQL多个表的数据2、学生讨论（1）怎样快速向MySQL导入数据？（2）SQLAlchemy如何实现联合查询？3、明确任务（1）MySQL插入数据（2）Flask查询、处理数据（3）Ajax获取数据并使用Echarts绘制折线图任务实施项目要求：招聘数据分析。使用Flask+Echarts+Ajax，对招聘数据不同学历的IT热门职业平均薪资进行绘图分析。任务实施项目背景：随着全球信息化进程的不断加快，信息产业的发展水平直接影响到了国家的综合实力。我国IT行业的发展越来越受到国家管理层的重视，我国目前正在大力推行国民经济与社会信息化建设，这无疑为IT行业的发展提供了巨大的需求和更广阔的空间，IT行业从业者的薪资待遇也随之不断攀升。这样一个有前景的行业，也不外乎很多年轻人想要转行到IT行业。任务实施虽然IT行业对于人才的需求很大，但是我们想要进入这个行业，难免会产生一些疑惑：（1）现在的IT市场中哪些职业最受欢迎；（2）学历高低对自己所选职业的影响；（3）掌握哪些专业技能可以提高自己的就业几率。本次训练将基于某招聘网站的招聘数据，完成数据可视化过程，并基于数据分析结果、编写数据分析报告，提出IT行业人才培养方向若干建议等。任务实施【任务要求】1、在MySQL中创建recruit数据库，在recruit数据库下创建edulevelsalary、jobsalarylevel、recruitersnumbers三个表，三个表的结构如下：（1）学历与职位薪资的关系数据库表：edulevelsalary表结构：字段名类型是否为空说明idint非空自增（主键）eduvarchar(255)非空学历job_namevarchar(255)非空职位名称salarydouble非空薪资任务实施【任务要求】（2）职位各薪资水平招聘人数数据库表：jobsalarylevel表结构：字段名类型是否为空说明idint非空自增（主键）job_namevarchar(255)非空职位名称salaryvarchar(255)非空薪资水平countint非空次数任务实施【任务要求】（3）职位招聘人数top10数据库表：recruitersnumbers表结构：字段名类型是否为空说明idint非空自增（主键）job_namevarchar(255)非空职位名称countint非空数量任务实施【任务要求】2、向三个表插入爬取到的和分析完的数据。插入语句见“recruit.sql”文件3、使用Flask+Echarts+Ajax进行数据可视化绘图，对招聘数据不同学历的IT热门职业平均薪资进行绘图分析。绘制折线图，对各个学历在最热门的5种职业的平均薪资用折线图表示。要求横轴为“5种岗位名称”，纵轴为“薪资”。任务实施【任务要求】效果图如下：任务资讯本任务使用Flask从MySQL数据库中提取数据，使用SQLAlchemy进行多表联合查询，将“学历-职位-薪资”数据组装成JSON数据发送到Web前端，前端使用Ajax异步获取数据，对数据进行转换，并将数据嵌入ECharts中，绘制多条折线图1．MySQL数据的导入导出

当MySQL创建库、表，插入数据后，可以将数据导出，备份数据库。mysqldump是MySQL中一个常用的备份命令，执行此命令会将包含数据的表结构和数据内容转换成相应创建语句和插入数据语句，保存为文本文件。将来若要还原，只需执行该备份文件即可。另外，一般的MySQL连接管理工具都具备数据的备份和恢复功能。例如使用Navicat连接MySQL后，就可以对某个库进行备份和恢复任务资讯

2．SQLAlchemy高级查询

前面已经介绍过，SQLAlchemy查询有两种方式，一种是使用表模型类名查询，一种是使用db.session查询。现有students表类，使用SQLAlchemy表模型关联了MySQL对应的表，利用该表类进行高级查询。（1）排序排序用到order_by方法，默认为升序，加上desc()则为降序。示例1：查询students表，按TotalScore字段升序排序。db.session.query(students).order_by(students.TotalScore).all()示例2：查询students表，按TotalScore字段降序排序。db.session.query(students).order_by(students.TotalScore.desc()).all()任务资讯（2）限制记录条数限制记录条数可以使用limit、offset和切片等方法。limit：设置一个参数，限制取出前几条记录，如db.session.query(students).limit(5)，表示取出students表的前5条记录。offset：设置一个参数，下标从0开始，表示从第几条数据开始，如db.session.query(students).offset(3)，表示从下标为3的这条数据开始取出记录。切片：在中括号中书写下标起始数字和结束数字，中间用冒号分隔，如db.session.query(students).all()[3:6]，表示取出第3、第4、第5条记录。（3）分组分组使用group_by方法。示例：查询students表，分别统计男生、女生人数。db.session.query(students.gender,func.count(students.id)).group_by(students.gender).all()任务资讯（4）having条件过滤having作用跟where类似，只不过having是用在group_by分组后面的条件判断。示例：首先需要对students表数据按年龄进行分组，统计每个分组分别有多少人。然后需要查看未成年人的各年龄段人数第一步：按年龄进行分组，统计人数。

db.session.query(students.age,func.count(students.id)).group_by(students.age).all()第二步：在分组基础上使用having条件过滤，保留年龄小于18岁的。db.session.query(students.age,func.count(students.id)).group_by(students.age).having(students.age<18).all()任务资讯（5）join连接多表查询

在SQLAlchemy中，使用join来完成内连接，另有左外连接（leftjoin），右外连接（rightjoin）。使用join连接时，如果不写join条件，那么默认将使用外键来作为条件连接。示例：连接students和course两个表，查找出所有学生的选课情况，按照选课的数量降序排序。db.session.query(students,func.count(course.cid)).join(course).group_by(students.id).order_by(func.count(course.cid).desc()).all()任务分析本任务需要执行SQL文件，向MySQL创建数据库和表，并插入数据。使用FlaskSQLAlchemy连接MySQL数据库，创建模型类并关联3个表，查询出5个热门职位，对这些热门职位在学历与职位薪资的关系表中查出不同学历对应的平均薪资，然后将数据组装成JSON数据发送到前端，前端使用Ajax获取数据，再设置到ECharts数据项中，绘制多条折线图。任务实施步骤如下：1．MySQL导入数据2．Flask关联数据表3．创建路由，实现页面跳转4．联合表查询数据5．创建Flask执行代码6．开发Web页面03整合活动总结、知识点梳理学习总结拓展任务在前面任务基础上，使用Flask+Echarts+Ajax进行数据可视化绘图，对最热门的5种职业的最高工资（不区分学历）用柱状图表示出来。要求横轴为“5种职业名称”，纵轴为“工资”。《数据可视化技术》单元21Vue.js开发基础01准备活动点名、复习本次课学习内容、学习目标介绍学习内容本单元学习使用Vite创建Vue3项目。任务1、Node.js的下载和安装任务2、创建Vue3项目任务3、使用组合式API开发项目学习目标1、知识（1）了解Vue的特性，能够说出Vue的4个特性（2）掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装（3）掌握常见的包管理工具的使用方法，能够应用npm和yarn相关命令（4）掌握Vite的使用方法，能够使用Vite创建Vue3项目（5）熟悉选项式API和组合式API，能够说出选项式API和组合式API的区别2、技能（1）能够下载和安装Node.js（2）能够使用npm和yarn相关命令（3）能够使用Vite创建Vue3项目（4）能够使用组合式API开发3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施什么是Vue1为了提高开发效率，市面上出现了基于MVVM模式的前端开发框架，例如Angular、React、Vue等。这些框架以数据为核心，使用户关注业务逻辑的处理，减少了手动的DOM操作。这些框架还为开发者提供了一套开发规则，控制权在框架本身，用户需要按照框架的规范进行开发。与jQuery相比，使用框架开发的项目具有更高的开发效率、更好的可维护性、更强的可扩展性和更高的性能。在Angular、React和Vue这3个框架中，Vue体积较小，在使用上更容易上手、更加灵活。1.1什么是Vue1.1什么是VueVue（读音：/Vjuː/）是一款用于构建用户界面的渐进式框架。其中，“渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。1.1什么是Vue使用Vue进行项目开发具有以下优势。轻量级。Vue是一个轻量级的前端开发框架，文件体积小。Vue项目基于JavaScript语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。Vue在使用上比较灵活，开发人员可以选择使用Vue开发一个全新项目，也可以将Vue引入现有项目。1.1什么是VueVue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应的数据绑定，可支持单向和双向数据绑定。Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。1.1什么是VueVue是基于MVVM模式的框架。MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。其中，Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。1.1什么是VueVue的基本工作原理如下图所示。1.什么是VueView和Model不能直接通信，它们需要借助ViewModel才能进行通信。ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。ViewModel包含DOMListeners和

DataBindings。其中，DOMListeners用于监听View中DOM变化，并在DOM变化时通知Model做出相应的修改；DataBindings用于监听Model中的数据变化，并在数据变化时通知View做出相应的修改。1.2Vue的特性Vue的4个特性。数据驱动视图双向数据绑定插件指令1.2Vue的特性在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。1.数据驱动视图1.2Vue的特性Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。2.双向数据绑定1.2Vue的特性指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。3.指令1.2Vue的特性Vue支持插件，通过加载插件可以实现更多的功能。常用的插件有VueRouter（路由）、Vuex（状态管理库）、Pinia（轻量级状态管理库）等，这些插件经过简单配置就可以使用。4.插件1.3Vue的版本目前，Vue共有3个大版本，分别是Vue

1、Vue2和Vue3。其中，Vue1几乎被淘汰，不建议学习与使用；Vue2和Vue3目前被广泛应用，并且Vue3将会逐步替代Vue2。1.3Vue的版本Vue3支持Vue2中绝大多数的API与特性，同时Vue3还新增了一些特有的功能，并废弃了Vue2中的一些旧功能。Vue3新增的功能包括组合式（Composition）API、多根节点组件等；废弃的旧功能包括过滤器（Filter）以及$on()、$off()和$once()实例方法等。虽然从表面上看，Vue3和Vue2的使用方式没有太大的差异，但Vue3的底层代码发生了很大变化，包括渲染、数据监听、双向绑定、生命周期等。1.3Vue的版本Vue3的新特性如下。体积更小，采用按需编译的方式编译出来的文件体积比Vue2的小。性能提升，运行速度比Vue2快1.5倍左右。具有更好的TypeScript支持。暴露了更底层的API，可以通过多种方式组织代码，代码使用上更加灵活。提供了更先进的组件。Vue创建了一个虚拟的Fragment节点，允许组件中有多个根节点。提供组合式API，能够更好地组合逻辑、封装逻辑、复用逻辑。1.3Vue的版本为了提高开发效率，开发者可以在项目中添加UI组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体，使用它可以更快速地开发用户界面。目前，主流UI组件库都已经发布了支持Vue3的版本，常用的UI组件库如下。Element

Plus组件库：一款基于Vue3的桌面端组件库。Vant组件库：一款开源移动端组件库，它从3.0版本开始支持Vue3。Ant

Design

Vue组件库：一款用于开发和服务企业级后台产品的组件库，它从2.0版本开始支持Vue3。Vue开发环境22.1VisualStudioCode编辑器VisualStudioCode（简称VSCode）是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于前端开发人员来说，一个强大的编辑器可以使开发变得简单、便捷、高效。2.1VisualStudioCode编辑器VSCode编辑器具有以下特点。轻巧、极速，占用系统资源较少。具备代码智能补全、语法高亮显示、自定义快捷键和代码匹配等功能。跨平台，可用于macOS、Windows和Linux操作系统。主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色，以及可以快速查看已打开的项目文件和项目文件结构。提供丰富的扩展，用户可根据需要自行下载和安装扩展。2.1VisualStudioCode编辑器将VSCode编辑器安装完成后，该编辑器的默认语言是英文。如果想要切换为中文，首先单击VSCode编辑器的初始界面左侧边栏中的“”图标按钮进入扩展界面，然后在搜索框中输入关键词“chinese”找到中文语言扩展，单击“Install”按钮进行安装，如下图所示。安装中文语言扩展2.1VisualStudioCode编辑器安装成功后，需要重新启动VSCode编辑器，中文语言扩展才可以生效。重新启动VSCode编辑器后，VSCode编辑器的中文界面如下图所示。2.1VisualStudioCode编辑器Volar扩展专门用于为“.vue”单文件组件（Single-FileComponent，SFC）提供代码高亮显示和语法支持。该扩展仅适用于Vue3项目，不仅提供了语法高亮显示、智能提示、错误提示、格式化等功能，而且支持多根节点组件，例如支持将一个Vue文件中的<template>、<script>、<style>拆分成3个窗口，每个窗口负责各自的功能。

安装Volar扩展2.1VisualStudioCode编辑器Volar扩展的安装方法与中文语言扩展的安装方法类似。如果想要安装Volar扩展，可以在扩展界面的搜索框中输入关键词“Volar”，搜索到“VueLanguageFeatures(Volar)”扩展后进行安装。需要注意的是，Vue3的组件代码与Vue2不同，使用的语法提示和高亮插件也不同。在Vue2中不能使用Volar扩展，而是使用Vetur扩展，可以在扩展界面的搜索框中输入关键词“Vetur”，搜索到“Vetur”扩展后进行安装。2.1VisualStudioCode编辑器在实际开发中，开发一个项目需要先创建项目文件夹，以便于保存项目中的文件。接下来演示如何创建项目文件夹，如何使用VSCode编辑器打开项目文件夹，以及如何创建一个HTML5文档，具体步骤如下。使用VSCode编辑器2.1VisualStudioCode编辑器在D:\vue目录下创建一个项目文件夹chapter01。创建项目文件夹步骤1步骤3步骤22.2 Node.js环境Node.js是一个基于V8引擎的JavaScript运行环境，提供了一些功能性的API，例如文件操作API、网络通信API等。2.2 Node.js环境打开Node.js官网，找到Node.js下载地址，如下图所示。2.2 Node.js环境从Node.js官方网站可以看出，Node.js有两个版本，分别是16.17.0LTS和18.9.0Current。其中，LTS（LongTermSupport）表示提供长期支持的版本，只进行Bug修复且版本稳定，因此有很多用户在使用；Current表示当前发布的新版本，增加了一些新特性，有利于进行新技术的开发使用。这里选择下载16.17.0LTS版本。下载完成后会得到一个名称为node-v16.17.0-x64.msi的安装包文件。2.2 Node.js环境双击node-v16.17.0-x64.msi安装包图标，会弹出安装向导窗口，如下图所示。安装过程全部使用默认值。2.2 Node.js环境安装完成后，测试一下Node.js是否安装成功，具体步骤如下。2.2 Node.js环境按“Windows+R”组合键，打开“运行”对话框，输入“cmd”。在“运行”对话框中输入“cmd”后的效果如下图所示。打开“运行”对话框步骤1步骤3步骤22.2 Node.js环境单击“确定”按钮或者直接按“Enter”键，会打开命令提示符，如下图所示。打开命令提示符步骤1步骤3步骤22.2 Node.js环境在命令提示符中，输入命令“node-v”，其中v是version的简写，表示版本。命令输入完成后，按“Enter”键，查看当前安装的Node.js版本，如下图所示。查看Node.js版本若想要退出命令提示符，可以输入“exit”并按“Enter”键，或者单击右上角的“×”关闭按钮退出。步骤1步骤3步骤22.3常见的包管理工具什么是包呢？2.3常见的包管理工具在Vue项目开发中，经常需要通过各种第三方的包（package）来扩展项目的功能。“包”可以理解为将一系列模块化的代码打包起来，形成一个包，以便于使用。项目中所用到的包称为项目的依赖（dependency）。2.3常见的包管理工具什么是包管理工具呢？2.3常见的包管理工具为了方便管理第三方的包，需要用到包管理工具。包管理工具可以让开发人员轻松地下载、升级、卸载包。假设在项目开发时，没有包管理工具，若想使用第三方包，则每次都需要下载、解压后才可以使用，非常烦琐。而使用包管理工具，只需通过一条命令即可下载并安装第三方包，非常方便，而且还可以指定下载的版本等。2.3常见的包管理工具npm是Node.js默认的包管理工具，它可以安装、共享、分发代码，还可以管理项目的依赖关系。npmyarn是Node.js的包管理工具，它是一个高效、安全和可靠的包管理工具，yarn能够提高包的安装效率，节约安装时间。yarn常见的包管理工具2.3常见的包管理工具在安装Node.js时会自动安装相应版本的npm，不需要单独安装，使用“npm-v”命令可以查看npm的版本，如下图所示。1.npm2.3常见的包管理工具使用npm包管理工具可以解决以下场景的需求。从npm服务器下载别人编写的第三方包到本地使用。从npm服务器下载并安装别人编写的命令行程序到本地来使用。将自己编写的包或命令行程序上传到npm服务器供别人使用。2.3常见的包管理工具npm提供了快速操作包的命令，只需要执行简单的命令就可以很方便地对第三方包进行管理。npm中常用的命令如下。npminstall包名：可简写为“npmi包名”，用于为项目安装指定名称的包。如果加上-g选项，则会把包安装为全局包，否则只安装到本项目中。如果省略包名，则npm会根据当前目录下的package.json文件中保存的依赖信息为项目安装所有的包。npmuninstall包名：用于卸载指定名称的包。npmupdate包名：用于更新指定名称的包。2.3常见的包管理工具在下载npm安装包时，下载速度可能会比较慢，这是因为提供包的服务器在国外。为了加快包的下载速度，建议将下载源切换成国内镜像服务器。为npm设置镜像地址的具体命令如下。npmconfigsetregistry为了验证镜像地址是否设置成功，可以通过如下命令进行验证。npmconfiggetregistry执行上述命令后，若输出了设置的镜像地址，则表示设置成功。2.3常见的包管理工具在使用yarn之前，需要先确保计算机中已经安装了Node.js环境，再使用npm命令安装yarn，安装命令如下。npminstallyarn-g为了验证yarn是否安装成功，可以通过“yarn-v”命令查看yarn的版本信息，如下图所示。2.yarn2.3常见的包管理工具为了提高下载yarn安装包的速度，也可以将yarn的下载源切换成国内镜像服务器。为yarn设置镜像地址的具体命令如下。yarnconfigsetregistry为了验证镜像地址是否设置成功，可以通过如下命令进行验证。yarnconfiggetregistry执行上述命令后，若输出了设置的镜像地址，则表示设置成功。2.3常见的包管理工具下面列举yarn中一些常用的命令。yarninstall：可简写为yarn，用于为项目安装所有包。如果提供了-g选项，则会把包安装为全局包，否则只安装到本项目中。yarnremove包名：用于卸载指定名称的包。yarnup包名：用于更新指定名称的包。yarnadd包名：用于添加指定名称的包。2.3常见的包管理工具yarn与npm包管理工具的区别使用npm安装同一个包时，每次安装都需要重新下载，而yarn会缓存每个下载过的包，再次使用时无须重复下载。npm按照队列安装每个包，也就是说，必须要等到当前包安装完成后，才能继续安装后面的包，而yarn可以利用并行下载的方式提高资源利用率，安装速度更快。npm的输出信息比较冗长，在执行npminstall命令时，命令提示符里会输出所有被安装的包的信息。相比之下，yarn的输出信息比较简洁，只输出必要的信息，同时也提供了一些命令供开发者查询额外的安装信息。使用Vite创建Vue3项目33.1 什么是Vite什么是Vite？3.1 什么是ViteVite（读音：/vit/）是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（HotModuleReplacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。3.1 什么是Vite在Vue3出现前，Vue2一般使用Vue

CLI创建。Vue

CLI基于Webpack构建