基于CMS的字体可视化网站的设计与实现

　摘 要

互联网作为实时性强，应用领域广泛的学科和工具，目前已经在全球各生活生产领域得到了重用且在持续高速发展过程中。要说它是学科是因为它蕴含着硬件到软件层面的多方位知识和理论的支撑；说它是工具是因为，它最终展现的形式并不像定理、公理一样会阐述一个客观规律，我们在互联网时代解决了一秒内让信息从地球一端传递到另一端的重任，在接下来的一段时间里，在数字化大背景下我们会步入“互联网+”时代，在这个时代工业互联网、智慧城市、智慧人生、智慧交通之类的一系列解决方案以互联网技术、大数据处理、大数据分析为自己的突出点进一步渗入到各行各业的各角落，我们有机会在工业时代和初步信息时代后正式步入数据时代并享用它带来的各项便利。

互联网它亦是学科更是工具，它的工具性的表现形式就是互联网应用。正因为互联网应用(Web App)应用性极强，又因为过去20年中强大的政策支持下，我国信息产业飞速发展，Web App在办公自动化、协同办公、民生工程领域起到的作用已经是非常突出了。在工业互联网领域更是以不可替代的身份扮演者重要角色。

本课题主研究方向是基于CMS的字体可视化网站的设计与实现并部署到云服务器上能够顺利从外网访问之。从HTML5时代的来临开始，我们在新的h5技术背景下，开发者可以较方便地实现网站在多终端上的被访问的效果。换句话来说，我在本项目中致力于将 Java Web 开发有关的现有知识和PC（电脑终端）+mobile（手机终端）的自适应展示前端作为重点，在系统后端的编程实现方面用Spring框架家族，重点使用Spring Boot集成方案作为核心编码环境，在系统中运用关系型数据库系统，并运用Thumbnailator 第三方处理图片工具实现字体可视化工作，再结合Commons Multipart有关的实现类，尽力打造出一款能够多端访问的、响应速度快的、并发访问承受能力不错的网站应用。及时总结自己在理论和实践相结合方面的不足之处，为自己未来职业规划做实战准备。

关键词：面向对象；WebApp；多端自适应前端；SSM

　1 绪论

目前随着互联网的不断发展，各类新技术新想法层出不穷。其中CMS（内容管理系统）更是信息化建设和的新宠。

　1.1 课题研究背景

互联网是所涉及的基础知识领域较多的学科，在绪论部分中也重点提及过，互联网技术从计算机硬件到软件全方位可以覆盖诸多知识点，在本世纪初我国各企业在接触并普及互联网应用时主要侧重于各类Web软件的开发，而发展到现在，在“互联网+”时代，它已经蓬勃发展到了物联网、无人驾驶、数字医疗、智慧城市等等领域。在“互联网+”时代背景下，我们人类也很可能可以完成史无前例的、规模远大于第一第二次工业革命的生产力和生产结构的大改革并真正意义上实现生产结构供给侧的全面改革。

　1.1.1 在互联网技术背景下的时代演变

在我国，自本世纪初以来，互联网非常完美地和民生工程、政务事业、工业生产、社会治安等领域相结合了，我们甚至成为了老百姓足不出户即刻完成一系列日常操作和生活操作的国家，这方面的优势在2年前的疫情全民居家隔离那段时间内发挥的淋漓尽致，我们能够在全球内成为首个真正意义上扫除肺炎疫情的大国，一方面离不开我党的英明抗议决心和政策，另一方面也离不开互联网为我们带来的便利。

当然在本课题的研究过程中，我们要紧紧围绕任务书指示，首先要搞清楚，我们要做的是基于CMS的字体可视化网站系统。现阶段我们可以紧紧围绕任务书几点要求，先实现比较初级的CMS系统功能，如前端展示系统、后台管理系统、字体可视化展示为主的内容管理系统。当然在后期此系统可以逐步扩大作用领域，比如将此系统更通用化，提供一个全新的纯原创CMS系统[1-3]。

　1.1.2Web应用

早期的 Web 应用主要指的就是对于动态网站页面的浏览,这些静态网站页面都是使用 HTML 或者 ASP等语言进行编写，放在一个服务器上，用户可以使用一个本地浏览器直接通过 http 协议向服务器进行请求，服务器上的 servlet 应用在接收到一个用户提出的请求后,读取该请求 URL 所需要标识的信息和资源，加上一个消息包头将其发送出来。客户端为浏览器，浏览器解析响应中的 http 报文，向用户提供一个多姿多彩的 HTML 页面。

但是随着互联网的进步和发展,很多线下的业务都开始朝着内容多样、内容更新更加频繁的方向发展，基于 internet 的 Web 技术和应用也逐渐变得越来越复杂，使得用户所需要访问的网站和资源已不仅仅停留在服务器或者软件硬盘上储存和处理的是静态网页，更多的 Web 技术和应用程序都需要根据客户端的请求进行动态地生成网页和资料，复杂的还有可能需要从客户端的数据库中自行提取信息，经过一定的方式进行数据交互，生成一个资源后（一般是以JSON的方式返回给前端展示系统），而后在前端系统里将数据渲染成可视的界面以HTML网页的方式呈现给一个用户。

