ssm图片分享及评价网站

摘 要

大数据时代下，数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求，利用互联网服务于其他行业，促进生产，已经是成为一种势不可挡的趋势。在图片分享及评价的要求下，开发一款整体式结构的图片分享及评价系统，将复杂的系统进行拆分，能够实现对需求的变化快速响应、系统稳定性的保障，能保证平台可持续、规模化发展的要求。

本系统的前端界面涉及的技术主要有JSP， HTML，JQUERY等等，通过这些技术可以实现前端页面的美观和动态效果使之符合广大群众的审美观，后台主要使用的技术主要有Java编程语言，MySQL数据库，JSP和AJAX异步交互，根据AJAX异步模式的图片分享及评价系统解决了传统管理方式所带来的人力、物力和时间上的虚耗和交流深度的限定，这让交流的过程更快捷、准确、便利，同时完成图片分享及评价系统的基本功能：首页、站点管理（轮播图、公告栏）用户管理（管理员、普通用户）内容管理（用户交流、论坛分类、网站资讯、资讯分类）更多管理（图片分类、热门图片、图片购买）系统管理。

关键词：图片分享；整体式结构；Java编程语言；MySQL数据库

SSM image sharing and evaluation website

Abstract

In the era of big data, data is growing explosively. In order to meet the trend of the information age and the requirements of information security, using the Internet to serve other industries and promote production has become an irresistible trend. Under the requirements of picture sharing and evaluation, develop an integrated picture sharing and evaluation system, split the complex system, realize the rapid response to the change of demand, ensure the stability of the system, and ensure the sustainable and large-scale development of the platform.

The technologies involved in the front-end interface of the system mainly include JSP, HTML, jQuery, etc. through these technologies, the beauty and dynamic effect of the front-end page can be realized to make it conform to the aesthetics of the masses. The main technologies used in the background mainly include Java programming language, MySQL database, JSP and Ajax asynchronous interaction, The image sharing and evaluation system based on Ajax asynchronous mode solves the waste of human, material and time and the limitation of communication depth brought by traditional management methods, which makes the communication process faster, accurate and convenient. At the same time, it completes the basic functions of the image sharing and evaluation system: home page Site management (rotating pictures, bulletin boards) user management (administrators, ordinary users) content management (user communication, forum classification, website information, information classification) more management (picture classification, popular pictures, picture purchase) system management.

Keywords: picture sharing; Integral structure; Java programming language; Mysql database

目  录

第1章 绪论

1.1 研究背景与意义

1.2 开发现状

1.3 论文组成结构

第2章 开发工具及相关技术介绍

2.1 开发技术

2.2 MySQL描述

2.3 B/S结构

2.4 Java描述

2.5 SSM架构

第3章 系统分析 6

3.1 可行性分析 6

3.1.1 技术可行性 6

3.1.2 经济可行性 6

3.1.3 操作可行性 7

3.2 需求分析 7

3.3 系统数据流程分析 9

第4章 系统设计 11

4.1 系统架构设计 11

4.2 系统功能结构 12

4.3 功能模块设计 12

4.4 数据库设计

4.4.1 概念模型设计

4.4.2 逻辑结构设计

第5章 系统实现 18

5.1 登录模块的实现 18

5.2 用户子系统模块的实现 19

5.3 管理员子系统模块的实现 25

第6章 系统测试 30

6.1 测试目的 30

6.2 测试用例 30

6.2.1 登录测试 30

6.2.2 注册测试 30

6.2.3 图片资讯管理测试 30

6.2.4 图片管理测试 31

6.3 测试结果 31

第7章 总结与展望 32

参考文献 33

致谢

1. 绪论
   1. 研究背景与意义

在互联网的“大统一”时代，各类信息的爆炸式增长,造成了人类文字信息的繁杂，冗长，图片作为内容和应用在互联网和移动互联网上也越来越重要，同时在图片的浏览分享过程中人们对社交体验的要求也越来越高，并不只满足于对图片的纯欣赏。然而传统图片分享社交功能技术是不够完善的。

传统的图片收藏功能不够完善，不便于用户查找。传统浏览模式，往往用户在PC的图片收藏夹中存储了大量图片,找图时需要慢慢搜索,同时图片上传的时间也过慢。.而如今，社交网络的兴起,让我们的文字和言论的分享更加自由,在图片收藏分享这个细分领域,国内的许多图片收集网站都会选择以带原始网页链接的方式来链接到图片原始的网页，用此方式来减轻图片在收集和存储时的繁琐，让用户浏览体验更快速，流畅，并且也完美解决了版权问题。

传统浏览模式单调，单一，不能满足用户的需求，这便催生了如今的“视觉兴趣+瀑布流布局”，这种基于图片分享的社交途径模式所特有的强大的视觉冲击力能够很好的吸引用户，让用户体验得到了很好的提升。

