【《基于uni-app的校园新闻系统设计》12000字（论文）】

基于uni-app的校园新闻系统设计摘要速度仿佛已经成了当下社会的关键词，越来越多人开始注重效率。如今，互联网发展迅速，各类信息繁杂交织，该如何从繁芜复杂的信息中高效获取自身所需信息成了当下重点难题。在此基础上，针对闽江学院信息分布松散，官方网站信息滞后等情况，整合校园新闻的App也应运而生。知了闽院App是采用vue.js开发的一款适用于iOS、Android以及微信、支付宝等各种小程序的一个校园新闻平台。该平台采用uni-app框架进行开发，具有开发成本低、扩展灵活性强等优势，同时也拥有较为良好的可视化操作界面，能够较好的帮助用户查找所需信息。该平台通过对校园信息进行收集、整理、发布，主要用户是闽江学院学生，在该平台上，学生能够实现查看新闻、发表评论、浏览个人主页等功能。为了提高学生查找信息效率，该平台还实现对热门话题进行搜索查看等功能，在较大程度上帮助学生迅速找到自身所需信息，实现学校信息高效传播。关键词：uni-app；校园新闻；vue.js目录TOC\o"1-3"\h\u6411、引言 利用其独有的语法，将DOM绑定到Vue最底层的数据中，在修改数据的同时，DOM也会发生相应的改变，将对DOM的复杂操作转变成直接对数据进行修改，简化了代码的编写过程，同时提高了代码的易理解性和可修正性。Vue.js中最具特色的元素就是组件（component），具有强大的代码封装能力。组件一般为自定义元素，可以对HTML中包含的所有代码进行扩充延展，对一些使用率较高的代码进行封装，提高代码复用率。在大型应用开发中，组件尤为重要，大型应用正是由这一个又一个单独存在、可以重复使用的组件构造而成，这些组件在代码维护及代码调用方面起着不可替代的作用。2.2.2后端框架概述Node.js为JavaScript开发提供运行期系统，JavaScript能够利用它对软件后台管理进行编写与开发。与PHP、.NET、Java、Ruby、Python等后端语言一样，Node.js基本具有与这些后端语言一样的后端编写开发能力。Node.js最大的优势就是其具有能够同期并行处理多条请求的能力[14]。当前Web应用多采用Tomact、Apache、Server、IIS等作为HTTP服务器，利用前端三大前端开发要素HTML、CSS、JavaScript来对前端进行开发，通过浏览器<=>服务器<=>后台这种模式进行请求应答。这种模式具有一定的弊端，在多用户使用Web程序时，服务器的成本及负担也会相应增加，Node.js的出现则在一定程度上处理了这一缺陷，它将利用C++语言开发的高性能V8JavaScript引擎转用到服务器中，把服务器与后台绑定，开发了浏览器<=>后台的请求响应模式，极大地提高了通信效率。Node.js进程用户Request用户Request用户RequestNode.js进程用户Request用户Request用户Request图2-2Node.js请求响应模式作为一个Web应用框架，Koa不绑定任何中间件，用使用async函数这种方式来实现node回调，极大提升错误处理效率，避免异步嵌套。它用较少的代码实现完整的后台功能，在一定程度上提高了程序的可维护性。