那么如何才能实现上文所提到的动态网站呢？利用已经可以实现 http 协议的服务器端软件，这些服务器端软件预先给我们保存和设置好了扩展的接口,我们仅仅只需要按一定的规则来向其提供一个相应的扩展功能，当这类 Web 服务器在网络上接受并发送了一个客户端的请求后，判断其中的请求是否还有可能会被访问我们自己提供的扩展功能，如果没有，将其中的请求提供者交由我们自己编写的程序进行去处理，处理执行完成后，程序把处理的结果上传到 Web 服务器软件, Web 服务器软件在客户端拿到结果后，再将其中的结果以及相应的信息渲染到客户端浏览器上[4-10]。

早期我们所看到使用的一个Web网络服务器上的扩展处理机制主要指的是称为CGI它指的可以说是允许一个用户自己直接调用一个Web网络服务器上的一个CGI应用程序，CGI的程序全称为common gateway interface公共联络网关软件接口，大多数的一个CGI应用程序都可能是通过使用一个Perl这个软件接口来直接进行远程编写，也就是说并没有通过一个c、python或者一个PHP的软件进行编写,用户通经由直接单击某个网站链接或者直接在网页浏览器的某个网站顶部地址栏中进行选择直接输入一个URL软件来直接开始访问一个新的CGI应用程序，Web网络服务器在用户接受了这个请求之后,发现这个所有请求都可能是通过提供并发给一个CGI应用程序的，于是就重新开始把它启动并重新开始运行这个新的CGI应用程序，对所有发给用户的这个请求都对它进行了优化处理。CGI请求程序可能会从新的Web请求中读取解析并输出一个新的CGI请求数据，处理这个请求数据，并且程序会自动产生一个请求响应,这个请求响应被自动再次返回来并发送给一个新的Web请求服务器，Web请求伺机服务器可能会将这个请求响应，以http这个响应的文件形式再次返回发送给另一个新的Web请求浏览器。但是在CGI中的编写困难，对于单个用户下发请求的快速响应使其持续时间相对较长，以一个进程式的模式进行运作这也导致了它的性能发展有所受到限制[11]。

目前盛行的Web应用，从架构上来说是多样复杂的，比如有单体应用架构也有微服务架构；有前后端分离的趋势；当然本文在这里所提到的架构更多的是从后端程序的角度出发描述的。后端程序目前更多地表现为独立的产品，因为一个后端程序，我们只要将它的和前端展示系统的数据交互形式规定好，它可以为任何形式的前端展示系统服务，比如Web网站前端、微信或抖音小程序前端、也可能是IOS和安卓应用程序前端。

那么把话说回到单体应用和微服务架构，在Web应用发展的初期更多的网站应用时以单体应用的方式工作，简单通俗地去讲的话单体应用是指一个应用实例对应一个数据库系统，并将所有的功能模块、实体类集中到一个进程实例中去工作。

但随着互联网的普及，很多网站应用单位时间内的访问量徒增，除此之外开发和运营运维团队的工作压力日益增加，为了应对这两个问题，我们就试图把一个系统分解成若干个完全独立但又紧密协同作战的独立系统，比如将系统分成用户服务、订单服务、优惠券服务等等，再通过一些个服务间调用或中间件的方式将它们的工作协调起来。这就是微服务架构的通俗基本含义。这样一来，我们就可以将产品开发方的职能部门重新构建，让一个部门负责一个单独的服务，这样部门之间的沟通成本大大降低除此之外，用这种方式给每一个部门充分的工作自由度和产品化思维的空间。

　1.1.3研究意义

（1）目前虽然说在基于CMS的字体可视化网站的设计上，我们不用过多去考虑高并发访问，因为作为毕业设计课题研究范畴内的网站系统，我们的访问者基本就是在毕业答辩前后的测试访问者和本人，除此之外从需求角度出发的话，在任务书中也没有过多要求高并发条件下的Web技术的运用。另一方面Spring Boot内核自带的Tomcat应用默认可以应对100-150左右的并发访问，这个对于大多数初步网站应用来说是足够的。所以，从实际出发来预测的话网站的并发读操作可能最高也就只有10-30qps ，针对并发写来说，因为在本CMS网站中，所展示的内容都来自于系统管理员，所以数据源的信息来源比较统一，不存在写数据阶段的高并发压力和共享资源的过多安全性问题。

（2）此系统运用了Spring Data提供的JPA作为数据资源的管理器，在编译依赖环境的选择上选用了 Maven，在服务器应用上选用了Tomcat，并把Spring MVC 的精髓运用到了本课题的落地环节中。这也是对于本科生来说是比较新奇的概念[12-15]。

（3）本文即将要正式结束自己在大连民族大学的本科学习时光，在这过程中，在前几年之中任课老师和指导老师的细心栽培之下，已经基本掌握了Web开发有关的基本技术。所以，在本课题的研究过程中本文充分运用了目前国内企业级Web开发流行框架Spring框架家族的Spring Boot集成工具。所以本文认为本系统的开发的同时，总结了利用Spring Boot +MySQL +HTML+CSS+JAVASCRIPT的开发集成，并对Spring Data JPA 的二级缓存等重要功能进行了合理调整来符合系统的需求。

　　1.2 研究现状

