校园信息聚合平台的设计与开发

摘  要：目前校园生活中学生获取信息的来源较为分散且内容重复率较高，从而使学生无法在第一时间快速准确地获取信息。本文对目前情况进行分析后，采用前端和后端分离的架构，用Javascript、Nginx、MySQL开发了一个校园综合信息平台，用于串联校园中各个信息发送平台，提升信息的传递效率，降低信息传递的出错率。

关键词：校园信息平台;Javascript;React;Express;前后端分离;MVC架构

中图分类号：TP311.52      文献标识码：A 文章编号：2096-4706（2019）21-0010-03

Abstract：At present，the sources of information for middle school students in campus life are relatively scattered and the content repetition rate is high，so that students can not get information quickly and accurately in the first time. After analyzing the current situation，this paper develops a campus integrated information platform with JavaScript，Nginx and MySQL，which is used to connect all information sending platforms in the campus，improve the efficiency of information transmission and reduce the error rate of information transmission.

Keywords：campus information platform;Javascript;React;Express;front and rear separation;MVC architecture

0  引  言

學生的校园生活中，有很多渠道可以获取或者发布信息。例如，新生可以通过百度贴吧或者加入学校的微信群来了解学校;各种社团组织可以通过张贴海报或者通过微信公众号来发布招新、活动通知;如果想出售二手商品，可以加入学校各式各样的二手交易群;捡到别人的失物，就在朋友圈里发布失物招领。可是学校中院系众多，不同的院系都有自己的公众号和讨论组，乍看之下信息的来源如此多样，实际上却是单独而孤立的一个个信息孤岛。这造成了学生获取信息的碎片化，不同的学生由于其关注的公众号、讨论组不同，获取到的信息也不平等。在这样的现状下，一个整合校园信息的平台，能提高有用的信息在学生之间传递的效率，缩小学生之间的信息不对等。

1  研究现状

经过调研和文献查询，同学们希望一个校园信息聚合平台应该包含有以下的功能：

（1）可以方便地出售/购买二手商品。对卖家而言，不会像在微信群中那样刚发布的信息被后面的聊天记录所覆盖，可以持续稳定地展示出售信息;对买家而言，他们可以依据分类，快速地查询、挑选自己感兴趣的商品。

（2）能够发布失物招领信息。丢失物品或者捡到失物是每个大学生都会经历的事情。无论是在朋友圈转发或者群里发布失物招领信息，寻回的成功率都不是很高，究其原因，就是缺乏一个统一的、面向所有人的平台来获取足够的关注度。

（3）能获取最新最权威的学校通知的板块。例如放假信息、运动会信息、管道维护通知，无需在群聊中翻查聊天记录。

2  系统需求分析

2.1  系统功能需求

通过这个系统，内容管理者可以快速地搭建起一个功能齐全的校园平台。它共分为三大部分：公共界面、用户界面和管理员界面。

（1）公共界面集成了三个板块：校园新闻、交易市场、失物招领。它们对应着校园生活中最常用的几个场景。

校园新闻可以获取校园相关资讯信息，如放假信息、校园活动等校园信息;可以让学生分享自己的摄影作品、投稿文章、社团的介绍、招新信息、店铺的点评、新生指南，这类信息都可以发布在新闻板块，打破院系与院系之间的隔阂，通过资讯板块可以快速全面地获取了解学校大小事物。

交易市场可以查看学生发布的二手商品。买家可以直观地查看商品的图片和描述，而卖家也不用担心会像微信的二手交易群那样，自己的商品信息会被后来的对话所覆盖，只需发布商品，等待有意向的买家联系即可。

失物招领是一个十分重要的功能，失物招领发布在这样一个面向所有人的信息平台，会有比朋友圈或者微信群更高的曝光度，失物寻回的成功率也会更高。在失物招领的板块，用户可以发布两种类型的失物招领，一种是自己遗失物品，一种是拾取到别人的失物，方便检索。

（2）用户界面提供用户注册的功能，用户登录后，在自己的个人中心，可以管理自己发布的商品和失物招领。

（3）管理员界面是仅供管理员使用的，能够管理平台上所有的信息。其中，用户创建的内容管理员可以撤除、删除，但是不能对内容进行修改，以保障用户的权利。对于管理员创建的内容，例如文章，则拥有所有的权限。管理员用户同时也可以查看用户的信息。

2.2  系统非功能需求

2.2.1  易用性需求

为了降低系统的使用难度，项目的前端后端都是用JavaScript编写的，免去了使用者的多学一门语言的麻烦。得益于NodeJS的包管理器Npm和Facebook提供的项目脚手架，在配置好数据库和填好配置文件后，只要一行指令就可以自动安装依赖并开始运行，此时一个开箱即用、功能齐全的校园信息平台就这样建成了。此后内容的发布和管理就像微博一样简单，通过浏览器访问管理员界面就能管理所有的平台信息。

2.2.2  稳定性需求和低成本需求