3、可行性分析现今，我们居于快节奏的社会之中，互联网的快速发展，把我们带入了一个无比加速的时代，“效率至上”成了人人奉行的准则。校园作为当代社会的缩影，求快风气也盛极一时，校园信息化管理也成为提升校园生活质量的一大要素。如何在信息繁杂、流动快速的情况下，准确高效获取所需信息成为当下一大难题。针对这一问题，校园新闻APP的设计与实现是直接解决这一问题的首要路径。在进行APP构建与编写之前，需对APP是否能够开发以及有无必要开发进行分析研究，从技术、经济、管理这几个方面对APP能否进行构建做可行性分析，以此保证系统可行性，将APP开发过程中可能造成的损失减小到最小。3.1技术可行性知了闽院APP前后端各自独立开发，前端使用Vue.js进行设计与实现，后端则使用Node.js中的Koa框架进行开发，这两种技术都较为简单，适合新手开发者。Koa框架作为新开发的Node.js，能够很好的适应Web应用，同时，前端开发应用HBuilder兼容了Eclipse中的大量插件，能够满足大部分用户前端操作需求。在数据库的使用上，MongoDB数据库作为关系型数据库与非关系型数据库之间的中介者，能够很好地与前后端技术对接，在存储读取数据方面具有很大的便利性，易用性强，可以很好地兼容前后端项目。开发知了闽院APP的技术都较为简单，适合新手快速入门，同时也极大程度提高项目的可维护性。因此，此次项目设计主要采用Vue.js+Node.js+MongoDB进行开发。3.2经济可行性通过对知了闽院APP开发能力及实现方法进行分析调研，确定此次项目开发所需人力成本及开发过程中的经济成本。从开发软件分析，HBuilderX、VisualStdioCode、MongoDB都是免费的开源软件，在项目搭建过程中，只需在本机进行代码编写，无需其他开发成本。从人力资源分析，此次项目所需技术较为简易，分为前端后端两个开发模块，个人能够独立完成此次项目的设计与实现，所需的人力成本较低。从使用技术分析，该项目中所使用的技术都是当下流行的技术，技术可行性得到一定的保障。技术交流论坛也较为完备，能够更好的与他人交流开发过程中遇到的问题，错误解决效率也能够得到一定提升，节约了查找、解决bug所浪费的时间成本。3.3管理可行性知了闽院APP是闽院学子快速、便捷获取学校信息的一大重要平台，它是学校管理者和学生沟通的桥梁，管理者能够利用该平台快速发布学校相关信息，提高了信息的整合度；使用者能够借助该平台高效获取自身需要的信息，也可利用该平台与其他使用者交流沟通。知了闽院APP作为完全为学生服务的一款程序，很好的契合了闽江学院学生的需求。本次知了闽院APP主要采用MVVM模式，操作便捷简单，信息检索迅速、新闻阅览方便、个人隐私保密性好、成本低，无需任何技术性操作，与市场上的普通APP毫无二致，能够很好的满足当代大学生需求。基于以上分析，知了闽院APP开发在技术、经济以及管理方便都具有较大的可行性，开发这一款APP也很有必要。

4、需求分析4.1功能需求知了闽院APP分为新闻、交流、消息、我的四大模块。在新闻模块中，每个新闻被分为不同类别，用户可以挑选自己喜欢的类别进行查看；交流模块中可以查看自身关注用户发布的帖子，以及一些热门话题及热门话题下的文章；在消息模块，用户可以与其他用户进行私信交流；在我的界面，用户可以进行登录、注册操作，也可以进行密码修改、绑定邮箱、编辑资料、清除缓存等操作。用户打开APP后默认进入新闻模块，没有完成登录操作的用户，可以进行新闻、话题的查看操作，登录后的用户可以进行对新闻、帖子点赞、差评、评论，也可以发布帖子、关注自己感兴趣的用户。图4-1知了闽院APP前端结构图4.2数据流图及用例建模根据知了闽院APP的功能需求分析，主要将其分为游客和登录用户两个操作模块，游客可以进行登录操作，通过系统登录验证后，方可实现登录用户的功能。图4-2知了闽院APP用户数据流图以游客状态进入知了闽院APP时，可以实现注册、浏览的功能。图4-3知了闽院APP游客用例图以登录用户的身份进入知了闽院APP时，可以实现登录、浏览、发帖、回复、点赞、差评、分享、聊天等操作。图4-4知了闽院APP用户用例图