作者米拉、德元达、张百战等认为，互联网人才培养存在的问题已经成为当前一个急切而且仍然需要从根本上解决的国之大计。在软件层面上，虽然我国在目前的互联网大环境下催生出了一大批Web应用，但是底层的经典设计模式、关键的粘合剂作用的中间件、底层的数据库引擎、甚至搜索引擎（比如Elastic Search）等方面还是处于比较不完善的或者不完全把核心技术掌握到自己手里的状态。所以我们xx也非常高度重视国际计算机科学技术专业领域和应用软件开发技术领域密切相关的重大教育方针，对于加快培养一批德智体美劳结合全面进步的绿色社会主义核心事业集团建设者和新经济时代优秀接班人这一重大教育根本任务深刻深入实施和贯彻饯行。本课题的研究是积极响应母校大连民族大学的号召，一方面为政务网站的开发有一个更深层次认知的实践过程，另一方面将开发过程中遇到的问题总结下来分享的机会。

　1.3 研究内容

（1）通过已有文献的阅读，结合本课题的主要线索基于CMS的字体可视化网站系统和图形以文件流的形式处理的模块，本文提出了以下几点需研究的内容。

（2）充分发挥好Thumbnailator等实现类在图片处理、缩略图处理等作用域的应用背景。

（3）掌握好Commons Multipart有关的一系列库的运用，将文件流处理的标准流程按照任务书要求体现在本篇论文和具体的毕业设计中。

（4）运用了面向对象的设计方法,结合 UML语言来进行了系统需求的分析与设计这个部分。

（5）在系统的整体设计过程中活跃利用Spring Boot框架集和JPA。

（6）讲Rest API风格的Web API开发风格引入到了本课题的实现过程中。

1.4 论文结构安排

第1章：绪论，主要介绍了课题研究背景以及意义，研究现状，本文的研究内容以及论文的安排等。

第2章：技术介绍。

第3章：系统分析。

第4章：系统的设计。

第5章：系统的实现。

第6章：系统测试。

第7章：总结与展望。

　2 相关理论概述与技术介绍

本系统采用三层分层设计模式作为主要的设计模式，整合 Spring框架家族（主要指Spring Boot）来搭建开发框架。采用 Java面向对象程序设计语言，充分发挥其面向对象开发的思想，利用面向对象的程序设计思想在系统开发方面的优越性完成底层逻辑部分的开发，利用MySQL关系型数据库为数据库系统作为系统的数据源，对系统各数据进行结构化的IO存储，在数据库的引擎方面使用了InnoDB引擎，这种MySQL数据库自带的搜索引擎在写数据方面使用了行级锁，这种天然的优越性就给系统的写数据方面带来了极大的效率方面的提高。利用HTML、JS、CSS、jQuery为开发工具完成系统前端的快速开发[16]。

　2.1 网络平台

系统的开发依赖于网络、系统软件、硬件三个方面。为了开发基于CMS的字体可视化网站系统，首先需要对以上三个方面进行描述。

系统如若离开了网络环境就基本可以说是失去了生命力，它必须介入网络才能实现CMS网站的浏览和后台管理，因为本系统有潜在的成为通用的CMS系统，所以本人认为，系统接入Internet的方式为云服务器接入。大型云服务提供商的云服务器自带自动运维功能，这带来了服务器维护方便的效果。另一方面云服务器对服务器的维护、安全保护、安装软件时带来很大的便利性和安全性[17-19]。

2.2操作系统

目前各类基于Web的系统，都有它们需要运行的操作系统。目前被运用广泛的操作系统是Windows系列操作系统、Unix/Linux系列操作系统。下面主要讲解网站系统用于运行的集中操作系统的。

UNIX操作系统最重要的优点是便于移植，它问世40多年时间以来技术越发成熟、可靠性不断在被提高、可伸缩性变得十分强大、网络功能强大，这也是目前它很火爆的原因。它几乎可以支持目前流行的全部数据库管理系统。除此之外，在安装新的软件这方面，UNIX给客户带来了巨大便利，它让安装一个软件的时间成本甚至缩小到很小的时间单位。

WINDOWS操作系统,因为它具有:操作界面的图形化、多用户多任务、不错的网络支持和众多应用程序的优点已经成为了世界上拥有的用户群体最庞大的操作系统。不得不说,它取得如此大规模的应用面和庞大的用户群,最主要的原因还是它的易用性。

因为本文在大连民族大学的学习过程中基本都在用windows操作系统，一方面，本文还未经历过企业级软件开发的洗礼，Linux等操作系统对于本文来说还是比较遥远。另一方面，考虑到本次课题研究是本文的毕业设计项目，本文要充分考虑系统的设计实现的时间和学习成本，所以本着快速实现毕业设计内容的原则，本文沿用了自己熟悉的windows操作系统来作为服务器一端的操作系统[20]。

　2.3应用服务器

在本项目的开发过程中,本人选用了Tomcat服务器。因为Tomcat免费。由于开发公司Apache和Java开发者Sun公司的合作,Jsp规范在Tomcat中得到了很好的体现。另外一方面,它的性能稳定、配置操作简单易行、关键的是他完全免费。本研究题目要求我们所需要研究的基于CMS的字体可视化网站系统是内容管理系统，且处于初步开发和初步落地实现环节所以该系统的可移动性和,并发式访问数据量目前的预估比较低。所以非常适合使用 tomcat 这样的小型、轻量级应用服务器。正因为以上原因,Tomcat也是开发和调试Java Web项目的最理想的选择。