1. 1. 开发现状

1.国外研究现状

欧美发达国家以计算机通信技术和信息网络技术作为图片社交网站的依托的网络技术远远高于中国。因此，与此相关的核心技术是决定网络建设规模、效率和建设水平的基本因素。然而，就目前中国而言，其网络文化赖以生存和发展的关键技术仍然落后于欧洲和美国的发达国家，甚至受到其控制。这给中国网络文化建设的顺利实施带来了

巨大的隐患。首先，从全球互联网根服务器建设来看，中国处于劣势，在互联网的命运中起着决定性的作用的有十三台服务器。美国有10台，英国、瑞典和日本各有1台。

显然，西方发达国家已经掌握了中国互联网技术的发展命脉。此外，在中国网络运营中发挥核心作用的相关组件（包括硬件和软件），其中大部分仍然是国外企业，如各种互联网终端的CPU、操作系统等。最后，以美国为首的西方发达国家作为互联网的创始国，凭借着拥有互联网关键核心技术的优势，始终控制并引领着互联网的运行和发展，是网络技术进步的主导者，如新一代因特网、移动IP技术、物联网等新技术。

1. 国内研究现状

   中国图片社交网站的独特之处。中国与美国最大的差别在于用户和文化。Instagram的用户非常高端，他们热爱拍照，或者本人就是专业的摄影师，对图片质量要求很高。而国内则大不相同，中国用户不会对图片构图和审美的要求这么高。例如美图秀秀的主力用户群还仅仅是美化自拍的小女生。所以,我们有理由相信,国内的类似于Instagram的产品还未进入最佳的时期。中国人最爱的题材是自拍和食品，而美国则是家庭、宠物和风景。细心观察Instagram的照片就可以发现，美国用户照片的取景和题材非常文艺化。业内人士认为，Instagram不符合中国人的习惯，中外用户对照片的理解不一样，文化不同，因此在中国会诞生出更具有中国特色和更符合大众需求的图片分享社交网站。

1. 1. 论文组成结构

根据市场调研得到的信息数据，结合国内外前沿研究，利用相关系统开发和设计方法，最终设计出图片分享及评价系统。

本文共有七章，如下所示。

第一章概述了图片分享及评价系统的研究目的和意义；精炼地总结了国内外在仓储领域的研究情况和未来的研究趋势，最后给出了论文的组成结构。

第二章简要概述了本文所用的开发技术和工具。

第三章简要对系统各业务流程进行需求分析、可行性分析。

第四章对图片分享及评价系统进行设计。

第五章对图片分享及评价系统进行实现，并贴出相关页面截图，语言描述出具体功能实现的操作方法。

第六章对图片分享及评价系统采用测试用例的方式来对一些主要功能模块测试，最后得出测试结果。

第七章总结全文并对未来的研究做出展望。

1. 开发工具及相关技术介绍
   1. 开发技术

本系统前端部分基于MVVM模式进行开发，采用B/S模式，后端部分基于Java的ssm框架进行开发。

前端部分：前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router和Vuex实现动态路由和全局状态管理,Ajax实现前后端通信，Element UI组件库使页面快速成型，项目前端通过栅格布局实现响应式，可适应PC端、平板端、手机端等不同屏幕大小尺寸的完美布局展示。

后端部分：采用ssm作为开发框架，同时集成MyBatis、Redis等相关技术。

软件开发环境及开发工具：

操作系统：Windows 10、Windows 7、Windows 8

开发语言：Java

使用框架：ssm

前端技术：JavaScript、VUE.js（2.X）、css3

开发工具：IDEA（2020版）/MyEclipse（10）/Eclipse、Visual Studio Code

数据库：MySQL 5.7.26（版本号）

数据库管理工具：phpstudy/Navicat

JDK版本：Java sdk8

Maven:apache-maven 3.8.3-bin

Tomcat:apache-tomcat-7.0.88

1. 1. MySQL描述

现在MySQL数据库在网络上它可以支撑许多个用户，而且也可以适应客服机和服务器的部署或者配置等，我们这里的服务器和客户机其实就是一种软件上的概念，并且我们使用的计算机硬件也与他们不存在一一对应的关系[3]。

MySQL是一款非常流行的关系型数据库管理系统，它的出现一直都是佼佼者，它不仅功能非常强大，而且使用起来非常方便，并且MySQL的跨平台能力也很好，软件开发人员非常喜欢它的这些强大的优点。不同于其他关系型数据库，对于数据库的管理它有着自己的一套方案，通过对用户设定相应的权限和角色来达到对数据库的管理。由此可见，MySQL是一个能够适用于吞吐量高，可靠性高，效率高的一款数据库管理软件[4]。

