基于web前端的校内信息发布系统的设计与实现

邓钧瀚 白俊鸽 四川大学 锦城学院

1 引言

近年来随着科技和经济的迅速发展，我国的个人电脑与智能手机的普及率迅速增长，给人们带来了巨大的科技福利，并使信息的传播变得更为迅速。渐渐许多高校也开始建立了独立的校内信息发布系统，以满足校内学生，教员之间的信息通讯以及重要信息的发布，以助于巨大地提升了校园内部交流的速率与质量。根据同样的情况，我们也将开发一款基于网页适用于手机端和个人电脑端的校内信息发布系统。

2 web前端开发技术的选择

2.1 主要的一些开发技术

近几年来，前端技术的发展十分迅速，适用于不同种类的技术不断井喷式发展。对于前端UI框架而言，最为主流的技术是由Twitter开发的Bootstrap3开源工具包。该技术良好地解决了不同分辨率的适应问题，十分适合于开发适合个人电脑端与手机端的网页布局。Vue的入门比较轻松，上手会很迅速，只要学过前端的基础知识人都可以马上开始使用，十分适合新手使用，所以在本系统中我们便选择了这款技术进行开发。我们基于最基本的Html，CSS和JavaScript再加上前面所述的两种框架共同开发了这款校内信息发布系统。

2.2 Bootstrap3框架的概念和大致使用

本系统主要使用了Bootstrap3框架中的栅格系统对于不同分辨率用户端的响应式布局。这一系统十分便利，而且类是可以复用，极大地提升了开发的效率。该框架中的表单，button等工具类也十分方便，直接使用这些类减去了花费在UI上的开发时间。如果在自己对于UI方面不是特别擅长，开发者也可以在网上寻找适合的基于该框架的网页免费开源模板，再进行适当的修改，便可以帮助自己完成对于网页布局的开发。

2.3 Vue框架的概念和大致使用

Vue框架是一款渐进式的JavaScript框架，即自底向上的增量式开发框架。在该系统中，主要运用了该框架的响应式的数据绑定功能，以及对于部分模板的复用，这些特性使该网页端系统实现了响应的特性。同时我们也应用了该框架的数据绑定的特性实现了网页与网页之间的数据通信。此外，Vue框架的compute模块也实现了翻页部件中动态对于CSS元素动态更改，使得用户体验更加完善。

3 主要功能描述

该校内信息发布系统支持使用的教员与学生登录和注册新账户，并在登录成功后跳转到信息模块进行信息发布评论以及查看发布信息下评论等主要功能。用户可以看到其他发布者和评论者的公开信息，以及对于个人信息更新。

3.1 登录注册页面

该界面中由上往下为等待使用者输入的ID号码，密码，以及数字验证码这三个表单。注册模态框内显示ID，Nickname，密码，确认密码和E-mail的表单信息，以及立即注册按钮。找回密码模态框内应显示注册E-mail，E-mail验证码和新密码的三个表单以及发送验证码，更改密码的按钮。

3.2 信息展示页面

本页面内的主要内容为信息类别条，信息发布功能栏，已发布信息展示框。其中已发布信息展示框中需要显示的内容应为发布者Nickname，time，所在分类，标题，简版发布内容，查看详情按钮和翻页条。在触发查看详情按钮后，浮现出对应发布信息的具体内容的模态框。模态框内需要显示和以上相同的内容外还会增加关于评论的信息（评论时间，评论内容，以及评论者的Nickname）和翻页条。

3.3 个人信息页面

本页的主要显示用户的个人信息包括ID，Nickname，e-mail，通讯地址和更改个人信息按钮。

4 功能的具体实现

4.1 Ajax数据通信模块