除此之外，在本文选用的Spring Boot集成工具里头，以starter依赖的方式内置了tomcat服务器，这也降低了开发过程中的环境配置方面的难度和麻烦，这也极大地降低了开发过程的过于复杂的局面。这相当于是后端工程师所得到的福音[21-25]。

　2.4数据库

自上世纪60年代以来,数据库信息技术已经在我国范围内诞生并应用了将近60年。它在计算机收集、处理、存储等方面起到了关键做用。本课题研究的基于CMS的字体可视化网站系统需要在后台管理系统里面用管理员的身份对网站内容数据、字体可视化照片（包括缩略图和大图）数据等需要进行存储，所以数据库是本系统重要组成部分。

在系统的开发过程中，有许多数据库可供本人使用，但是本人在之前的开发案例中习惯使用Oracle旗下的MySQL数据库，所以还是习惯性地选择了MySQL作为第一选择。

MySQL 采用的是一种关系式数据库管理系统，且拥有庞大的社区，自然而然它是开源数据库系统。关系式数据库把所有的数据都保存到不同的列表中，而非把所有的数据都存放到一个较大的仓库内（这也是它和一般非关系型数据库不一样的点），这样就为数据库增加了快捷性和效率，也提高了操作数据的灵活性。

除此之外MySQL所支持的InnoDB存储引擎可以给系统带来性能方面的提升，因为它对数据的写操作支持行级锁，这有别于传统的My ISAM存储引擎，因为在My ISAM存储引擎下只有表级别的锁，这对于性能方面来说是比较不友好的，而InnoDB恰好就可以以粒度更小的锁机制去保障数据库系统对性能的保障。除此之外InnoDB存储引擎可以带来事务处理方面的支持，因为它是天然支持事务的，这也是传统的存储引擎My ISAM没有办法提供的功能[21-31]。

这样一来, MySQL 的数据库既很好地满足了我们在性能和技术方面的要求，也很好地满足了我们对于事务管理等方面的要求，除此之外,因纯开源性质， MySQL 对于像本次研究课题一样的研究性质的项目来说是非常合适的，因为它是免费。除此之外因它拥有非常活跃的研究社区，任何在项目开发的过程中所可能碰到的困难和问题都是可以在其他研究社区中发现解决方案的[25-31]。

　　2.5开发技术和开发工具

系统的开发工具是Spring Tool Suite，选择它作为开发工具的最主要的原因是，因我们是基于Spring Boot集成工具开发本系统的后端各服务，而Spring Tool Suite作为Spring官网所提供的的开发工具，它集成了诸多对Spring家族组件产品的天然支持和集成，让系统开发环节变得非常方便。除此之外还得额外说一下，Spring Tool Suite也是和Eclipse一样完全免费，这也符合本课题的研究性质。

除此之外，额外需要说明的是，本次的课题研究中本文对于开发环境的选用方面有了以下经验：系统开发过程中所用到的开发技术和开发工具，对日后的系统维护运营都会产生影响。在选用开发技术和工具的时候应从预期经济投入状况、开发人员所具备的技术水平、开发人员的使用习惯和偏好、日后维护阶段的资金时间成本等方面综合考虑。

本系统由于只在静态展示页中运用了HTML超文本标记语言，所以静态Web页面的代码量并不十分巨大，所以并没有用frontpage、Dreamweaver等可视化的专门开发工具。也可以穿插使用Spring Tool Suite的编辑窗口内部创建HTML文件，用代码渲染网页的布局。

在Web的前端脚本语言方面，本文选用了JavaScript 。它是Netspace公司的产品，是一种脚本语言，它提供的内部对象十分丰富。它是为了浏览器和用户之间的交互而存在。本系统中前后端之间连接和数据交互是由众多JavaScript和jQuery文件来实现。

该系统在进行底层软件开发的过程中充分运用了 java 编程语言，面向对象的 java 编程语言已经具备了强大的可移植性，另一方面 java 也是典型的针对底层软件程序开发的语言。这有区别于传统的面向过程的编程语言如C，本文为什么如此看中面向对象开发这个概念？一方面这符合本文在大连民族大学所学到的编程思想，另一方面目前在国内的企业级开发领域内面向对象开发也是一种主流。

开发工具方面，本人运用了Spring Tool Suite，它是基于开源的Eclipse进行了改造而得到的。它拥有对源文件的导入到处性强大、对源代码的管理十分自由、支持插件开发等特点。除此之外和项目编译工具maven有非常好的结合性。

在数据库连接技术层面上，由于基于CMS的字体可视化网站系统是基于面向对象的Java语言和MySQL数据库系统开发的，所以运用了JDBC（Java Data Base Connectivity），它为Java应用提供了API接口，JDBC可以直接与数据库连接。

在数据资源的管理方面本文选用了Spring Data JPA，它虽然在使用层面上选用了有别于SQL的数据库操作语言，但是它更便于快速开发和充分体现面向对象开发。