优点一：MySQL中对于不同身份的用户都设定其不同的权限来完成不同的业务逻辑，这使得MySQL在安全和完整性远远超出了其他关系型数据库。

优点二：对于那些动画、图形和声音的数据类型MySQL也可以支持，这说明多数据类型MySQL也是可以支持的。

优点三：MySQL还可以做到多个平台的开发，软件开发的多种编程语言都可以实现对MySQL数据库的操作[5] [6]。

1. 1. B/S结构

B/S（浏览器/服务器）结构是目前主流的网络化的结构模式，它能够把系统核心功能集中在服务器上面，可以帮助系统开发人员简化操作，便于维护和使用。只需要用户在用户端安装360浏览器、谷歌浏览器、QQ浏览器等当前大众浏览器，在电脑里面安装sqlserver、mysql数据库等数据库。安装好的浏览器与服务器端的数据库进行信息数据的交互。很多专门软件能够做到的事情，采用B/S结构模式也能实现，它能够结合Web浏览器技术，ActiveX技术以及多种脚本语言等技术。帮助程序开发者节约了不少开发成本。目前B/S结构成为程序开发主流结构，它最好的地方就是没有地点限制还不用专门安装软件，笔记本或者电脑能够上网就能访问系统。系统使用B/S进行开发在后期系统维护上面就会很省事，不用什么问题都在服务器上面操作，简单的用户端处理就解决部分问题，开发出来的程序跟用户交互性上面也会增强，还可以实时刷新浏览器进行程序局部的数据信息更新。

 

1. 1. Java描述

Java是一种平台性计算机语言技术，主要包括两部分：JAVA虚拟机（Java Virtual Machine，JVM）和JAVA API(Application Program Interface，应用接口编程) [11]。

个人对两种语言深入理解：C语言更多的是创造工具，而Java更多的是使用工具。我们知道Java很多的底层实现其实是通过C语言来实现的，所以更能看出这一点。在使用Java的过程中，我们需要会使用API文档，可以将其看做是Java的使用说明。Java面向对象的特性，使其有很多封装好的对象，在使用时，我们只要知道对象的行为（也是对象封装的方法），在这里要注意方法是静态方法还是常规方法，因为调用时，差距很大。未来肯定会有比Java更加人性化，更加容易开发的编程语言，但是肯定不可能完全迥异于Java语言，俗话说“他山之石，可以攻玉”，学好Java也可以方便我们更好的学习其它语言[12]。

1. 1. SSM架构

SpringMVC属于MVC架构，它将JavaEE当做前提，借助JSP及Servlet技术达成。且其渐趋呈现的良好性能，获得研发者的青睐及重视，其运用相当简易，且回应迅速灵敏。因为其把JSP、message resource、Servlet还有自界定标签加以有机结合起来，让编程者用不着再编制代码就能够达到MVC形式，提升了编写程序实效[11]。

Spring却属于JavaEE框架里相当强大的某一架构。它既对监管项目主体措施加以规范化整体化，且借助其本身的设计指引编程者侧重编订接口流程，而并非对类加以编程。其运用的核心是靠着JavaBean里的Inversion of Control容器。它供应了元件框架层的整体预案，且它达到对信息拜访的唯一抽象，供应了合理的JDBC架构，这一形式有效地缩减了出现失误的概率，提升了实效。另外其还交融了Hibernate等许多信息访问框架[12]。

Mybatis属于某一放开源代码的主体关系映射架构，其达到了基于JDBC的超轻量级封装目的，如此能够便于程序员依照本身的想法借助针对主体的措施对资料库加以运作。它能够跟任一JDBC融合，另外能够在用户端运用，也能够在Web端运用，它可以实现信息的长久化。

1. 系统分析
   1. 可行性分析

在软件开发的过程中系统的可行性分析是必不可少的，可行性的研究就是评估问题是否能得到解决并且是要以最少的时间和最少的代价来解决。为实现上面的目标还要必须考虑到解决这些问题的方法的优点和缺点，还要考虑到实现了这些系统规模的开发带来的经济效益。这里可以用技术的可行性，操作的可行性，经济的可行性对我们的系统进行可行性的研究。图片分享及评价系统的可行性分析如下所示：

1. 1. 1. 技术可行性

该系统主要使用JAVA、MyEclipse和MySQL数据库进行开发，Java易于学习和使用灵活。在校期间也接触过MyEclipes和MySQL数据库的课程，对此有一定的开发经验，因此开发难度不高，所以从技术上来说是可行的。

本系统采用Java、MySQL来支持事务和数据逻辑用H5来做前台页面的显示。

HTML网页中的不同组成成分是采用分类的形式来进行标识的。以下是HTML的基本的组成布局：

 

图3-1 HTML基本构成图

1. 1. 1. 经济可行性