同时，出于稳定性和建站预算的考虑，平台运行在CentOS，如果没有自己的服务器而是租用虚拟服务器的话，运行Linux系统会比Windows Server系统便宜很多。同时系统内部集成了一个静态资源服务器，省去了租用外部图床的费用。

2.2.3  可拓展性

系统是严格的前后端分离，前端使用React的组件化开发，后端采用MVC的代码组织方式，可以方便地进行新功能的开发和测试。只要实现了原始的数据传递结构，使用者甚至完全可以通过其他语言来替换后端或前端。

3  系统总体设计

根据不同的功能权限，本文将项目的结构划分为了三个部分（如图1所示）：公共界面、用户界面、管理员界面。每个部分实际上都是由前端和后端构成的，前端向后端发起请求，后端读取数据库并返回数据。因此平台的运行需要同时启动一个静态资源服务器和一个API服务器。Nginx就是一个很好的静态资源服务器，它还可以将前端发来的请求代理给API服务器，不仅提高了响应速度，还能隐藏API服务器的地址以提高安全性。

前端采取了React框架，可以以组件的方式来组织页面，让代码的复用性和可读性大大提升。通过React的生命周期，可以精确地控制数据的获取和发送，以及对页面进行部分更新。当然React只是一个前端框架，通过React-Redux才能实现全局的状态管理，结合React-router实现平台的权限系统。后端使用Node+Express框架，数据库则使用MySQL。

后端的代码按照MVC架构组织，不过其中视图（V）就是React前端，所以后端只包含Model和Controller，以及平台初始化时创建相关数据表的init_database.sql文件。

后端使用的是Restful路由，和前端的路由是一一对应的，这样可以构建出语义清晰的请求路径，例如/user/getList，很容易就能看出在请求用户列表。根据路由调用对应的Contrller，Contrller处理请求，例如检查请求合法性、检查数据完整性，再交由对应的Model来操作数据。MVC的好处在于，请求和实现是分离的，如果数据库有变化，在不更改前端的前提下，仅仅依靠修改Model就能复用整个系统。

4  系统实现

4.1  系统实现开发工具

系统完全前后端分离，前端使用了React框架，后端使用Node-Express框架，数据库采用MySQL，运行在CentOS上，推荐使用Nginx作为http服务器。

系统前后端都是使用JavaScript开发的。虽然JavaScript在问世之初被视为一种玩具语言，但随着Node和V8的诞生，JavaScript不仅可以在前端使用，还能在服务端运行，一个巨大的生态环境迅速构建起来了：通过Npm可以快速便捷地安装好项目的依赖。并且有着各式各样的框架可供使用。React是一款优秀的前端框架，其最大的里面就是组件化，这是目前前端的趋势，一个页面由多个组件组成，而组件还可以在不同的页面中复用。将页面拆成组件之后，就可以对页面进行部分更新，不需要重载整个页面，仅仅更新改变的组件即可。

Express可以快速搭建起一个API服务器，通过API服务器来查询数据库返回数据，以此来实现前后端的分离。

Nginx是一个高性能的静态服务器，同时它也能配置为反向代理服务器，如果想提升系统的响应速度，可以开启多个API服务器，并通过Nginx设置反向代理。

MySQL是一个开源的关系型数据库，体积小但是速度和大型数据库相比毫不逊色。阿里巴巴使用的数据库便是MySQL，这证明即使是巨型的系统，MySQL也是有能力应付的。

4.2  模块的实现

4.2.1  失物板块

以卡片的形式显示所有用户发布的失物招领信息，可以按“遗失物品”和“拾取物品”两种进行展示，卡片上重点显示失物的图片和名称，保留并突出重要的信息，提高用户的检索效率。在宽屏设备上，每行显示四张卡片，在手机上，则每行只有一张卡片。

4.2.2  商品信息板块

显示所有用户发布的商品信息，每个商品都以卡片的形式展示。在初始状态下仅显示商品的图片、价格、名称、分类。保留并突出一个商品最重要的信息：图片、价格或名称，这样就能保持页面的整洁，让用户快速地找到自己感兴趣的商品，之后用户可以点击卡片上的图片查看所有商品相关的图片，点击描述查看商品的详细介绍，点击联系方式查看卖家的信息和联系方式。

4.2.3  校园新闻板块

以列表的形式展示所有管理员的文章，页面可以根据访问设备的不同自动适应，显示合适的排版，列表每页只加载每篇文章的标题信息，提高了页面载入的速度。在列表中，只能显示文章的配图、标题、作者、文章描述和发布日期。点击标题之后跳转到文章阅读页面，在这里才能看到文章的正文。文章阅读页面為了阅读而设计，内容显示在设备屏幕中间且只有屏幕60%的宽度，为用户提供更舒适的阅读体验。

4.2.4  用户状态管理