该模块的功能是网页与php服务器之间基于http协议的通讯和数据传输。该校内信息发布系统中几乎所有的功能都会需要这一模块的相应支持，以完成与服务器之间的数据传输。首先我们需要和服务器端约定好通信的接口规范和初始化与服务器通信时需要用的服务器地址URL。之后我们需要建立一个新XMLHttpRequest并进行一些必要的设置。以上完成后，再拼装好符合通信接口规范的Json数据，并通过send()发送到之前初始化过的服务器地址。然后再进行对于服务器返回信息的监听，通过之前的规范判断数据传输是否成功，成功后进行对于json数据的解析。此时可以运用console类中的log()功能函数对于数据传输细节进行查看，方便开发前期以及后期维护时对于问题的跟踪。

4.2 注册界面

在用户点击注册button后，对于表单中的内容进行提取，然后在本地利用正则表达式判断所填内容的合法性，然后对比密码和重复密码是否相同。如果以上步骤出现输入内容非法或者两次密码不同，弹出信息框对用户进行相应提示。如果合法性判定成功，便将密码转化为md5加密数据并将其他表单数据和已加密密码拼接转化为json数据，再通过ajax通信模块发送到服务器。在收到服务器发送的包后，通过服务器返回报头判定注册是否完成。如果判定结果为成功，当前页加载到登陆界面并提示注册成功信息给用户。若分析后结果为失败，显示出服务器提供的具体有关问题的内容。

4.3 登陆界面

在用户填完账号，密码和验证码后点击登陆按钮，被触发函数将会提取表单中的内容并将利用以打封装好的md5类对密码进行加密。前面的步骤完成后，组装符合登陆指令的json数据并通过通信模块发送到服务器端。收到服务器返回指令后，对比数据包头和规定协议以判断登陆是否完成。如果登陆完成，跳转到信息展示页面并将登陆状态信息存储到sessionStorage中，如果返回指令显示登陆失败，提示用户失败具体信息并清空表单中密码一栏内的数据。

4.4 数据显示

打开数据展示页面后，立即启动数据显示函数，该函数将会根据当前的页面分类信息拼接json数据，并通过数据通信模块向发送请求以获取已发布信息的数据。在接收到服务器返回的json后，将收到的json进行字符串化，并存入sessionStorage[3]。通过Vue的模板方法，数据绑定，以及if功能提取sessionStorage数据并显示前十条发布信息在该页面。翻页条在点击翻页后使用Vue框架中的compute模块计算下一页应显示数据的序列号。根据计算好的序列号在之前存储在sessionStorage的数据中匹配到应显示的发布数据并通过Vue的set功能进行动态地修改目标页面的文本内容。在使用者按下查看详情按钮后，获取目标所在发布信息的ID并显示出该发布信息ID对应的详情信息到新的模态框中。以上完成后，通过数据通信模块获取当前的发布信息所对应评论数据，并通过Vue模板显示到当前模态框中。

4.5 信息发布

获取当前用户登陆信息和发布信息的表单中的数据打包成对应json数据，并使用通讯模块发送到服务器。成功时，提示使用者信息发布成功并再次调用数据显示模块刷新当前界面的信息。如果返回数值显示失败，便向使用者显示相应失败的具体信息。

4.6 评论

获取用户当前用户登陆信息和评论信息后，将其打包成对应的json数据，并使用通讯模块发送到服务器。如果成功，提示用户评论发布成功并重新调用数据显示模块刷新当前模态框评论信息。若服务器的返回数值表示评论不成功，当即向用户显示服务器返回的具体情况信息。

4.7 个人信息查看

从sessionStorage中获取当前用户的登陆信息并将ID打包成对应的json数据发送到服务器。当收到服务器回发的Json包后，将包转化为字符串并通过Vue动态写入到当前的模态框中。点击发布信息中他人的Nickname时可以通过以上的相同步骤并获取对应用户的可以对外个人信息。

4.8 其他附加功能

在信息显示主页面的上方点击注销，可以清除sessionStorage中的登陆信息以及其他用户有关信息，再退出该系统并回到登录的页面。

5 结语

本文主要介绍了相较于其他开发平台web前端的高效开发优势，网页界面的构建，Bootstrap栅格系统如何用于布局，Vue框架如何实现web动态页面和如何一步一步完成校内信息发布系统网页端的构建。