图片分享及评价系统是在Java和MySQL的环境中运行的，而系统的成本也只是主要分布在软件的开发和维护上。但如果系统上线投入使用之后，不仅可以方便人们，还节省了用户的时间和精力，而且还极大限度的方便了运营者，减少了运营者的工作强度。图片分享及评价系统其实也不太复杂，在开发的时候经济支出也不大，在开发系统时时间用的也不多，从时间的优势和对经济利益方面产生的好处远超过维护和管理的成本，所以开发此系统是可行合适的。

1. 1. 1. 操作可行性

本系统是基于浏览器和服务器的图片分享及评价系统，系统开发完成之后用户只需要在浏览器中输入正确的URL地址即可进行访问。本系统的前台页面简单明了，在没有操作指导的情况下也可以进行操作，无论是系统管理员还是普通用户在页面中所有的操作都是在浏览器中完成的，因此只要电脑在有网络的情况下，打开浏览器都能操作。而且在使用之前也不用进行相关的环境配置，因此本系统方便、简单、易于使用，所以该系统是容易并且可操作的。

1. 1. 需求分析

根据用户对系统的需求，要求系统简单操作，能够准确，完整的对信息进行管理。图片分享及评价系统在对需求做解析后，整个系统主要分为两个部分：管理员和普通用户，每个模块下的分支功能不一样。对功能做出如下说明：

管理员模块：首页、站点管理（轮播图、公告栏）用户管理（管理员、普通用户）内容管理（用户交流、论坛分类、网站资讯、资讯分类）更多管理（图片分类、热门图片、图片购买）。

用户模块：首页、用户交流、公告栏、网站资讯、热门图片、订单原图、图片购买个人中心、后台管理。

用户用例图如下所示。

 

图3-1 用户用例图

管理员用例图如下所示。

 

图3-2 管理员用例图

根据用例图，对一些重要的用例进行描述。

注册用例描述如下表所示。

表3-1 注册用例描述

用例名称	注册
参与者	用户
描述	用户填写相关注册数据完成注册成为系统的用户
前置条件	无
后置条件	用户填写相关注册数据并且要注册的账号不存在与系统中
事件流	用户点击注册按钮 用户填写相关注册数据 用户确认并提交注册数据 系统提示注册成功
补充说明	系统检测用户所输注册数据如不符合要求则提示并返回注册界面 系统检测用户所输账号不可用或已存在与系统中则提示并返回注册界面

登录用例描述如下表所示。

表3-1 登录用例描述

用例名称	登录
参与者	用户
描述	用户填写用户名和密码登录系统
前置条件	用户拥有账号和密码
后置条件	用户名和密码都正确
事件流	（1）用户在登录页面输入用户名和密码 （2）系统检测用户输入的用户名和密码是否正确 （3）用户名和密码正确的话，显示登录成功并返回主页面
补充说明	（a）系统检查除密码不正确，返回登录页面

个人信息管理用例描述如下表所示。

表3-1 个人信息管理用例描述

用例名称	管理和修改个人信息
参与者	用户
描述	用户查看、修改个人信息
前置条件	用户已登录到系统中
后置条件	无
事件流	（1）用户查看个人信息 （2）用户修改个人信息
补充说明	（a）用户可修改密码 （b）用户可修改个人资料，例如姓名，头像等

1. 1. 系统数据流程分析

与强调控制逻辑的程序流程图不同，它更关心的是整个系统中数据的具体流动以及数据的加工处理的整个客观过程，是对数据规格的说明。也正因如此，系统数据流图作为系统结构化分析方法中极为重要的一种描述工具备受青睐。

图片分享及评价系统的顶层数据流如下图所示。

 

图3-4系统顶层数据流图

系统顶层数据流：外部实体为用户，第一个流程为登录验证，用户信息表返回密码验证，是否正确，正确则登录系统，错误则反馈信息，登录系统后，根据不同用户的功能选择，来读写数据库。

系统底层数据流如下图所示。

 

图3-5系统底层数据流图

系统底层数据流：外部实体为管理员和普通用户，数据流分别有管理员和普通用户流向系统数据流程，数据表提供数据支持，来完成逻辑操作。

1. 系统设计
   1. 系统架构设计

由于本系统在逻辑事务处理方面对数据库的操作比较频繁所以系统在底层连接数据库时并没有使用原生的JDBC，而是把JDBC进行了封装，封装之后相当于一个连接数据库的工具DBUTIL，这样使用起来会更加方便而且这样进行封装还可以降低系统中代码的冗余，当我们需要连接和使用数据库时只需要调用这个工具里面的一个方法就可以了。而且通过封装可以把对数据库的操作独立起来，当需要连接不同种类的数据库时只需要加以修改就可以达到目的。

DAO层本来并无这个类，它只是java中MVC构造里的一个model概念，主要就是里面的一些方法，而这些方法就是用来访问数据库的方法。我们在软件开发时DAO层我们一般都放接口和接口的实现类，用于来规范实现类的我们叫它接口，实现类重点用于对数据库的操纵。