未登录的用户点击个人中心就会跳转到登录页面，在登录页面可以选择登录或者注册用户。注册账号需用户提供邮箱，在注册的时候会向数据库查询用户名是否重复，每个邮箱只能注册一次，并且作为用户的唯一识别标志。只要登录成功，就会跳转到用户个人中心，浏览器就会记住登录状态，下次再进入个人中心就不需要再登录了。这个功能是通过localStorage和Token实现的，需要特定权限才能访问的页面，其会解析检查权限是否符合，否则会跳转至登录页面。

4.2.5  个人资料管理

用户可以在这里设置、更改微信二维码图片、联系方式、昵称。如果没有设置昵称的话，用户发布的商品卡片和失物招领卡片就会显示为用戶名，反之则显示为用户昵称。但是在联系方式中，一定会显示为用户名。微信二维码图片是必须有的。系统将微信二维码视为第一联系方式，在商品卡片和失物招领卡片的联系方式区域，微信二维码是被重点突出显示的。

4.2.6  商品管理

用户在这里发布商品或外快。发布商品需要上传图片、填写商品的描述、设置商品的类型，商品的类型有电子产品、书籍和其他，比如瑜伽垫就属于其他类型。另外还有一类商品称之为“外快”，比如你有一个单反，你就可以在这里发布“外快”，提供拍照服务，这在毕业季是十分常见的一个需求。帮忙修图、帮忙设计海报等所有提供服务的信息都可以归为“外快”类型。点击创建按钮就会生成带有用户联系方式的商品卡片。用户可以将卡片发布、修改或者删除。

4.2.7  失物管理

创建和商品管理类似，但是失物信息在创建的同时就会发布，用户只能删除，并不能撤下自己的商品卡片或者修改自己的商品卡片。这样有利于缩短失物招领卡片的生命周期;快速创建并发布，找到了失物或失主就立刻删除。

4.2.8  管理员登录

和用户登录类似，但是出于安全性的考虑不提供管理员注册的功能，管理员的账号信息是通过平台创建时的配置文件生成的。登录之后就会跳转到管理员界面，在这里可以查看管理平台上所有内容、商品、失物招领、文章以及用户信息。以表格的方式呈现，方便管理员的检索和删除。

4.2.9  平台商品管理

用表格的方式显示所有商品，可以批量进行删除、冻结、恢复的操作。同时表格中提供了按商品种类显示的过滤器，用于显示不同类型的商品的。管理员是不能也不应该去修改用户所发布的内容的，管理员可以撤下商品，可以删除商品，但是不能修改用户写下的内容，维护平台的公正性是十分重要的，这同时也是对用户的尊重。

4.2.10  平台失物管理

用表格的方式显示所有失物，可以批量进行删除、冻结、恢复的操作。表格会显示失物的名称、描述、发布时间、发布者和其联系方式。值得一提的是用户在个人中心删除的失物招领信息，会显示在管理界面失物招领中的历史分区，作为存档，数据还是保存在服务器上的，直到管理员执行了删除操作，数据才会真正地消失。

4.2.11  平台文章管理

管理员可以以表格的方式查看平台上所有的文章，并以不同的状态（审核中、已发布、已撤回）来展示文章，通过点击就能对相应的文章进行编辑，也能对文章进行批量的删除、撤回、发布。

管理员也可以创建文章，需要上传一张以上的图片作为文章配图，还需要添加标题、文章简述、作者名称，以及最为重要的正文。点击“创建文章”按钮后，如果文章成功创建，就会跳转到编辑页面。

在编辑文章页面，文章处于审核状态，仅有管理员可以查看和修改。如果审核后可以发布，可以点击发布按钮，如果不进行发布，也可以点击删除直接丢弃文章。

5  结  论

一个校园信息平台，可以打破校园中的信息孤岛，让学生能更快速、更平等地获取校园资讯。信息传递更有效率，就意味着各种校园活动的举办会更加简单，各种通知的传达会更加到位，不需要关注一堆公众号，不需要来回翻看微信的聊天信息，在这个平台上可以方便地检索有关校园的所有资讯，也不需要四处拜托他人转发自己的失物招领信息，当信息能完整而简单地进行快速传递，学生就拥有了一个更加便捷的校园生活环境。

参考文献：

[1] 陈晓勇.MySQL DBA修炼之道 [M].北京：机械工业出版社，2017.

[2] 刘欢.HTML5基础知识、核心技术与前沿案例，与前沿案例 [M].北京：人民邮电出版社，2016.

[3] 李俊山，叶霞，罗蓉，等.数据库原理及应用（SQL Server）（第3版） [M].北京：清华大学出版社，2017.

[4] React. Getting Started [EB/OL].[2019-08-26].https：//reactjs.org/docs/getting-started.html.

[5] 阮一峰.React技术栈系列教程 [EB/OL].（2016-09-23）.http：//www.ruanyifeng.com/blog/2016/09/react-technology- stack.html.

作者简介：黄丹雄（1998-），男，汉族，广东汕尾人，本科，学士学位，研究方向：软件工程。