　2.6Spring Data JPA和Spring Web

本系统运用Spring MVC框架，由Spring所提供的Spring Web和Spring MVC两个开源框架整合而成的，是很适合本项目的Web框架集。

Spring可以被比喻为整个project中装配bean的大工厂，它所提供的AOP和依赖注入方案是革命性的，它是项目中的粘合剂，之前在面向对象开发的时候每当需要实例化一个对象的时候都要‘new’来进行实例化对象，但是Spring 可以实现帮程序员自动完成这一切，当然这个过程需要在编成过程中适当的用注解的方式提醒Spring：“每当程序需要此实例化的时候，你要自动帮我实现这一切。”

本人认为它最重要的作用是拦截器的作用，它依赖DispatcherServlet实现这项作用。

JTA是实现了对JDBC的具体封装，从他的工作原理来讲，它基本围绕Hibernate来展开自己的工作。它给我们带来的另外重要便利是，它在有别于 MyBatis 等框架的每一个实体类相应的 mApper 文件中都配置了每一个类对于数据库表进行的 SQL语句映射的繁琐环节，本文基本可以用Repository接口继承JTA所提供的一系列各接口来实现数据资源的管理，这也就表明，虽然在在操作数据库时项目会另外运用其他奇怪的语法用法（有别于SQL语法），但是它极大程度地减少了项目开发初期的mApper编写等一系列个麻烦操作。

　2.7面向对象程序设计方法

程序设计的思想在其发展和演变的过程中主要体现了两种基本的方案,第一种是面向整个过程的应用于程序设计的方法；第二个是面向对象的编译程序设计。面向过程的语言和程序设计方法，本人在此前大连民族大学学习的过程中，学习了 java 语言，java 语言的主要语言和程序设计的方法就是充分体现了面向过程的语言和程序设计，而本文主要是采用面向对象的语言和程序设计的方法。

　3 需求分析

在正式开发之前，我们需要预测在未来开发中可能碰到的问题，同时要评估CMS系统对客户所带来的收益和风险，并且需要计算项目成本。如果不进行这一步，预算不够的话，项目开发到一半时发现资金无法支撑整个项目的开发，这会对仓库造成巨大的损失。因此，本节主要对系统的技术层面、操作层面、已经经济层面进行可行性分析。

　3.1 系统需求分析

如果CMS系统前端展示系统浏览者想要浏览网站，首先并不需要在平台进行注册，任何一位浏览者都可以在在平台中随意浏览，这也是CMS系统的基本特点（它的关键点在于后台管理）可以观看最新发布的内容、字体图片、公告等前端栏目。

　3.1.1业务背景及流程

在后台管理系统层面上，系统管理员在平台中是事先需被分配管理元账号和密码并被允许对网站内容进行写入操作权利的，然后在平台完善自己的个人信息，并可以在系统中进行登录。管理员可以对CMS网站的各板块的内容进行修改、更新、删除、发布。并且这些被管理员所发布的新内容都要在系统前端及时被展示给内部访问者。

　3.1.2系统功能框架

（1）浏览者功能：访问页面、阅览各类CMS系统前端展示系统的内容、访问可视化字体内容、点击进入到某一具体可视化字体信息页。

（2）管理员功能：登录、管理个人信息、查看已存在的内容、更新已存在的内容、发布新内容等。如图3.3和3.4所示。

　　图3.3平台主要功能

　　图3.4 系统功能模块划分

　3.2 系统功能模块需求分析

软件系统的开发，第一步也是最关键的流程就是需求分析，在通用流程框架内，需求分析者会和软件需求方进行沟通写需求文档；而后架构师会用此文档进行用户一侧的故事叙述；而后在技术架构团队的努力下需求，将需求分析文档转变成技术人员的编程指南针–接口文档，故需求分析对于整个软件系统的开发来说是至关重要的。

　3.2.1访问者功能模块

　　图3.5 访问者能模块用例图

（1）无需登录访问

　　图3.6无需登录访问流程图

（2）可视化字体列表访问

　　图3.7 可视化字体列表访问流程图

（3）访问具体字体信息页

　　图3.8 访问字体信息页流程图

（4）访问其他CMS内容模块

　　图3.9 访问其他CMS内容模块流程图

3.2.2管理员功能模块

　　图3.10 管理员模块用例图

（1）登录

　　图3.11 登录流程图

（2）修改个人信息

　　图3.12 修改个人信息流程图

（3）管理员新增内容

　　图3.13 新增内容流程图

　3.3系统性能分析

系统是浏览者获得信息和管理员发布内容的交换的重要场所。需要具备以下性能：

（1）易用性

（2）由于系统是基于Web开发的，所以使用者用系统时无需另外下载任何应用或插件，只要是具备上网功能的计算机或终端，只需通过浏览器进行访问即刻进行对系统前端的访问。所以访问者和管理员可以用PC端或移动端均可使用系统。

（3）安全性

（4）系统是从部署的环境角度来说是部署在云服务器上的，所以一定程度可以避免传统非云服务器环境所带来的风险。从管理员角度来说，系统需要登录后才能运行，所以不必担心系统内部内容有混乱。除此之外在系统部署到服务器进行发布之前可以结合现有的一些云安全解决方案，对于常见的网络攻击进行从防火墙层面上和其他层面上前置预防措施。