系统设计5.1系统功能设计知了闽院APP主要划分为“新闻”、“交流”、“消息”、“我的”四大模块。新闻模块：用户打开知了闽院APP后，默认进入新闻模块，可以在不登录的情况下查看新闻。同时，为了提高信息的整合度，新闻模块中的新闻被分为要闻、关注、推荐、公示、资讯、文化、媒体七个主题，每个主题对应不同的新闻内容，便于用户直接选择自身感兴趣的话题进行阅读。用户点击新闻会进入新闻详情页，在新闻详情页用户可以进行点赞、差评、分享、评论等操作。交流模块：在交流模块，用户无需登录即可查看其他用户发表的帖子。交流模块中的帖子功能主要是基于如今校园二手交易的热潮所开发的。用户可以通过此模块，安全高效的完成二手交易，同时也可以对别人发布的内容进行点赞、差评。点击发布信息的用户头像，可以进入他的个人空间，了解他的相关信息。除此之外，交流模块还包括关注和话题两个主题，在关注页面下，用户可以只查看自己所关注用户发布的信息，提高信息准确性；在话题页面下，会显示当下校园内的热门话题，用户可以点击自己感兴趣的话题进行查看。在话题详情页，用户可以查看到该话题下默认推荐的信息以及最新发布的相关信息。消息模块：用户可以与自己感兴趣的用户进行沟通交流，点击左上角的图标可以查看用户互相关注、关注、粉丝的相关信息，在消息详情页用户可以发送想要发送的信息给对方。我的模块：用户通过我的模块进行登录注册，在我的模块可以查看用户发布帖子、动态、评论、粉丝数量。在右上角设计按钮，用户可通过该按钮修改密码、绑定邮箱、编辑资料、清除缓存、反馈意见，还可以查看该应用的相关信息。登录用户也可以完成退出登录操作。5.2系统数据库设计考虑到Web应用对能够扩充延展以及具有较高性质和功能的数据存储处理方法的需求，知了闽院APP主要采用MongoDB数据库来存取数据[15]。MongoDB作为一款方兴未艾的文档型非关系数据库，在存储海量非结构化以及半结构化数据上有很大的优势，较为适用于此次的知了闽院项目开发[16]。图5-1数据库实体联系图下表是用户的基本信息，当注册用户填写基本用户信息后，可进行登录操作，登录成功的用户能够进行发帖、点赞、评论等一系列操作。表5-1用户表（user）列名类型说明主键idStringid√usernameString用户名userpicString用户头像passwordString用户登录密码phoneString用户手机号emailString用户邮箱statusString用户登录状态0-未登录1-已登录create_timeDate创建时间ageNumber年龄sexString性别0-男1-女emotionString情感状态hometownString家乡birthdayString出生日期下表是新闻模块中新闻的基本信息表，在新闻模块，用户可以直接获取到文章作者、新闻标题、封面图片、文章内容、文章图片、分享次数、新闻类别等基本信息。表5-2新闻表（news）列名类型说明主键idStringid√user_idString用户idtitleString新闻标题titlepicString封面图片contentString文章内容picString文章图片share_numNumber分享次数create_timeDate创建时间news_class_idString新闻类别下表为新闻类别表，将每一篇新闻归类到不同的类别下，便于用户快速获取所需信息。表5-3新闻类别表（news_class）列名类型说明主键idStringid√classnameString类别create_timeDate创建时间下表为帖子的基本信息表，用户完成登录后，可进行发帖操作，数据库中会自动存储用户的发帖内容、图片、分享次数以及帖子的类别。表5-4帖子表（thread）列名类型说明主键idStringid√user_idString用户idcontentString发帖内容picString图片share_numNumber分享次数create_timeDate创建时间thread_class_idString帖子类别下表为帖子类别表，将用户发帖内容归类到不同的类别下，用户可通过选择查看不同的内容。表5-5帖子类别表（thread_class）列名类型说明主键idStringid√classnameString类别create_timeDate创建时间下表是话题的基本信息表，用户可通过此表查看话题主题、话题图片、话题描述、话题类别，可让用户在获取信息目的不明确的情况下，获得一定推荐。表5-6话题表（topic）列名类型说明主键idStringid√titleString主题titlepicString话题图片descString话题描述create_timeDate创建时间topic_class_idString话题类别下表是话题类别表，将所有话题进行相应的分类，，便于用户从不同模块获取想要查看的话题。表5-7话题类别表（topic_class）列名类型说明主键idStringid√classnameString类别create_timeDate创建时间下表是话题帖子表，该表将属于该话题下的帖子集中到一起，对所有帖子进行整合，用户只需要点开想要查看的话题，就能够获取到该话题下的所有帖子。表5-8话题帖子表（topic_thread）列名类型说明主键idStringid√topic_idString话题idthread_idString帖子id表5-8话题帖子表（topic_thread）（续）列名类型说明主键create_timeDate创建时间create_time下表是评论的基本信息表，用户可在APP上直接看到评论者姓名，文章被评论数、评论内容，用户点开想要查看的新闻，就可以查看到该篇新闻下的评论。表5-9评论表（comment）列名类型说明主键idStringid√user_idString评论发布者idfidString回复idfnumNumber被回复数dataString回复内容create_timeDate创建时间news_idString帖子id下表是消息表，主要存储发送消息、接收消息的用户id，用户聊天内容以及该聊天创建的时间。表5-10消息表（feedback）列名类型说明主键idStringid√to_idString接受idfrom_idString发送iddataString聊天内容create_timeDate创建时间下表是关注表，主要存储所关注用户的id，用户能够在关注页面查看到自己关注用户发表的帖子。表5-11关注表（follow）列名类型说明主键idStringid√follow_idString关注iduser_idString用户idcreate_timeDate创建时间下表是用户点赞/差评的数据表，该表存储了新闻、帖子被点赞/差评的次数，每位用户只能点赞或者差评一次。表5-12点赞/差评表（support）列名类型说明主键idStringid√user_idString发布者idthread_idString帖子idtypeString0-点赞1-差评create_timeDate创建时间5.3APP界面架构根据用户需求分析，知了闽院APP界面基本架构设计如下：图5-2知了闽院APP界面架构5.4各模块实现效果5.4.1新闻模块效果用户进入知了闽院APP时，默认进入新闻界面。在该页面，用户能够根据新闻标题、新闻封面图对自己感兴趣的新闻进行选择，同时，系统也对所发布的新闻进行了初步分类，用户可以通过选择新闻类别来寻找自身感兴趣的内容，提高了新闻阅读效率以及用户针对性，在一定程度上提升用户体验感。新闻相关信息从数据库获取，用户只有浏览权限，无法对新闻内容进行修改。在获取数据库数据时，对数据进行分页查询处理，根据用户阅读需求查询数据库数据，减少内存并发量，减轻服务器负担。用户点击新闻标题或新闻封面图均可进入新闻详情界面，在新闻详情界面用户可浏览新闻内容，查看新闻图片，也可点击作者头像，查看作者个人信息。登录用户还可对新闻进行点赞/差评/评论/分享操作。图5-3新闻浏览界面图5-4新闻详情界面5.4.2用户发帖交流模块效果登录用户可以通过发布帖子与其他用户进行交流。在该界面，登录用户可对其他用户发布的内容进行点赞/差评/关注操作。同时，用户也可点击其他用户头像，进入该用户个人空间查看其详细信息。在个人空间模块可以查看用户账户信息以及个人信息，能够进一步加深对用户的了解，促进用户间交流沟通。图5-5用户发帖界面图5-6用户关注成功界面图5-7关注用户发帖界面图5-8个人空间界面5.4.3发帖编辑模块效果登录用户在该界面通过文字编辑、图片选择的方式，编辑自己所要发布的内容，并进行发布。在该模块，对图片选择进行约束限制，一个帖子最多只能选择九张图片。在选择完图片后，用户也可以对不需要的图片进行删除操作，点击图片右上角删除图标，系统将会弹出提示框，确认删除后，图片将会删除。用户在编辑完所要发布的内容后，退出发帖界面，系统会提示是否需要保存草稿，如用户选择保存，则退出该界面后重新进入该界面仍能够获取之前所编辑的内容；若用户选择不保存，则编辑的数据被清除，用户再次进入该页面时，需重新编辑需要发布的数据。发布成功后将返回交流界面，用户可以查看自己所发布的内容，并对它进行点赞/差评等操作。图5-9用户发帖编辑界面图5-10用户编辑完成界面图5-11删除图片界面图5-12保存草稿界面5.4.4搜索模块效果用户能够在该界面完成搜索操作，点击搜索历史也能够对该内容进行快速搜索。图5-13搜索界面5.4.5消息模块效果在消息模块，用户可以与其他用户发送消息，也可以查看关注的用户名单、粉丝名单以及互相关注名单。用户与用户之间的交流也有助于发帖模块中的二手交易板块的实现，用户在看到自己需要购买的物品后可以与发布信息的同学进行沟通，让交易更加透明、安全。图5-14用户消息界面图5-15关注详情界面5.4.6用户个人操作模块效果在用户个人操作模块，用户可进行登录/退出登录操作。用户登录成功后,可以进行密码修改、邮箱绑定、资料编辑、清除缓存、意见反馈、查看APP版本等操作。用户点击登录按钮可进行登录操作，登录账号由后台分配，用户通过输入正确的账号密码进行登录。图5-16登录界面图5-17登录成功界面用户点击账号与安全按钮，可对密码进行修改，系统会自动判断输入的两次新密码是否一致，若不一致，系统会提示输入的新密码两次不一致。图5-18修改密码界面用户点击绑定邮箱按钮可对邮箱进行绑定，若用户输入的邮箱格式不正确，则系统提示邮箱格式不正确。图5-19绑定邮箱界面用户通过资料编辑按钮可以对自身基本资料进行编辑修改。图5-20修改性别信息图5-21修改出生日期图5-19修改情感状态图5-20修改家乡信息用户可以通过清除缓存按钮对APP缓存进行清除操作，点击清除缓存后，缓存将会为零，此功能能够节省APP运行空间，改善运行速度。图5-21清除缓存界面图5-22清除缓存成功界面在意见反馈按钮中，用户可以查看常见问题解决办法。图5-23意见反馈界面在关于闽院中，用户可以查看该APP版本。图5-24关于闽院界面