MVC是一种系统研发的关键模型，M是Model模型，它是系统内部关键程序运行的核心，主要进行对数据库的各种操作。视图View是V也叫做视图，主要的作用是对一些数据进行显示。控制器Controller 是C执行从View的视图层来读取数据，然后控制用户的输入。

系统架构如下图所示。

 

图4-1系统架构图

1. 1. 系统功能结构

进入系统后首先要进行登录，验证你的身份，赋予你不同的权限。当你成功登录后，页面会有多个板块，分别是首页、个人中心（修改密码、个人中心）用户管理、歌手信息管理、图片分类管理、热门图片管理、用户分享管理、反馈信息、系统管理。里面界面简单易懂，根据标示可以直接进行方便快捷的操作。

系统功能结构图如下所示。

 

图4-2系统功能结构图

1. 1. 功能模块设计

管理员账户的基本信息管理。主要提供管理员账户的基本信息录入、删除、维护和查询等功能，包括：

管理员录入管理员账户基本信息；

管理员更新、增加及删除管理员账户基本信息；

用户根据管理员账户 ID 查询基本信息；

系统管理员更改个人密码；

评论的基本信息管理。主要提供评论的基本信息录入、修改和查询功能，包括：

用户录入评论基本信息；

管理员更新、增加及删除评论基本信息；

管理员更新、增加及删除评论基本信息；

管理员根据评论 ID 查询评论基本信息；

图片的基本信息管理。主要提供图片的基本信息录入、删除、维护和查询功能， 包括：

管理员录入图片信息；

管理员更新、增加图片基本信息；

管理员根据图片 ID 查询图片基本信息；

用户根据个人信息导航栏查询图片信息；

用户分享的基本信息管理。主要提供用户分享的基本信息录入、删除、维护和查询功能， 包括：

管理员录入用户分享信息；

管理员更新、增加用户分享基本信息；

管理员根据用户分享ID 查询用户分享基本信息；

用户根据个人信息导航栏查询用户分享信息；

图片资讯的基本信息管理。主要是提供图片资讯的基本信息录入、删除、维护和查询功能，包括：

管理员录入图片资讯基本信息；

管理员更新、增加及删除图片资讯基本信息；

管理员根据图片资讯 ID 查询基本信息；

1. 1. 数据库设计

一个好的系统它的后台数据库一定要考虑的全面，这和我们建造房子一个概念，房子不是随心所欲建起来的，一切都是在合理设计的基础是实现的，地基打牢固了房子才能建的更高。数据库如果设计的很合理，而且每个方面都能考虑到了那么这个系统才能不会出现大的问题。

1. 1. 1. 概念模型设计

本系统在数据库中存放了多张表，分别是用户表、评论表、图片表、用户分享表。

系统的主要实体间关系E-R图如下图所示。

 

图4-7系统E-R图

从前面可以分析到数据库中最重要的是图片信息，用户信息，资讯信息，同时存在评论信息。分析可以得到如下数据描述：

平台用户：用于记录用户的各种信息，包括用户名、密码、姓名、性别、地址、邮箱、联系方式等数据项。

管理员：记录管理员的登录信息。包括用户名，密码，权限等数据项。

热门图片：存储各种热门图片信息。包括歌名、标签、图片、歌手、作曲、作词、发行日期等数据项。

资讯数据：存储平台内的资讯数据内容。包括标题，资讯数据内容，时间等数据项。

1. 1. 1. 逻辑结构设计

此环节把概念转变成数据。由于整个数据库所处理的信息过多，就只展示几个表。

notice
字段名称	类型	长度	不是null	主键	字段说明
notice_id	mediumint	8	否	主键	公告id
title	varchar	125	否		标题
content	longtext	0	是		正文
create_time	timestamp	0	否		创建时间
update_time	timestamp	0	否		更新时间
ordinary_users
字段名称	类型	长度	不是null	主键	字段说明
ordinary_users_id	int	11	否	主键	普通用户ID
full_name	varchar	64	是		姓名
gender	varchar	64	是		性别
examine_state	varchar	16	否		审核状态
recommend	int	11	否		智能推荐
user_id	int	11	否		用户ID
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
original_order_drawing
字段名称	类型	长度	不是null	主键	字段说明
original_order_drawing_id	int	11	否	主键	订单原图ID
picture_number	varchar	64	是		图片编号
picture_name	varchar	64	是		图片名称
classification	varchar	64	是		分类
purchaser	int	11	是		购买人
original_drawing_file	varchar	255	是		原图文件
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
picture_classification
字段名称	类型	长度	不是null	主键	字段说明
picture_classification_id	int	11	否	主键	图片分类ID
classification_name	varchar	64	是		分类名称
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
picture_purchase
字段名称	类型	长度	不是null	主键	字段说明
picture_purchase_id	int	11	否	主键	图片购买ID
picture_number	varchar	64	是		图片编号
picture_price	varchar	64	是		图片标价
classification	varchar	64	是		分类
picture_name	varchar	64	是		图片名称
purchaser	int	11	是		购买人
pay_state	varchar	16	否		支付状态
pay_type	varchar	16	是		支付类型 微信、支付宝、网银
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
popular_pictures
字段名称	类型	长度	不是null	主键	字段说明
popular_pictures_id	int	11	否	主键	热门图片ID
picture_number	varchar	64	是		图片编号
picture_name	varchar	64	是		图片名称
classification	varchar	64	是		分类
picture_price	int	11	是		图片标价
display_diagram	varchar	255	是		展示图
picture_description	text	0	是		图片描述
hits	int	11	否		点击数
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间

