基于Web前端的校园导航网站的设计与实现
来源:用户上传
作者:袁明瑾 王风硕
摘要：该文描述的基于web前端开发的面向高校学生群体的校园导航网站。根据需求，整个网站的开发分为导航模块、用户模块、聊天室模块、留言板模块四个部分。该文通过需求分析关键技术选型、可行性分析、模块功能设计，大概介绍本网站的设计和开发流程。
关键词：web前端;jQuery;导航网站;高校
中图分类号：TP311 文献标识码：A
文章编号：1009-3044（2021）36-0103-03
开放科学（资源服务）标识码（OSID）：
1 引言
随着信息技术在大学教育和生活上的应用，高校网站业务的拓展，许多大学生在校期间会都产生一批数量不少的特定网址的访问需求，这些需求在同校同系内部具有较大的相似性。而通过实时调研，将这一部分网页访问需求进行人工收集、整理、加工和更新，开发出一个可信度和实用度高的校园导航网站则能一定程度满足校园用户的网页查找和访问需求，提高用户对于校园网络生态的使用效率。因此，本网站将校园内所需要用到网络链接尽可能地整合在一起，同时增加网站聊天室和留言板功能，满足校园用户对于网址导航网站个性化、多元化需求的同时，提高用户的网站使用体验。
2 需求分析
立足于{研结果，本网站的受众群体主要是高校内的学生群体，该群体对于产品体验感要求较高。对于校园导航网站的设计，用户会更倾向于实用性强、界面美观、操作简便、可读性强的网页风格。对于主要的导航主页面，用户则具有自定义的需求。同时网站的目标学生群体具有较高的认知以及交流和反馈需求，针对其特征并结合项目本身的定位，为网站增加了博客、留言板和聊天室的功能，以便更好地增强用户体验。于是，将本次校园导航网站需求主要分为：导航链接的展示以及自定义编辑，用户的注册、登录和退出，用户信息的修改，网页留言板，网页聊天室等。
3 关键技术选型
本次开发过程中，网站的开发和建设运用前后端分离的方法，关键技术的选型如下：
jQuery是目前最流行的轻量级、兼容多浏览器的javascript函数库，具有丰富的DOM选择器，以及比原生javascript更高的代码可读性，极大简化了javascript的编程。对于Ajax有较好的支持，方便网页进行Ajax交互，能够极大简化javascript的编程。
Bootstrap兼容绝大多数目前的浏览器，是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍且目前最受欢迎的前端框架，内置的丰富的组件可供网站开发使用。
Ajax即异步 JavaScript 和 XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页、快速创建动态网页的技术。能够通过js发起异步请求，局部更新网站页面。在信息的传输优化以及数据的交换方面扮演着重要的角色。
MySQL是一个支持多种存储引擎的关系型数据库管理系统。它将数据保存在不同的表当中，增加了速度并提高了灵活性。同时它也是目前最为流行的开源数据库之一。
4 可行性分析
4.1 技术可行性
jQuery提供了便捷的JavaScript的设计模式，并且可以对CSS选择器进行扩展。在前端开发中，可以简化网页事件的处理，优化HTML文档操作和Ajax交互，开发者无需关注浏览器兼容性等问题而专注于处理业务逻辑，适用于本网站的便捷开发。
Bootstrap在大量项目中已经经过测试，有着较为成熟的性能，同时它拥有完善的参考手册，具有统一的编码风格，简单易写，上手容易，适用于本类型网站的开发。
Ajax是网站开发者容易上手的前后端交互技术，具有异步请求，局部刷新的特点，无需重新刷新页面，不会妨碍到用户浏览以及对于页面的其他操作，适用于本网站前后端的交互需求的实现。
MySQL支持多种操作系统，同时体积小、速度快，适合本网站的数据处理的需求。
综上，据现有技术条件，能够达到此次网站的建设要求，技术上可行。
4.2 经济可行性
对于此次网站的开发，代码编辑器使用的是Visual Studio Code，开发过程参照所需技术文档进行编写，错误检查和功能测试通过多个浏览器开发者工具进行，整体开发过程对硬件的配置要求不高，使用小型个人电脑即可。
同时网站的建设有利于提高学生的对于校园网络生态的体验感，提高学生的对于该校网络的熟悉程度和使用效率，获得间接性的网络收益。
综上，经济上可行。
5 功能模块设计
图1为本网站主要功能模块。
5.1 导航模块
5.1.1 展示
导航网站的首页网址展示，首页主界面按类别展示常用网址，首页的左边设置悬浮导航栏，用户根据需要点击，主界面进行对应上下跳转。首页底部显示动态欢迎信息同时展示校园基本信息、备案信息以及友情链接。
5.1.2 用户自定义
添加：用户点击自定义导航按钮，显示自定义导航模态框，用户输入想要自定义的导航名称、完整的导航地址、输入自定义描述，点击取消则关闭模态框，点击确定，向数据库中增加一条网址信息。自定义栏则可以显示用户保存的网站信息，当后台服务出现异常，包括服务停止，网络等问题，则新增数据失败，返回错误码。
删除：当用户点击删除按钮时，可对增加的网址进行单个删除或者全部删除。
5.2 用户模块
5.2.1 用户注册
用户点击注册按钮，显示注册模态框，用户输入规范的手机号、用户名、密码信息。当用户输入异常即输入已注册的手机号、不规范的手机号、用户名和密码，注册时进行对应提示。当用户规范输入，点击注册时，发送请求到服务端，服务端接收信息，数据库存储用户信息，新增一条用户信息，返回结果，注册成功。当后台服务异常，受影响无法正常将用户的注册信息传入数据库中时，返回错误码。
转载注明来源:https://www.xzbu.com/8/view-15425224.htm