（5）在这方面本文推荐阿里云和网易盾所提供的一系列各网络安全解决方案。

（6）稳定性：系统在工作过程中所需的硬件要求不高，对内存的要求可以说是非常小，所以本文认为系统的稳定性高。

　3.4系统性能分析

　　图3.14 数据库分析图

　3.5系统可行性分析

可行性分析一般分为技术可行性分析、经济可行性分析、法律可行性分析等部分，古人云三思而后行，在软件工程领域也是如此，还未开始具体代码编写之前对于项目潜在的成本和风险进行分析总是十分有必要的。

　3.5.1技术的可行性

系统数据库层面所使用的开发工具是MySQL数据库，对于系统逻辑代码的编写部分使用的是Java面向对象程序设计语言，以上这两种技术是我在大连民族大学的学习过程中在老师们的悉心培养之下目前已基本准备的技术选项。在系统的可视化工作方面，本文使用了基于Web开发的手段，前端部分的JS 、HTML、CSS、jQuery等有关的技术技能本文结合在校期间的经验和网上w3cschool上的内容，掌握了其基本原理。在系统的体系建立工作层面在指导老师的指点之下及时矫正了方向，综上，在本系统的开发阶段技术上基本没有问题，可以进行。

　3.5.2经济的可行性

系统不需要收费，是免费向字体爱好者开放。从使用者的角度来说，使用系统，可以帮助访问者及时了解机构公告、可视化字体信息等内容。从开发者的角度来讲，系统目前为止没有耗费本文的任何开发层面上的个人费用，系统开发的语言Java和数据库MySQL是开源项目的；工具Spring Tool、Navicat、服务器Tomcat也都是开源项目，硬件方面只要普通的处理器和内存即可完成开发需求，所以开发者开发本系统使用自己学习用的lenovoY5070系列笔记本就完成了前后端开发工作，所以本项目的经济可行性很强。

但同时也需要我们去做详细说明的一点是，本次课题研究在任务书中已经明确提出了要求，系统只需在公网上才能进行发布并且可以让访问者随时都能够进行访问，所以在这个环节上虽然可能需要系统有一定的成本和支出，但是基于阿里云的技术支持，阿里云服务器拥有一种新型的学生服务器选项，它可以说是一种更加轻量级的服务器，它只要一年50块钱左右的服务器费用，所以在项目的线上部署层面上也基本可以说是经济可行的。

　3.5.3操作的可行性

系统是为公网范围内所有字体爱好者开放的CMS 系统，所以在开发过程中充分考虑系统使用者的利益，为了提高操作可行性，本文采用了基于Web的系统。访问者和系统管理员只要有上网环境，无论是用PC端网页浏览器或者移动端的浏览器都可以使用本系统。所以本文认为，系统地操作可行性高。

　3.5.4法律可行性

系统在开发过程中如上文3.6.1 讲述，在开发环境的使用方面运用了JDK，Tomcat，Spring Tool，MySQL 以上均为开源项目，也就是说本文在使用以上开发环境或工具的时候均不涉及到付费专用版或盗版之类的问题，所以在这层面上基本可以排除以后可能存在的因版权而起的法律纠纷。在操作系统方面本文使用了正版Windows7 ，在可视化数据库操作软件Navicat的使用方面，本文是从官网订阅了他们一个月的使用权。所以本文认为，本系统的法律可行性高。

　4 系统设计

系统设计部分中，通常流程就是用UML语言，用时序图、顺序图、接口关系图、实体类图等图形化表达方式，对系统进行UML建模。

4.1 系统整体设计

　　图4.1 系统内部访问者整体时序图

　　图4.2 系统管理员整体时序图

　4.2 系统详细设计

　　4.2.1访问者功能模块

访问者在基于CMS的字体可视化网站中可以查看CMS前端展示系统所展示的所有内容板块的内容和图片，当访问者在点击某一条CMS系统的内容链接的时候，前端会将此条新闻的ID作为GET方法传递给后端，具体形式为：给URL添加参数，后端已经实现了工具类Http Servlet Request Util类，该类可以从GET或POST形式的请求体中获取相应的参数。因为ID为Long类型的数据，所以在后端直接调用Get Long方法来获取该新闻的ID，再和Dao层的Repository接口交互从数据库获取该条新闻的详情并返回给前端即刻。前端再用Java script将新闻内容渲染到前端的各有关元素内即刻。

访问者在CMS前端展示系统中可以查看可视化字体板块内的各内容，在浏览风采内容时请求的方式为GET，所以访问时的传参形式是显式的，也就是说访问参数会在URL栏中可以被查看，前端给后端的访问参数为风采ID ，该ID在后端通过Http Servlet Request Util类来提取具体的风采内容ID，并和Dao层的Repository接口交互，从数据库获取具体的风采内容。

4.2.2管理员功能模块

系统中管理员是非常重要的角色，本系统基本可以说是以CMS系统一样为访问者提供各类内容的访问功能，那自然而然会有一个问题，也就是说这些内容会从哪里来？当然是由管理员在后台进行对内容的添加和修改工作，所以从这个角度来说，管理员是本系统内容的提供者，所以对于管理员的登录工作自然是必需的。那么登录功能的实现方面，本文在本系统的第一个版本中并没有依赖强大的企业级权限管理框架，而是基于Servlet中的session来管理管理员的权限。