1. 系统实现
   1. 登录模块的实现

该登录模块利用js进行设计，JavaScript函数CheckSubmit()对输入框是否为空进行验证，使用js的技术结合MySQL 2012数据库的查询语句进行登录信息的验证。首先从文本框中分别获得账号user_name和密码user_pw，使用Sql语句“select * from t_user where user_name=‘”+user_name+“’ and user_pw=‘”+user_pw+“’”将查询结果赋给rs结果集，若rs.next()返回值为空，表示数据库找不到该用户数据，若rs.next()返回值不为空，则显示登录成功，进入主界面。

用户登录流程图如下所示。

 

图5-1用户登录流程

用户登录流程：用户只有输入正确的用户名和密码才会成功进入系统，用户输入用户名密码后点击登录按钮，系统会进行校验该用户名是否存在，如果用户名与密码不匹配或者用户名不存在，则返回主界面。

系统登录界面如下图所示。

 

图5-2系统登录界面

1. 1. 用户子系统模块的实现
      1. 用户首页模块

在浏览器的地址栏里输入http://localhost:8080/index.jsp 地址，就可以跳转到图片分享及评价系统的首页，首页是由4个页面组成的，包括top、left、down和center等页面，这里也是浏览者访问系统的入口，通过@ include引入。

首页载入流程图如下所示。

 

图5-3首页载入流程

首页载入流程：系统先连接数据库，显示界面参数初始化，读取数据库的数据表，读取html显示模板，对数据按添加时间排序，按照模板设计位置显示数据，刷新显示界面，断开数据库连接。

首页如下图所示。

 

图5-4首页界面

1. 1. 1. 用户注册模块

系统的用户通过自行注册生成，在系统首页点击用户注册菜单，系统跳转到对应的注册页面。点击重置按钮，清空所填数据，点击注册按钮完成注册。

用户注册流程图如下所示。

 

图5-5用户注册流程

注册个人信息实现流程为：填写个人信息，系统使用JQuery选择器获取在网页中输入的注册信息，再对联系方式、登录密码等信息进行验证，验证通过后用Ajax异步请求方式向服务器发送请求并把数据传送到后台，然后验证用户名是否已存在，如果已存在则注册失败提示“用户名已存在”；如果用户表中没有该用户名则把用户信息加入数据库，把操作状态以json字符串方式返回到前台。Ajax请求成功接收到返回的数据时会触发成功回调函数，然后解析返回的json字符串，系统根据返回信息弹出提示框，注册成功后返回登录页。

用户注册界面如下图所示。

 

图5-6用户注册界面

1. 1. 1. 用户资料修改模块

用户登录/注册成功之后可以修改自己的基本信息。修改页面的表单中每一个input的name值都要与实体类中的参数相匹配，在用户点击修改页面的时候，如果改后用户名与数据库里面重复了，页面会提示该用户名已经存在了，否则通过Id来查询用户，并将用户的信息修改为表单提交的数据。

1. 1. 1. 资讯数据管理模块

如果资讯数据的信息需要修改，管理员可以通过查询资讯数据的基本信息来查询资讯数据，查询资讯数据是通过ajax技术来进行查询的，需要传递资讯数据的标题、编号等参数然后在返回到该页面中,可以选中要修改或删除的那条信息，如果选中了超过一条数据，页面会挑一个窗口提醒只能选择一条数，如果没有选中数据会挑一个窗口题型必须选择一条数据。当选择确认修改的时候，后台会根据传过来的id到数据库查询，并将结果返回到修改页面中，可以在修改页面中修改刚刚选中的信息当点击确认的时候from表单会将修改的数据提交到后台并保存到数据库中，就是说如果提交的数据数据库中存在就修改，否则就保存。

资讯数据展示界面如下图所示。

 

图5-5资讯数据展示界面

资讯数据管理界面如下图所示。

 

图5-6资讯数据管理界面