6、系统测试6.1测试目的与意义在任何软件系统的开发过程中，尤其是在进行大型软件系统的开发中，几乎每一个编程人员都不可避免地会产生错误。为了避免在用户使用知了闽院APP的过程中出现较大错误，遇到严重bug，需对知了闽院APP进行系统的测试，保证系统开发的质量，尽可能减少错误造成的损失。测试过程必须根据开发过程中设计的需求进行测试，根据所设计的测试用例，对知了闽院APP中的用户需求功能、开发过程所产生的异常进行测试，保证用户在使用APP时尽量减少出错，让用户能够拥有较为良好的使用体验[17]。6.2测试方法知了闽院APP主要采用的是黑盒测试技术。黑盒测试也被人们说成功能测试，它具有检测知了闽院APP能否正常投入使用的能力，在测试的过程中，被测试的程序就像一个不可对外打开的不透明盒子，对被测程序的页面和功能进行测试，只考虑程序的外在结构，对程序的内部逻辑和内部结构无需过多关注[18]。黑盒测试是将自身当做用户，以用户的视角来检测程序，较常用的测试方法有边界值分析法，通过对用户传输给系统的数据以及系统反馈给用户的数据进行测试，以此来维持系统的完整性、稳定性。6.3可用性测试游客登录使用：能够正常的浏览新闻以及其他用户发布的帖子，可以查看热门话题以及新闻下的回复。游客也能够进行相应的注册操作，注册成功后，游客能够完成登录操作。在游客未注册的情况下进行点赞、发帖等操作时，会自动跳转至登录界面，提醒游客还未进行登录操作。根据以上需求，对游客功能进行了相关测试，发现所需功能基本得以实现，测试通过。表6-1游客功能测试用例用例名称测试用例预期结果实际结果注册输入用户名、密码注册成功注册成功注册输入用户名、未输入密码按键为不可点击状态，注册失败按键为不可点击状态，注册失败注册未输入用户名、输入密码按键为不可点击状态，注册失败按键为不可点击状态，注册失败表6-1游客功能测试用例（续）用例名称测试用例预期结果实际结果浏览浏览新闻、帖子、话题、评论能够正常浏览新闻、帖子、话题、评论能够正常浏览新闻、帖子、话题、评论点赞/差评/评论未登录用户对新闻、帖子进行点赞/差评/评论跳转至登录界面跳转至登录界面用户登录使用：用户登录后，除了可以实现以游客身份完成的相应的浏览功能外，还可以发布帖子，回复帖子，对帖子进行点赞/差评以及评论、分享，同时登录用户还可以对自身的基本资料进行修改，关注其他用户，与其他用户进行聊天等。针对以上需求，对用户登录后的功能进行了相关的测试，被测试功能基本满足用户需求，测试通过。表6-2登录用户功能测试用例用例名称测试用例预期结果实际结果登录输入正确的用户名、密码登录成功登录成功登录输入错误的用户名或密码提示用户名或者密码错误，登录失败提示用户名或者密码错误，登录失败登录未输入用户名或者密码按键为不可点击状态，登录失败按键为不可点击状态，登录失败浏览浏览新闻、帖子、话题、评论能够正常浏览新闻、帖子、话题、评论能够正常浏览新闻、帖子、话题、评论点赞/差评/评论点赞/差评已经点赞/差评过的新闻/帖子提示已经点赞/差评过了提示已经点赞/差评过了点赞/差评/评论点赞/差评未点赞/差评过的新闻/帖子点赞/差评数+1点赞/差评数+1表6-2登录用户功能测试用例（续）用例名称测试用例预期结果实际结果发布帖子用户选择图片、编写文字进行发布能够正常进行发布，图片最多只能选择9张能够正常进行发布，图片最多只能选择9张发送消息用户对其他用户发送消息能够正常发送接收消息能够正常发送接收消息编辑资料用户对自身基本资料进行修改编辑能够正常修改资料能够正常修改资料绑定邮箱输入正确的邮箱格式绑定成功绑定成功绑定邮箱输入的邮箱格式不正确按键为不可点击状态，绑定失败按键为不可点击状态，绑定失败修改密码输入正确的旧密码，以及新密码修改成功修改成功修改密码输入错误的旧密码，以及新密码提示密码错误，修改失败提示密码错误，修改失败修改密码未输入旧密码/新密码按键为不可点击状态，修改失败按键为不可点击状态，修改失败退出登录用户点击退出登录按钮退出登录成功退出登录成功6.4系统测试小结在此次系统测试中，针对系统中一些可能会出现问题的模块进行了简单测试。测试结果于预期结果基本一致，但也不排除还有其他错误的可能性，且因为自身技术局限，后端功能还不够完善。因此，在后期的测试与项目维护中会继续对知了闽院APP进行功能的开发与完善，在最大程度上提升用户使用感，减小错误发生的可能性。

