摘 要：白鱀豚被称为“水中国宝”，但是随着近年来长江生态系统急剧恶化【与人类活动较多有着密不可分的关系】。目前已经很难在长江流域看到白鱀豚。作品的初衷是希望通过数据可视化的形式对白鱀豚的分布，成长，习性，分类，极危，数量，极危原因，标本和数据化大屏9个方面进行详细的数据可视化展示，让更多的人了解白鱀豚，爱护白鱀豚。
关键词：白鱀豚 数据可视化 CMS后台 C# HTML 后台数据库 E-Charts
【一】作品简介
（1）作品选题背景
数量稀少且为中国特有,被称为“水中大熊猫”.是国家一级保护动物。
长江生态保卫战：全面禁捕十年，白鱀豚或可归矣。
数据可视化助力白暨豚保护，让保护更加高效。
Web数据库技术已经成为应用最为广泛的网站架构基础技术。
（2）选题意义
数据可视化使得白暨豚保护的各项数据更加直观。
后台CMS管理系统，更利于管理员管理数据。
交互性数据，能够为白暨豚保护措施提供更好的意见。
保护白暨豚，让这份爱分享与传递
（3）系统目标
前端界面；HTML+Javascript显示，CSS3样式布局。
网页后端：ASP进行业务逻辑的实现。
后台数据库：设计与页面相连的数据表，例如分布表， 习性表，数量信息表等。
CMS管理后台：连接数据库的系统管理后台，对页面的 各项信息进行统一管理
（4）系统流程图
管理员--身份验证--发布信息--白暨豚信息数据可视化--用户
【二】可行性研究
（1） 技术可行性
html5+css6+javascript框架
ASP.NET+ SQL Server
Pycharm+ Ps+Ai工具
（2）经济可行性
需要专业人员进行系统的运行阶段的维护与管理，但系统开发只需要少量的投入。
（3）操作可行性
本系统直观易懂，使用非常方便，只要经过简单的培训，便可掌握。
（4）法律可行性
本系统开发未侵犯他人、集体或国家利益，不存在侵权和违反国家法律等问题。
【三】需求分析
（1）解决的问题：白鱀豚被称为“水中国宝”，但是随着近年来长江生态系统急剧恶化【与人类活动较多有着密不可分的关系】。目前已经很难在长江流域看到白鱀豚。作品的初衷是希望通过数据可视化的形式对白鱀豚的分布，成长，习性，分类，极危，数量，灭绝原因，现存标本和数据化大屏9个方面进行详细的数据可视化展示，让更多的人了解白鱀豚，爱护白鱀豚。
（2）基本功能：、
数据可视：前端界面对白暨豚各项数据进行展示。
数据管理：白暨豚后台CMS管理系统。
保护决策：数据大屏可为保护决策提供数据支撑。
人员管理：白暨豚工作人员录入后台数据库进行统 一管理
【四】作品迭代
（1）作品一：完成濒危动物保护网页的搭建，主要分为白暨豚博物馆，白暨豚图表，白暨豚迁徙图和呼吁界面。
采用技术：
E-charts+HTML5+CSS3
（2）作品二：确定中国风风格，加入动态效果，丰富界面的图表，数据可视化从白暨豚分布，成长，习性，分类，数量等方面进行数据可视化展示。
采用技术：
E-charts+HTML5+CSS3+SVG动画
（3）作品三：在初赛的基础上加入了爬虫技术，统一了界面的颜色，不超过五种颜色。
采用技术：
E-charts+HTML5+CSS3+SVG动画+Python
（4）作品四：在省赛的基础上加入了白暨豚数据大屏，后台CMS管理界面和后台数据库。
采用技术：
E-charts+HTML5+CSS3+SVG+ASP.NET+SQL Server +Python
【五】详细设计
（1）设计概述：伴随着Internet的迅速发展，计算机技术正在由基于C/S（client）模式的应用系统转变为基于B/S（Browser/Server）模式的应用系统。
.png)
Javascript技术：E-Charts 是一个使用 JavaScript 实现的开源可视化库，实现白鱀豚的可视化界面展示，并结合jQuery动画功能。
Asp.Net技术：Asp.Net是目前最流行的Web开发技术之一，支持多种语言，本系统白鱀豚后台CMS管理界面主要利用C#语言开发。
（2）程序流图（以管理员为例）
.png)
（3）技术实现
网页标签搭建与布局：采用最新标准的HTML5 实现页面标签的搭建，CSS3对标签页面进行布局。前端框架：采用Bootstrap4，基于HTML5、CSS6、javascript，对网页进行简介的开发与布局。
javascript响应脚本：采用 JavaScript 库中的jQuery 实现网页的白云SVG动态效果，采用JavaScript 实现的开源可视化库E-Charts 进行白鱀豚各项数据的信息可视化展示，JavaScript编写的WebGL第三方库three.js实现少量的3D显示功能（鸟儿飞翔）。-----参考资料来源于《菜鸟教程》
页面背景：页面的图片元素大体上以矢量图为主，以PS进行主要设计，AI为辅助设计。页面字体进行统一采用隶书风格，页面信息介绍采用古代从右上向左下的读法，符合中国国风风格。
数据库设计：
.png)
web前端打包工具：webpack
白鱀豚信息爬取：安装pycharm和python3.0文件，pycharm在python环境下做的一个简单白鱀豚数据爬虫，爬取的网站为百度百科、百度贴吧、世界自然保护联盟（IUCN)等网站。
利用本学期学习的动态网页asp知识搭建了一个白鱀豚后台管理系统，通过web控件与后台数据库进行数据绑定。
（4）技术分工
独立开发完成一整套体系
【六】运营推广
（1）宣传推广：微博抖音等线上平台进行推广。
（2）周边产品：白鱀豚茶杯，书包，雨伞等周边产品。
测试报告
测试环境 windows系统 MicrosoftEdge浏览器，火狐浏览器，谷歌等浏览器。和pycharm和python3.0环境。
测试方法：在所搭建的环境下运行代码。
测试环节：功能测试:连接测试，表单测试，Cookies测试，设计语言测试，数据库测试;性能测试：连接速度测试，负载测试，压力测试；接口测试:服务器接口，外部链接，错误处理；兼容性测试。
.png)
测试结果：能准确的显示可视化界面和白暨豚数据网络爬虫的爬取页面和文本信息。
安装及使用
作品的开发基于Visual Studio Community集成开发环境。
安装主流浏览器如MicrosoftEdge浏览器，火狐浏览器，谷歌等浏览器。考虑到不同浏览器的兼容问题，专门有针对性的开发出了两个版本baijitun1文件针对火狐，谷歌，IE等浏览器；baijitun2文件则主要针对微软的Microsoft Edge浏览器。
安装pycharm和python3.0文件，pycharm在python环境下做的一个简单白鱀豚网络数据爬虫。
总结
希望通过数据可视化展示的方法让更多的人们更清楚的看到白暨豚的信息，其实，并不仅仅是白暨豚，世界上的所有濒危动物都应该受到保护和重视。让我们把这份爱传递与共享，让小动物们有个家，不再流浪。
参考文献：
[1] 京然.奖励10万“寻证白鱀豚”项目——中国生物多样性保护与绿色发展基金会对长江保护理念的实践[J].中国社会组织,2017(21):46-47.
[2] 白冰，基于可视化和数据融合技术的多元异构网络数据安全防护分析. 陕西省教育厅2018年度专项科学研究计划课题（18JK0961）；10.14022/j.issn16746236.2020.13.030.
[3] 张鑫鑫,基于.net的报名管理平台的设计与开发. 2019年度广西工业职业技术学院校级教改项目——以《人工智能实战：人脸识别》（2019015KY023）；10.14004/j.cnki.ckt.2020.1770.
作者简介：姓名：刘逆凡 性别：男 籍贯：河南省镇平县 民族：汉 出生年月：1997年3月30日 学历：本科 研究方向：数据可视化 职务或职称：学生