1. 1. 1. 评论模块

用户给图片添加评论，包括评分，评论人，评论内容等，在pinglunadd.jsp实现评论的逻辑添加，管理员管理系统的所有评论信息，在pinglun_list.jsp实现评论的管理。

评论流程图如下所示。

 

图5-7信息评论流程

用户登录成功后，浏览图片页面，输入评论语，添加该评论，修改评论，返回评论相关界面。

评论添加界面如下图所示。

 

图5-8评论添加界面

1. 1. 1. 热门图片模块

管理员管理热门图片，用户点击想要购买的热门图片进入购买界面，热门图片购买流程图如下图所示。

 

图5-9热门图片流程图

热门图片界面如下图所示。

 

图5-10热门图片界面

1. 1. 管理员子系统模块的实现
      1. 管理员主页模块

经过用户登录后，页面跳转至首页，main.jsp，首页是由2个页面组成的，包括top、left和center等页面，通过@ include引入，系统首页主要介绍系统的基本信息，包括当前用户、当前日期、当前访问浏览器的版本、服务器的端口数、当前用户的权限、当前电脑的ip、当前电脑的操作系统名称、本系统的开发日期、系统作者、指导教师、开发日期等。其中left部分是系统菜单，本系统菜单包括1级菜单和2级菜单，使用jquery实现1级菜单展开为2级菜单。

主界面如下图所示。

 

图5-11主界面

1. 1. 1. 系统用户管理模块

管理员对系统用户的管理，在yhzhgl.jsp实现管理员用户的管理，包括录入、删除、修改，修改密码通过SESSION获取用户名，然后输入新密码，提交到mod.jsp中，使用sql命令更新密码。

管理员用户管理的界面如下图所示。

 

图5-12管理员用户管理界面

1. 1. 1. 热门图片管理模块

管理员在yinyuedaquan_add.jsp发布图片，跳转至图片添加表单，提交图片信息，图片编号、图片标价、展示图、图片描述、等，图片提交后，数据库的图片信息表刷新数据，系统将图片信息展示出来。

热门图片管理的流程如所示。

 

图5-13热门图片管理流程

热门图片添加的界面如所示。

 

图5-14热门图片添加界面

1. 1. 1. 图片购买管理模块

图片购买管理包括图片信息，图片编号、图片标价、购买人支付状态、支付类型等信息。

图片购买管理的流程如所示。

 

图5-15图片购买管理流程

图片购买管理的界面如图所示。

 

图5-16图片购买界面

1. 系统测试
   1. 测试目的

在这个产品被投入使用前，首先需要进行试用，这是重要的环节。考虑到某个部分的开发没有缺陷情况下，把各种模块拼接，也有一定概率就存在矛盾。这就好比每个人都很独特，但聚在一起就显得杂乱无章，需要保证有默契的配合。对于测试，要看它的各项内容是否契合的原则。若与最初定下的标准有一定程度上的出入，那么就需要做出一些调整，让最终的大方向朝着目标前进。

1. 1. 测试用例
      1. 登录测试 

登录测试用例如下表所示。

表6-1登录测试用例

输入		输出
用户名	密码
空	空	用户名和密码不能为空
Kkk	aaa	用户名长度不允许，请重新输入！
2109402315	123456	用户名出错，请重新输入！
sssss	123456	用户名出错，请重新输入！

1. 1. 1. 注册测试 

注册测试用例如下表所示。

表6-2注册测试用例

输入				输出
用户名	密码	确认密码	邮箱
空	空	空	空	用户名和密码不能为空
Kkk	aaa	aaa	23@qq.com	注册成功
210	aaa	abc	23@qq.com	注册失败，两次密码不一致
sssss	aaa	aaa		注册成功

1. 1. 1. 图片资讯管理测试 

图片资讯测试用例如下表所示。

表6-4添加图片资讯测试用例

输入				输出
标题	类别	内容	备注
空	空	空	空	添加失败
图片资讯1	A	1		添加成功
空	A	1		添加失败，标题不能为空
图片资讯2	空	1		添加失败，请选择类别

1. 1. 1. 图片管理测试 

图片测试用例如下表所示。

表6-4添加图片测试用例

输入				输出
歌名	分类	发行年份	备注
空	空	空	空	添加失败
图片1	A	2015		添加成功
空	A	2015		添加失败，名称不能为空
图片2	空	2015		添加失败，请选择分类

1. 1. 测试结果

经过测试，得到测试结果如下表所示。

表6-6测试结果