7、结论以及展望7.1总结根据对相关资料的查阅，确定了论文选题为基于uni-app的闽院新闻平台的设计与实现。由于对前端uni-app框架的学习比较擅长，所以一开始就决定使用uni-app对前端进行架构。在搭建前端框架时，考虑到代码的冗余率这一点，因此，在开发过程中，封装了一些常用的代码框架，以此提高代码的复用率。同时，也对基本语句进行注释，方便后续代码的修改及查找，使代码更加简洁、明了。在完成前端架构后，在后端的搭建以及前后端交互这方面遇到了较大的瓶颈，对后端该采用什么语言进行编写犹豫了许久，最后通过咨询指导老师以及学长学姐，决定使用Node.js中的Koa框架来完成后端的制作。因为之前对Node.js中的Koa框架接触较少，在刚开始的后端开发过程中遇到较大的困难，开发进度也较为缓慢，但Koa框架比较适合新手，在经历了一段时间的学习后，能够做到较为熟练编写后端代码，虽然在后端能力上还远远不够，但后端的基本功能也都得以实现。经过这几个月的学习，知了闽院APP的功能基本得到实现，前期设计的页面也基本得以体现。但在开发过程中，还是遇到了一些难以解决的问题，项目有些功能还是没有很好的得到完善。比如，在前端设计过程中，animated动画效果没有办法实现、聊天界面发送消息后不会自动下拉到最底层等。由于个人后端开发能力较为薄弱、考虑问题也不够全面，导致APP功能不够完善，没有考虑到可能会有用户发布恶意内容的情况，搜索功能也没有实现。但无论如何，通过这次毕业项目设计，能力得到了很大的提升，在巩固了前端代码编写的同时，极大提高了个人后端开发能力，让自身从一个后端小白进化成能够基本完成后端开发的小朋友。此外，在完成这个项目后，获得了很大的成就感，提高了自信心，相信这对今后的代码开发工作有很大的帮助。最后，相信随着uni-app技术的不断发展，APP开发能够做到更加简便、快速。而随着个人自身能力的不断提升，在今后的工作中也能够开发出更加完善的项目。7.2展望通过对知了闽院APP的设计、技术学习、需求分析以及后期实现，完成了本次项目的开发。但在这次开发中还存在很多问题，由于个人后端开发能力不足，导致许多在前期需求分析阶段设计的功能没有能够实现，已经实现的功能代码逻辑也不够严谨，整个