摘要：信息技术越来越发达，网络带给人们的影响也越来越大，给生活也带来了极大的方便和快捷，互联网已经渗透到了生活中的方方面面，不仅在各行各业中都有互联网的身影，就算是在平常的生活中也收到了互联网的影响，互联网在生活中不仅带来了极大的方便，也在一定程度上减轻了工作的压力让很多人可以更加轻松的去解决生活中的麻烦琐事。很多人已经开始习惯于将需要长久保存和使用的材料更多的是放在网络上，而不是存放在u盘或者其他物理存储介质上，在线预览收藏图片系统的设计就是为了迎合想把图片长久使用和保存的需求，给有要求的人提供方便。使用者不仅可以把自己之前存储在u盘上或者是电脑上的某个文件夹下的图片统一整理，而且还可以清晰的看出自己收藏的图片的分类情况，在使用新的管理图片的方式更加轻松了，而且也十分清楚的可以看出自己图片的分类情况。

本系统使用B/S结构模式，使用SpringBoot+Vue+Element-ui的框架组合，数据库的设计使用的是PostgreSQL数据库，前端和后端合作完成页面功能。

关键词：JAVA;SpringBoot;Vue;前后端分离B/S

目录

摘要

Abstract

引    言-1

1  技术介绍-2

1.1  技术介绍-2

1.1.1  SpringBoot-2

1.1.2  日志打印-3

1.1.3  安全管理-3

1.1.4  Mybatis Plus-4

1.1.5  Vue.js-4

1.1.6  Element-ui-4

1.1.7  Git-5

1.2  开发坏境-5

1.2.1  后端开发：IntelliJ IDEA-5

1.2.2  前端开发：Visual Studio-6

1.2.3  数据库：PostgreSQL-6

2  系统分析-7

2.1  系统可行性分析-7

2.2  开发模式分析-7

2.3  需求分析-7

2.4  数据流图-8

3  网站总体设计-9

3.1  系统功能描述-9

3.2  系统界面设计-10

3.3  系统设计目标-10

4  数据库设计-11

4.1  逻辑结构设计-11

4.2  数据库结构设计-13

4.2.1  用户表  t_yl_yh-13

4.2.2  图片表t_yl_tp-14

4.2.3  类型表 t_yl_lx-14

4.2.4  图片类型表 t_yl_tplx-14

5  系统详细设计-15

5.1  用户登录-15

5.2  浏览图片-16

5.3  查看图片分类情况-17

5.3.1  饼图显示-18

5.3.2  柱状图显示-18

5.3.3  柱状图切换视图-19

5.4  分享图片-22

6  系统测试-26

6.1  测试的任务及目标-26

6.2  测试方案-26

结  论-27

致  谢-28

参 考 文 献-29