管理员在管理员登录页面中会输入自己的用户名和密码,请求以POST的方式从前端传给后端，后端中同样可以由已被编写好的HttpServletRequestUtil类来获取POST请求体中的JSON数据中的各数据项,接着和dao层的管理员相关接口中的登录方法进行交互从数据库中获取和该name和password信息匹配的管理员数据,该数据在后端被转换成具体的管理员类后,首先判断该对象是否为null,如果为null则表明数据库中没有和这组name和password相匹配的admin信息,登录失败;如果该对象不为null,则说明管理员登录成功,我们在Controller方法中往session里写进该管理员对象的数据以便后续的权限验证工作,并将前端的用户重定向到管理员管理面板页面中。

系统中管理员可以对已有的内容进行修改操作，修改时在前端管理员需对要修改的数据的标题、内容等进行修改并填入到相应的input或textarea内，在前端的脚本中分别获取input和textarea中的具体值，并声明一个相应的对象，并将input或textarea中的具体数据赋给此对象的相应成员变量中，并以Application/JSON的形式以POST的方式传到后端的API接口中，后端接收到请求后同样用Http Servlet Request Util类来进行参数的获取工作，并用Object MApper类来进行JSON字符串和具体对象实体类之间的相互转换，并在此过程中进行参数的非空判断等一系列参数安全检验，并和Dao层的Repository接口交互，将相应的对象数据映射到数据库中的某一行数据中并将其更新，数据库会返回具体的int类型的影响行数，后端可以通过此影响行数数据判断此次更新操作的成功或否。并将操作结果返回给前端以便让管理员知道自己此次操作的成功或否消息。

管理员新增内容的具体逻辑和修改已有内容的逻辑基本一致，为数不多的不一样之处是前者是对数据库的insert操作，而后者是对数据库数据的update操作。这里有必要说明一下，如上文中所提到过，在本系统的数据库层面上我们运用了MySQL数据库，而我们所运用的MySQL版本为8+ ，这就说明，数据库系统已经支持InnoDB的存储引擎，此存储引擎下本文可以使用行级别的数据锁，这种锁所带来的的好处尤其在新增内容和修改内容时的性能优势尤为突出。

因为在InnoDB存储引擎下，当进行数据表的新增或更新操作时，会引擎会采取行级锁，也就是说此次的数据表修改操作只会锁住相应的那么一行数据，而其他会话照样可以对本表进行新增或更新操作，这就可以保证系统的性能，如果用MyISAM存储引擎的话，每一次的Update或Insert操作中都要锁住此张表，另外一个或多个会话都要等到此次会话或事务的结束才能对该表进行新增或更新操作。

　4.3 数据库设计

系统数据库是用MySQL数据库系统设计的，因为在数据库的操作完全用SQL语言完成。从系统的结合运用层面来说，在JTA框架中，本文完全可以在每一个Repository接口中调用数据资源对数据库进行增删改查的操作，下面本文列出了系统数据库各表的设计方案。

　　图4.3 数据库总体E-R图

（1）管理员信息表的设计

　　（2）CMS系统公告信息表的设计

　　（3）字体信息表的设计

　　5 系统的实现

本文设计的CMS系统主要分为前端和后端，其中前端主要是为访问者准备的，访问者可以查看字体、新闻和公共等内容。后台主要是为平台管理员准备的，主要是针对CMS系统内容的新增和修改。

5.1 系统实现的开发环境以及技术介绍

在系统的实现部分中，本文运用了Spring Tool，因为系统的底层逻辑代码基本运用了java，而Spring Tool是集结了Spring Boot开发有关的诸多插件和基础库，而且它是基于完全开源的Eclipse进行二次开发而得的，也是非常符合本文以往的开发习惯。在系统前端展示系统的实现环节，本文还是用了Spring Tool，因为前端展示系统包含的HTML页面、CSS、JS文档基本编写逻辑简单，无需使用Dreamweaver等高级前端设计软件。

除此之外因本文暂时不具备VUE、Flutter、Angular 等更现代化的前端设计框架的运用能力，所以本着“已掌握的需被最大程度地发挥”原则，还是运用了比较传统的前端开发方案 HTML + JS+ CSS模式。

　5.2 系统功能的实现

在系统的实现部分中本文运用了Dreamweaver编写了前端代码，并用google所提供的chrome浏览器进行了本地tomcat服务器中的对CMS系统的浏览。

　5.2.1访问者功能模块实现

（1）用户访问站内内容实现

　　图5.1 用户访问CMS网站

（2）用户访问可视化字体列表实现

　　图5.2 用户访问可视化字体列表

（3）访问具体字体信息页实现

　　图5.3 用户访问字体详细页面

（4）访问其他CMS内容模块

　　图5.4 站内公共页面

　　图5.5 新闻页面

5.2.2管理员功能模块实现

（1）管理员登录实现

　　图5.6 管理员登录页面

（2）管理员修改个人信息实现

　　图5.7 用户信息修改页面

（3）管理员修改各板块已有内容实现

