基于HTML语言的环保网站的设计与实现

318基于HTML语言的环保网站的设计与实现

系统包含：源码+论文+说明文档

所用技术：SpringBoot+Mybatis+Mysql

获取资料请滑到底部获取联系方式

系统功能：

现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本环保网站就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此环保网站使用跨平台的可开发大型商业网站的HTML技术，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发，后台采用Java语言的Spring Boot框架，前台采用VUE框架和layui样式，环保网站实现页面基本用HTML文件写作方式。实现了管理员功能有个人中心，管理员管理，濒危生物管理，地区管理，环保健康类型管理，保护法类型管理，公告类型管理，论坛管理，环保健康管理，环境保护管理，环境保护法管理，公告信息管理，轮播图管理。用户可以注册登录，修改个人信息，查看管理员发布的各种信息还可以留言，可以对濒危生物收藏，环保健康收藏，环境保护收藏等操作。环保网站的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。
关键词：环保网站；HTML技术；MySQL；VUE；Spring Boot

系统结构：

系统目录：

目 录
目 录 III
1 绪论 1
1.1 研究背景
1.2 目的和意义
1.3 论文结构安排
2 相关技术 3
2.1 HTML技术介绍
2.2 B/S结构介绍
2.3 MySQL数据库介绍
2.4 Java语言介绍
2.5 VUE框架介绍
2.6 Tomcat 服务器介绍
2.7 layui介绍
2.8 Spring Boot框架介绍
3 系统分析 9
3.1 系统可行性分析
3.1.1 技术可行性分析
3.1.2 经济可行性分析
3.1.3 运行可行性分析
3.2 系统性能分析
3.2.1 易用性指标
3.2.2 可扩展性指标
3.2.3 健壮性指标
3.2.4 安全性指标
3.3 系统流程分析
3.3.1 操作流程分析
3.3.2 登录流程分析
3.3.3 信息添加流程分析
3.3.4 信息删除流程分析
4 系统设计 15
4.1 系统设计的原则
4.2 系统概要设计
4.3 系统功能结构设计
4.4 数据库设计
4.4.1 数据库E-R图设计
4.4.2 数据库表结构设计
5 系统实现 25
5.1 管理员功能介绍
5.1.1 管理员管理
5.1.2 濒危生物管理
5.1.3 论坛管理
5.1.4 环保健康管理
5.1.5 环境保护管理
5.1.6 环境保护法管理
5.1.7 公告信息管理
5.1.8 用户信息管理
5.2 用户功能介绍
5.2.1 个人中心
5.2.2 濒危生物信息
5.2.3 环境保护信息
5.2.4 公告信息管理
6 系统测试 32
6.1 系统测试的特点 
6.2 系统测试方法
6.3 系统功能测试
6.3.1 登录功能测试
6.3.2 修改密码功能测试
6.4 测试结果分析
结  论 36
致  谢 37
参考文献 38

1 绪论
1.1 研究背景
当前社会各行业领域竞争压力非常大，随着当前时代的信息化，科学化发展，让社会各行业领域都争相使用新的信息技术，对行业内的各种相关数据进行科学化，规范化管理。这样的大环境让那些止步不前，不接受信息改革带来的信息技术的企业随时面临被淘汰，被取代的风险。所以当今，各个行业领域，不管是传统的教育行业，餐饮行业，还是旅游行业，医疗行业等领域都将使用新的信息技术进行信息革命，改变传统的纸质化，需要人手工处理工作事务的办公环境。软件信息技术能够覆盖社会各行业领域是时代的发展要求，各种数据以及文件真正实现电子化是信息社会发展的不可逆转的必然趋势。本环保网站也是紧跟科学技术的发展，运用当今一流的软件技术实现软件系统的开发，让环保方面的信息完全通过管理系统实现科学化，规范化，程序化管理。从而帮助信息管理者节省事务处理的时间，降低数据处理的错误率，对于基础数据的管理水平可以起到促进作用，也从一定程度上对随意的业务管理工作进行了避免，同时，环保网站的数据库里面存储的各种动态信息，也为上层管理人员作出重大决策提供了大量的事实依据。总之，环保网站是一款可以真正提升管理者的办公效率的软件系统。
1.2 目的和意义
信息数据的处理完全依赖人工进行操作，会耗费大量的人工成本，特别是面对大量的数据信息时，传统人工操作不仅不能对数据的出错率进行保证，还容易出现各种信息资源的低利用率与低安全性问题。更有甚者，耽误大量的宝贵时间，尤其是对信息的更新，归纳与统计更是耗财耗力的过程。所以电子化信息管理的出现就能缓解以及改变传统人工方式面临的处境，一方面可以确保信息数据在短时间被高效处理，还能节省人力成本，另一方面可以确保信息数据的安全性，可靠性，并可以实现信息数据的快速检索与修改操作，这些优点是之前的旧操作模式无法比拟的。因此环保网站为数据信息的管理模式的升级与改革提供了重要的窗口。
此次环保网站的开发，需要用到的知识不仅涉及到界面设计与功能设计方面的知识，还需要涉及到数据库与编程语言上面的知识，这些知识点对于一个即将毕业的学生来说，一是为了巩固在校所学相关专业知识；二是为了让学生学会如何将专业理论知识运用于现实软件的开发过程；三是让学生明白知识是无穷无尽的，要时刻明白活到老学到老的真正含义，让学生要养成时刻学习的习惯，同时也要相信通过此次程序的开发，会让学生对于专业知识的理解与软件开发水平的提高有着极大的帮助。
1.3 论文结构安排
为了帮助用户更好的了解和理解程序的开发流程与相关内容，本文将通过六个章节进行内容阐述。
第一章：描述了程序的开发背景，程序运用于现实生活的目的与意义，以及程序文档的结构安排信息；
第二章：描述了程序的开发环境，包括程序开发涉及到的技术，程序开发使用的数据存储工具等信息；
第三章：描述了程序着手进行开发时，会面临的可行性问题，并对程序功能以及性能要求进行描述；
第四章：描述了程序大功能模块下的功能细分信息，以及存储程序数据的数据库表文件结构的设计信息等；
第五章：描述了程序的功能实现界面的内容，也对程序操作人员操作的部分功能进行了描述；
第六章：描述了程序功能的测试内容，并介绍了系统测试的概念与方法。
2 相关技术
2.1 HTML技术介绍
超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
语言概述
在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Web）。
Web页面也就是通常所说的网页，在这里不作区分。
折叠规范标准
HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
折叠标记语言
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点------就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。