序号	测试项目	内容和目的	测试结果
	用户登录	输入正确用户名与密码	可以登录
		输入错误用户名与密码	提示错误的信息
	图片管理 （添加，修改，删除）	输入正确信息	成功完成
		输入错误信息	操作失败
	修改登录密码	修改新的密码	成功完成
	资讯管理 （添加，修改，删除）	输入正确信息	成功完成
		输入错误信息	操作失败
	评论管理 （添加，修改，删除）	输入正确信息	成功完成
		输入错误信息	操作失败
	留言管理 （添加，修改，删除）	输入正确信息	成功完成
		输入错误信息	操作失败
	热门图片管理 （添加，修改，删除）	输入正确信息	成功完成
		输入错误信息	操作失败

1. 总结与展望

本次毕业论文的主要是利用Java+MySQL开发一个安全可靠，操作简易，同时具备业务可扩展的图片分享及评价系统。本文详细的论述了图片分享及评价系统的设计和开发，本系统的所有事务逻辑都是按照系统的需求分析进行设计的，系统有普通用户和系统管理员两种角色，本系统多处采用了AJAX的异步交互技术，同时它也叫异步交互技术，利用它我们可以让网页的局部进行数据刷新操作，AJAX和传统的数据更新技术大大增加了客户的体验程度，由于是对局部进行操作那么就减少了一些繁琐而又不必要的操作，减轻了服务器对页面解析的负担。

与其他系统相比，本系统有自身的优点，

例如：

（1）创新性强；

（2）业务逻辑性强，安全性高，在一些重要的功能模块需要通过审查之后才可使用；

（3）移植性高，在所有window平台都可使用。

当然也还有很多需要进一步改进的地方：

（1）系统大多数页面都是全局刷新，缺乏局部刷新，这将增加服务器的压力，如果有大量用户在同一时间段操作同一个功能模块，可能会导致查询缓慢；

（2）页面没有经过专业的UI设计，美观程度不及其他市场其他网站系统，有待改善。

参考文献

[1]徐飞龙.JSP的网络数据库连接技术探讨[J].时代汽车,2021(23):36-37.

[2]巩思越,张英韬,王宝会.基于CNN的JSP类型Webshell检测[J].新型工业化,2021,11(10):97-100.DOI:10.19335/j.cnki.2095-6649.2021.10.020.

[3]王江霖,黄彩霞,樊旭龙.基于SSM框架的网络资源共享平台的研究与实现[J].电脑知识与技术,2021,17(28):76-78.DOI:10.14004/j.cnki.ckt.2021.2999.

[4]张彦芳,靳继红.基于JSP的网上书店系统设计[J].信息技术与信息化,2021(08):110-112.

[5]周永政,刘莎莎,姜红花.基于SSM框架的监考安排管理系统设计与实现[J].电脑知识与技术,2021,17(20):59-60+66.DOI:10.14004/j.cnki.ckt.2021.1969.

[6]冯丽露,康耀龙,高晓晶,王涛.基于SSM框架的数据结构在线评测系统设计与实现[J].中国信息技术教育,2021(13):86-89.

[7]Jun Ma, Jun Mao, Long Chen , Lili Yin. Design and Implementation of Multi-terminal Debugging System based on SSM Framework[J]. International Core Journal of Engineering,2021,7(7):

[8]丁佩佩.基于JSP/Servlet技术的电商平台开发技术研究[J].科技视界,2021(18):99-100.DOI:10.19694/j.cnki.issn2095-2457.2021.18.38.

[9]周江,陈丽.《JSP动态网页设计》课程思政改革与实践[J].广东交通职业技术学院学报,2021,20(02):80-83.

[10]孙英,刘忠利,杨海苑.基于JSP的网络信息流量实时监控系统设计[J].信息与电脑(理论版),2021,33(08):202-204.

[11]单玉刚,杨凡.培养学生求异思维的JSP课程教学改革[J].教育教学论坛,2021(16):57-60.

[12]Xiaojie Guo,Tingmei Wang*. Design and Implementation of Graduate Information Management System Based on SSM Framework[J]. Journal of Simulation,2020,8(2):

[13]徐一菁. 在线图片的商业模式及竞争策略研究[D].东南大学,2020.

[14]朱宁. 在线图片平台用户参与行为特征研究[D].南京大学,2020.DOI:10.27235/d.cnki.gnjiu.2020.000393.

[15] Design and Implementation of ERP System Based on SSM Framework[J]. ,2020,440(5):

[16]白爱. 在线图片管理系统设计与实现[D].华中科技大学,2019.DOI:10.27157/d.cnki.ghzku.2019.003843.

[17]王佳玫. 在线图片社区用户参与动因实证研究[D].广西大学,2019.

[18] 中国在线图片用户洞察报告 2017年[C]//艾瑞咨询系列研究报告（2017年第10期）.,2017:108-139.

[19]高子伦. 在线图片平台社交化研究[D].暨南大学,2017.

[20]林丽颖. 大学生对在线图片的使用与满足研究[D].湖南师范大学,2017.DOI:10.27137/d.cnki.ghusu.2017.000759.