　　图5.8 管理员修改已有内容页面

（4）管理员新增各板块实现

　　图5.9 管理员新增内容页面

　6系统测试

分析在CMS系统,确定要测试的内容并制定测试计划，本系统在Windows10 64位专业版上运行只进行功能测试。测试主要分为访问者功能模块测试和管理员功能模块测试。执行测试,准备搭建测试环境，并记录测试内容。提交并解决测试中的bug。

6.1 系统测试概述

在进行设计和开发实现该操作系统的过程时候，不可避免地可能会同时出现一些基本错误。对于一个进行软件程序执行编程来说，在一个进行软件程序执行的编译过程中或该语句中的错误出现可能通常会直接在进行程序文件编译的执行过程中被自动提示，程序员可以立即在上线或启动应用之前进行修改。但是如果存在算法等错误则需要细心排查，如果没有在整个过程中穿插着进行测试的话。在最后完成系统的时候，如果出现了漏洞错误。就很难找到原因，有很大的可能要消耗巨大的精力去改掉这个错误。

除此之外，值得一提的是，因为本系统是对于公网所有艺术字体爱好者开放的内网系统，所以无论从数据读取或者数据写入两个层面上系统理论上不会受到太大的并发压力，除此之外，因在目前的毕设阶段中管理员账号只有一个，所以对于共享资源的修改方面也几乎没有并发情境下的共享资源安全性问题存在，除此之外，在事务层面上的测试基本上在系统编码过程中以JUNIT测试的方式同步进行完毕了，所以当一个事务方法内的数据资源的修改也严格实现了数据库操作的事务性ACID原则。

所以在本章的系统测试部分中，本文就第一是忽略了并发测试环节，第二是忽略了数据库写操作中的事务性测试。

6.2系统测试的内容

根据本文第4的需求，按照一步步的功能流程，进行逐步的测试。在这里，本文选择了最重要的几个测试模块项目，进行描述。来保证系统的基本功能都不存在问题。

　6.2.1访问者模块测试

表6.1访问者访问Web资源

表6.2访问各类CMS内容板块测试

　6.2.2管理员模块测试

表6.3管理员登录测试

表6.4管理员更新或新增测试

　　结 论

（1）本课题研究的内容是基于CMS的字体可视化网站系统，本文的水平实在有限，在系统架构的建立，整体系统的设计与实现过程中遇到了不少问题。但是设计的整体思路还是在指导教授的指导下，最终依据标准javaWeb开发体系标准、再运用spring框架家族 + SpringDataJTA + mysql + redis，成功建立了系统架构和数据源体系。

（2）本系统的前端展示页面运用了自研的多终端自适应前端模式，因为本文在前端开发方面的知识实在有限，所以在本课题的研究过程中，本文更进一步发现了自己在各方面的不足，为未来的学习找准了几个重要的方向。

（3）本文积极相应任务书的要求，将字体可视化这部分的工作放在首位，所以在后端程序中使用Thumbnailator组件实现了字体的缩略图和详情图的文件流形式传到后端程序的逻辑，并成功将字体图片展示在各内容页面中。

本文认为，如果能够对系统进行更进一步的改善，让系统在潜在可能运用到全国范围内的通用CMS系统，及时能够弹性面对高并发压力，在此条件下确保多线程共享资源的安全性问题的保障。并且能够在未来的版本中运用微服务架构，一方面让系统在架构层面上更加贴合新型架构标准，另一方面在一定程度上对于项目的管理带来敏捷开发有关的便捷模式。

除此之外，在未来的版本中本文认为有必要让管理员在后台管理板块中对于页面的布局等实现编辑或修改操作，这样一来，本系统可能真正可以成为一个通用的CMS系统源码放到国内源码网中，让广大程序爱好者参考使用。

　参 考 文 献

[1]付鹏程. 基于MVC的内容管理系统的设计与实现[D].东北大学,2015.

[2]马骏,张春光,毛俊,陈秉智.基于SSM框架的列车智能调试平台的设计与开发[J].铁道机车车辆,2022,42(02):79-84.

[3]Jim Arlow，Ila Neustadt．UML和统一过程——实用面向对象的分析和设计．北京：机械工业出版社，2003

[4]Wendy Boggs，Michael Boggs．UML与Rational Rose 2002从入门到精通．邱仲潘，等译．北京：电子工业出版社，2002

[5]李智慧．大型网站技术架构：核心原理与案例分析[M]．北京：电子工业出版社，2013

　致 谢

在这即将告别母校的时刻，我想衷心的感谢母校几年来对我的培养，大学里，我感受到了人格魅力的伟大，受到了很多渊博思想的熏陶。特别感谢老师的指导和大力支持，在做论文纂写时给与了全力支持和帮助。感谢学长们的耐心解答和帮助。

特别感谢教授在关键时刻耐心的给予指导跟机会。感谢大学里的各位老师在几年的时间里的培养，使我对专业产生了浓厚的兴趣，能系统的学习专业知识，了解本专业先进知识的动向，并最终使自己成为一个对社会有用的人。

基于CMS的字体可视化网站的设计与实现

价格 ¥9.90 发布时间 2023年8月18日

下载查看全文内容

已付费？登录 或 刷新