2.2 B/S结构介绍
在早期，一些使用HTML语言编写的文件，再集合一些其它资源文件就可以组成一个最简单的Web程序，了解了Web程序也需要了解Web站点，它们之间的关系就是一个或者多个Web程序可以放在Internet上的一个Web站点（Web服务器）中进行使用。可以说Web应用程序的开发也带动了B/S这种网络结构模式的兴起。B是Brower（浏览器）的首字母，S是Server（服务器）的首字母，两个首字母进行组合就成了网络结构模式的简称B/S。由于这种结构模式通过安装在客户端的浏览器进行服务器的访问，可以把程序的核心功能安排在服务器中进行处理，给程序的开发，后期使用和维护省去了许多工作。
（1）浏览器
它主要安装于用户客户端，可以把操作指令传达给服务器，也可以接收服务器返回的操作指令的操作结果，并把Web信息显示于浏览器的界面让用户阅读和浏览，前提是程序是用B/S方式进行开发的。
（2）服务器
服务器这个名称有时也运用于对计算机硬件设备进行称呼，有时也运用于计算机服务端的软件进行称呼，这二者的区别还需要从语境的方式进行区分。硬件意义的服务器是一个性能突出的计算机，是网络的灵魂，作为网络节点对于网络上的数据信息进行存储并处理。软件意义的服务器也要区分Web服务器和应用程序服务器，Web服务器常用的软件就有IIS服务器和Apache，通过Internet的连接处理Web浏览器提交的请求。应用程序服务器常见的软件有Java服务器，用于.NET程序开发的.NET服务器以及PHP服务器等。
对浏览器和服务器进行了简要说明，也就明白其工作原理了，用户先要在客户端安装浏览器，服务器上需要安装数据库，比如MySQL或者SQL Server等数据库都可以，浏览器与数据库的交互主要就是通过Web Server进行实现。
2.3 MySQL数据库介绍
开发的程序面向用户的只是程序的功能界面，让用户操作程序界面的各个功能，那么很多人就会问，用户使用程序功能生成的数据信息放在哪里的？这个就需要涉及到数据库的知识了，一般来说，程序开发通常就会对常用数据存储工具的特点进行分析比对，比如MySQL数据库的特点与优势，Access数据库的特点与优势，Sqlserver数据库的特点与优势等，最终看哪个数据库与需要开发的程序比较匹配，也符合程序功能运行需要的数据存储要求，比如，需要开发商业级别的程序，存储的数据对数据库要求较高，可以选用Oracle，如果只是比较简单的程序，对数据存储没有过多要求，可以选用微软旗下的Access，当开发程序要求数据库占用空间小，并能满足程序数据存储要求时，就可以考虑Oracle公司从瑞典MySQL AB公司在很早之前就收购过一个关系型数据库，它是现在的MySQL数据库。在数据库工具里面它是最受认可的其中一个应用软件。需要说明的信息就是，本程序的开发就运用到了此数据库。它将程序数据通过使用不同的数据表格进行保存，在增加了程序数据的存储速度的时候，也提高了数据库的灵活性。
为了更容易理解MySQL数据库，接下来就对其具备的主要特征进行描述。
（1）首选MySQL数据库也是为了节省开发资金，因为网络上对MySQL的源码都已进行了公开展示，开发者根据程序开发需要可以进行下载，并做一些改动就可以使用在程序中，可以推动开发者开发此程序的开发进度。
（2）SQL数据语言在MySQL里面也同样适用
（3）MySQL不仅可以支持多种编程语言，比如在校期间学到的C语言，Java语言，以及课后接触的PHP语言，C++语言等编程语言，它都能很好的支持，而且MySQL的安装与使用还不挑剔使用平台。
（4）MySQL可以支持具有千万条数据记录的数据库，电脑操作系统在进行首次安装或者是重装时，可以根据需要选择安装32位或64位操作系统，这两种操作系统对表文件的支持力度不一样，32位的操作系统最多可以存放4GB的表文件，64位操作系统最多可以存放8TB的表文件。
（5）MySQL数据库可以通过GPL协议进行个性化定制，需要开发者自己对数据库的源代码进行修改，以此开发出属于自己的MySQL。
2.4 Java语言介绍
程序开发语言有很多，但是截至目前，Java语言在IT领域内，仍然是最被认可，以及被广泛运用的编写语言之一，因此在选择此程序的编写语言上，果断选择这门编程语言进行程序开发。可以说经过了这么多年的发展，Java语言不仅在Web开发领域有了突出性贡献，而且在大数据开发领域以及Android开发领域都得到了广泛运用。由于Java语言拥有较强的扩展性能，并且表现出的稳定性能，让其成为大型后端系统开发语言首选，现如今，Java语言也成为了一种常用的互联网平台的解决方案。
作为一种源码在网络上开源的面向对象的程序开发Java语言，由它开发完成的程序是不可能直接运行在各大平台的，Java程序的运行，需要在操作平台上配置其运行的环境，包括数据库软件与Java程序开发软件等工具的安装与配置。在Win7，Win10或其它操作平台上配置Java程序运行环境，只要环境配置成功，Java程序都可以运行起来。
2.5 VUE框架介绍
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
当创建了ViewModel后，双向绑定是如何达成的呢？
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

