模拟信笺网站的设计与实现_陈任.pdf

2023.6电脑编程技巧与维护1概述对校园内年轻人的调查显示，大部分年轻人认为即时聊天软件使用户之间的交流变得便捷，却减少了用户通过交流获得的有益信息，并且对情感的宣泄有一定副作用。因此，从交流的角度并利用现代互联网编程技术为年轻人开发一个慢节奏的以书信交流为主的匿名社区平台，方便他们释放心中的压力并倾诉自己的烦恼。在保证信息安全的前提下，利用当下流行的前后端分离技术来完成这个软件平台。前端技术使用Vue 3框架；后端技术使用Java SpringBoot框架；数据库则使用MySQL数据库技术。该项目本质是一个匿名的类似漂流瓶的社交平台，通过用户信件延时抵达及邮票消耗的方式促使用户能够重视自己写下的每一封信。同时用户还可以在系统中体验邮递员角色，以赚取额外的邮票并体会每一封信的重要意义。此平台还包含模拟公告栏的社区部分，用户可以自由发布信件或者对其他人的信件进行回复。2需求分析该项目着眼于现代年轻人的心理生活，观察年轻人在现代社会中的生活习惯，并根据调查得出年轻人需要一个匿名平台向他人倾诉的结论。因此，建立一个慢节奏的以书信交流为主的匿名社区平台。用户可以在该平台以匿名信件的方式向他人倾诉自己的烦恼，并等待他人的回信。2.1目标用户目标用户为有匿名倾诉需求的年轻人，这类年轻人多为对快节奏的生活方式感到厌倦、有心理情绪需要发泄的人。2.2功能需求（1）用户可以注册登录该平台，如果忘记自己的密码则可以重设密码。（2）用户可以书写向他人咨询烦恼的“解忧信”，也可以对他人的“解忧信”进行回复，双方可以持续通过信件的方式联系。（3）用户可以在“解忧信”中选择写给自己并设置信件送达时间，该信件将会以“时间胶囊”的形式准时送达到用户的信箱中。（4）用户可以在信箱中收取他人的信件并回复，也可以对自己喜欢的信件进行收藏，或对自己不喜欢的信件进行拉黑处理。（5）用户可以通过“邮局”功能简单体验邮递员的工作，赚取“邮票”这一虚拟货币。（6）用户可以在“交流信”（公开信）功能中发布公开信息的信件，并查看他人对该信的评论、回复，在他人的信件下进行评论、回复。（7）用户每天都可以获得一定量的“邮票”，可以消耗邮票来向他人咨询问题。邮票可以保证两个用户日常的写信交流。同时，发表公开信也会使用“邮票”这一虚拟货币。（8）用户可以在个人页面修改自己的个人信息，以及密码；（9）系统在每天固定的时间向用户随机派发3封基金项目：东南大学成贤学院2022年大学生实践创新训练项目基金支持（项目编号：YCX22020）。作者简介：陈任（2001），男，本科，学生，研究方向为计算机科学与技术；郗玄（2001），男，本科，学生，研究方向为计算机科学与技术；金炜砚（2002），男，本科，学生，研究方向为计算机科学与技术；卢昱宁（2003），男，本科，学生，研究方向为计算机科学与技术；田静（1982），女，硕士，讲师，研究方向为计算机科学与技术。模拟信笺网站的设计与实现陈任，郗玄，金炜砚，卢昱宁，田静（东南大学成贤学院，南京210000）摘要：通过对现代年轻人的调查研究发现，即时聊天无法很好地帮助年轻人宣泄情绪。将古代书信交流与现代互联网编程技术进行有机结合，既保留书信交流的特点，又融入现代交流的需求。通过 Vue3、Java SpringBoot 框架及 MySQL 框架技术搭建了一个前后端分离的项目，建立了一个以模拟古代信笺交流为主的匿名交流平台。在通过调查得出结论的基础上，对该平台软件的研发过程、各模块所实现的功能，以及信件派发等部分创新功能的技术点进行了说明。关键词：模拟书信；前后端分离；Vue 框架；Java SpringBoot 框架；MySQL 数据库31DOI:10.16184/prg.2023.06.0402023.6电脑编程技巧与维护“解忧信”，用户可以选择其中一封解忧信件进行阅读。（10）系统会将每一封信（除“解忧信”外）进行延迟处理，在规定的时间（一般为8 h）之后再发送到用户的信箱中。其中“邮局”和“公开信”都是在不影响项目整体功能和氛围的前提下拓展的新功能，这两个功能能够极大地提高平台软件的丰富程度，增加用户的使用时间。3项目设计该项目整体采用前后端分离的方式，前端采用Vue3框架，该框架是目前较为流行的前端框架之一，使用起来有较强的条理性；后端使用Java SpringBoot框架，该框架也是较为流行的后端框架之一，使用方便简单；数据库使用MySQL数据库管理系统。在传统互联网Web软件的开发中，一个程序员需要负责前端和后端的设计，这就导致该Web软件的高度耦合性，使软件开发的效率大大降低。在这种前后端分离的开发模式中，高度解耦得以实现1，前后端的开发人员只需要负责各自的部分，无需对其他部分进行操作，即前端程序员只需要负责设计制作HTML界面；后端程序员只需要负责设计业务逻辑、数据库调用等。双方的交互是后端程序员向前端程序员提供实现功能的API接口，然后前端程序员通过API接口向后端发送请求，再将API接口上获得的数据渲染到HTML界面上即可2，无需进行复杂的数据处理。其中，API返回的是一种JSON格式并采用UTF-8编码的数据3。该项目共有3个模块构成，其功能模块结构如图1所示。3.1项目功能（1）用户管理。该模块主要包括用户注册、用户登录、用户信息编辑、用户密码重置（需要用户提供旧密码）、用户忘记密码（通过绑定的手机号来重设密码）、退出登录。（2）书信管理。该模块包含的内容较多，主要有咨询信、交流信、信箱、时间胶囊、信件管理。下面分别对各功能进行说明。咨询信，即“解忧信”，其中的功能包括写信及发信。用户每天可以使用“邮票”写一封匿名的“解忧信”并发送出去，可以设置信件的标签。同时每个用户每天可以对派发的3封“解忧信”中的一封进行回信。交流信，即公开信，其中的功能包括写信、发信、回复及拉黑4个功能。用户可以在交流信公告板上使用“邮票”张贴一张不匿名的信件，同时其他用户可以在该信件下进行回复，回复对所有人可见。信箱，用户可以在信箱中阅读信件，信箱还包括普通信箱（所有信件都会显示）、收藏信箱（只显示收藏了的信件）及时间胶囊的信箱。时间胶囊，包括创建信件到达时间、写信及发信。用户可以在创建信件的时候设定好信件送达的时间，信件将会在设定好的时间准时送达。信件管理，包括收藏、拉黑及回信。用户在阅读信件的界面中可以对该信件进行收藏、拉黑及回信的操作。回复的信件将会在规定好的时间（一般为8 h）之后发送到对方的信箱中。（3）邮局管理，包括邮局（包括接受信件、派发信件及成为邮递员3个子功能）和邮票（包括获取邮票和消耗邮票两个子功能）两个功能。用户可以在邮局中扮演邮递员的角色，并通过选择的方式选出收信人昵称，如果选择正确，那么信件将会在8 h之后送达到对方的信箱中；如果选择错误，那么信件将会在9 h之后送达对方的信箱之中。3.2项目框架该项目通过前后端分离构建系统的架构，后端负责功能实现的处理，并向前端提供API接口，而前端则负责将API接口上获得的数据渲染到HTML界面上。3.2.1前端前端主框架Vue是一套构建用户界面的框架，是基于MVVM（Model-View-ViewModel）设计思想、提供数据双向绑定的库，专注于UI、交互层面4。IDE使用的是微软出品的Visual Studio Code，这是一款免费的轻量级代码编辑器，有内涵丰富的插件可供下载安装使用，其智能代码补全功能较为强大5。具体实现的步骤如下。前端页面通过Axios给后端发送请求，请求从后端获取需要的数据，在获取后端数图1功能模块结构用户忘记密码书信网站用户管理书信管理邮局管理用户注册用户登录用户信息编辑用户密码重置退出登录咨询信交流信信箱时间胶囊信件管理邮局邮票写信发信写信回复发信拉黑收信箱收藏信息阅读信件创建信件到达时间写信发信收藏拉黑回信接收信件派发信件成为邮递员获取邮票消耗邮票322023.6电脑编程技巧与维护据之后对数据进行渲染，并将数据显示在界面上。在完成对项目的开发之后，利用Node.js、Webpack对前端项目进行打包压缩和部署。前端框架如图2所示。3.2.2后端后端使用由Pivotal团队开发的一个全新的基于Ja-va的名为“Java SpringBoot”的后端框架。IDE使用由JetBrains发行的IntelliJ Idea，这是一款优秀的后端开发软件，集成多个语言组件，使后端的开发变得更加快捷方便。SpringBoot从诞生初期就有着明确的目的，即简化应用Spring开发项目。该技术最突出的特点是大大简化了Spring应用各方面的配置并将测试变得简单实用6。另外，SpringBoot在内部先天地内置了Tomcat服务器及Jetty服务器，这使程序员可以将整个项目直接打包成jar包，极大地方便了后续项目在服务器上的部署7。同时，SpringBoot使springcloud等众多组件项目得到良好的应用，从而改变了Web应用的开发模式8。后端框架如图3所示。下面简要说明“解忧信”派发功能的实现。派发“解忧信”是该平台的一个特色设计，其功能类似漂流瓶，邮局系统会通过每天一次的定时任务完成这 个 复 杂 的 功 能。首 先，利 用SpringBoot框 架 中Scheduled(cron=0 0 4*)标签的功能，每日4点启动其绑定功能，实现每天4点自动向所有用户派发“解忧信”。在时间的积累下用户写下的“解忧信”会变得越来越多，所以项目需要从中将已生成超过3天的“解忧信”剔除出去，从而减少派发功能的工作量。同时，由于一封“解忧信”并不是只发送给一个用户，而是在生成之后的3天内派发给多个用户，所以无需担心库中的“解忧信”数量不足。得益于SpringBoot可使用的自动装配的特性功能，轻松通过之前已有的架构从数据库中提取所有可用的“解忧信”、愿意接受“解忧信”的用户及“解忧信”的派发历史。通过一个主循环来遍历所有需要分配解忧信的用户，并在每轮循环中完成信件分配所需的全部操作。接下来的步骤在逻辑上较为复杂，在一轮循环中，为了避免“解忧信”重复分发，需要在为每个用户分配信时完成如下操作。计算该用户仍需被分配“解忧信”的数量、先剔除该用户曾经接受过的“解忧信”再从中抽取需要的数量。为了达成该目标，需要引入一份日志表，并以此为标准判断哪些信已经被某用户收到过，在全部“解忧信”和该用户收到过的信这两份表单间取差集便是本轮分配中有效的信件。至于最后的随机抽取，则采用常见的洗牌算法得到结果。“解忧信”派发部分代码如下：for(int i=0;i uidArray.length;i+)/根据情况判断实际需要分配几封信int letter_num=max_letter-letterService.getUn-ReadConsultationLetter(uidArrayi).size();System.out.println(用户+uidArrayi+应分配+letter_num+封);if(letter_num=0)图2前端框架图3后端框架图HTML/JS/CSS（单界面应用，各界面按需加载）生成各界面JS模块浏览器登录页首页信箱devbuildwebpackapp.jswebpack页面容器VueComponet公共组件用户组件用户组件Vue Router路由配置路由地址Vue状态管理stateviewactionselement组件util第三方库工具类公共组件配置信息pluginServerData Fiter中间件AxiosNetworkPOST请求API后端接口HTTP请求HTTP响应request请求客户端request响应拦截器拦截所有请求数据处理打包CorsMappings放行并解决跨域问题PostMapping处理各种类型请求控制器方法Controller332023.6电脑编程技巧与维护continue;List allLog=messagingSer-vice.getlog(uidArrayi);/获取日志int t=allLog.size();/日志最