2.6 Tomcat 服务器介绍
对于开发Java程序的人员来讲，Tomcat服务器一般都是第一次接触，之所以不使用其他的诸如IIS服务器或者Apache服务器，是因为IIS对微软的开发语言比较友好，而Apache服务器对静态的HTML有很好的优势，只有Tomcat服务器属于小巧玲珑形，比较适合Java开发时使用。Tomcat对于Java项目用到的Servlet和HTML技术可以很好的匹配。再说，Tomcat是开源的，开源免费就是王道，能够很好的支持Javaweb项目，如果没有太多的要求的话，Tomcat就是首选。Tomcat跟随Java的成长一起发展，目前有很多版本，Tomcat对JRE环境也有对应的版本支持需求。
一般情况下，Tomcat服务器是Javaweb程序开发首选，tomcat服务器是Apache服务器的扩展，myeclise就集成的有Tomcat服务器，如果Tomcat服务器版本无法满足需求，也可以另外配置相应的Tomcat服务器，目前Tomcat版本已经发展到了tomcat9这个版本了。
2.7 layui介绍
layui 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui 定义为「经典模块化」，并非是自吹她自身有多优秀，而是有意避开当下 JS 社区的主流方案，试图以最简单的方式去诠释高效！她的所谓经典，是在于对返璞归真的执念，她以当前浏览器普通认可的方式去组织模块！我们认为，这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的最佳指引。所以 layui 本身也并不是完全遵循于 AMD 时代，准确地说，她试图建立自己的模式。
2.8 Spring Boot框架介绍
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为维修人员者。
SpringBoot可以与经典的Java开发工具一起使用或者作为命令行工具安装。无论如何，需要JavaSDK1.6或者更高版本，本项目用到的是JDK1.8版本。

3 系统分析
当用户确定开发一款程序时，是需要遵循下面的顺序进行工作，概括为：系统分析-->系统设计-->系统开发-->系统测试，无论这个过程是否有变更或者迭代，都是按照这样的顺序开展工作的。系统分析就是分析系统需要做什么的问题，主要目的就是确定系统的功能，这也为接下来的工作做了一个好的开端。
3.1 系统可行性分析
开发一款程序软件不仅需要时间，也需要人力，物力资源。而进行可行性分析这个环节就是解决用户这方面的疑问，看看程序在当前的条件下是否可以进行开发。## 系统图片：

基于HTML语言的环保网站的设计与实现01.jpg：

基于HTML语言的环保网站的设计与实现02.jpg：

基于HTML语言的环保网站的设计与实现03.jpg：

基于HTML语言的环保网站的设计与实现04.jpg：

基于HTML语言的环保网站的设计与实现05.jpg：

基于HTML语言的环保网站的设计与实现06.jpg：

基于HTML语言的环保网站的设计与实现07.jpg：

基于HTML语言的环保网站的设计与实现08.jpg：

基于HTML语言的环保网站的设计与实现09.jpg：

基于HTML语言的环保网站的设计与实现10.jpg：