Web前端下校园导航网站设计探析

前言：想要写出一篇引人入胜的文章？我们特意为您整理了Web前端下校园导航网站设计探析范文，希望能给你带来灵感和参考，敬请阅读。

摘要：该文描述的基于web前端开发的面向高校学生群体的校园导航网站。根据需求，整个网站的开发分为导航模块、用户模块、聊天室模块、留言板模块四个部分。该文通过需求分析关键技术选型、可行性分析、模块功能设计，大概介绍本网站的设计和开发流程。

关键词：web前端；jQuery；导航网站；高校

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经济可行性

对于此次网站的开发，代码编辑器使用的是VisualStudioCode，开发过程参照所需技术文档进行编写，错误检查和功能测试通过多个浏览器开发者工具进行，整体开发过程对硬件的配置要求不高，使用小型个人电脑即可。同时网站的建设有利于提高学生的对于校园网络生态的体验感，提高学生的对于该校网络的熟悉程度和使用效率，获得间接性的网络收益。综上，经济上可行。

5功能模块设计

5.1导航模块

5.1.1展示导航网站的首页网址展示，首页主界面按类别展示常用网址，首页的左边设置悬浮导航栏，用户根据需要点击，主界面进行对应上下跳转。首页底部显示动态欢迎信息同时展示校园基本信息、备案信息以及友情链接。5.1.2用户自定义添加：用户点击自定义导航按钮，显示自定义导航模态框，用户输入想要自定义的导航名称、完整的导航地址、输入自定义描述，点击取消则关闭模态框，点击确定，向数据库中增加一条网址信息。自定义栏则可以显示用户保存的网站信息，当后台服务出现异常，包括服务停止，网络等问题，则新增数据失败，返回错误码。删除：当用户点击删除按钮时，可对增加的网址进行单个删除或者全部删除。

5.2用户模块

5.2.1用户注册。用户点击注册按钮，显示注册模态框，用户输入规范的手机号、用户名、密码信息。当用户输入异常即输入已注册的手机号、不规范的手机号、用户名和密码，注册时进行对应提示。当用户规范输入，点击注册时，发送请求到服务端，服务端接收信息，数据库存储用户信息，新增一条用户信息，返回结果，注册成功。当后台服务异常，受影响无法正常将用户的注册信息传入数据库中时，返回错误码。5.2.2用户登录。用户登录方便用户保存自定义链接，注册功能面向没有网站账号的用户，已经注册过的用户忽略此操作，直接进行登录。5.2.3注销退出。用户可以在登录成功后的网站首页右上角点击注销按钮。用户点击按钮即可注销，同时页面跳转到用户登录页面。受网络影响或服务停止无法正常实现注销，则返回错误码。5.2.4信息修改。当用户登录成功后在网站首页点击用户，跳转到用户管理界面，点击信息修改按钮，随即显示信息修改模态框，这时候可以修改新用户名以及更新密码，用户输入新用户名以及新密码，点击修改，没有出现异常则修改成功。用户操作异常时，提示用户做出修改。受网络影响或服务停止无法正常实现修改信息时，修改失败返回成功。

5.3留言板模块

5.3.1展示。用户在主页面点击顶部留言板导航键，进入相应模块界面，此时页面刷新，自动加载获取的文章数据，进行渲染，显示于页面，页面加载完毕用户就可以进行文章、留言的浏览。当页面加载未全部完成，数据加载失败时，返回错误码。5.3.2发布。用户点击文章编辑按钮，显示文章内容模态对话框，用户输入文本内容的标题及相应内容信息。用户编辑完成之后，点击模态对话框的发布按钮键进行文本发布。后台获取相应内容，页面加载更新文本数据。当出现服务异常，包括服务停止、网络等问题，数据新增失败，返回错误码。

5.4聊天室模块

5.4.1界面的展开收起。网页加载时，聊天室处于收起状态固定在网页右下角。当用户点击右下角收起状态界面，展开聊天室界面，界面半透明且固定在右下角，不影响用户继续浏览主界面。用户不用聊天室时候，点击收起按键，展开页面收起，显示收起栏状态。分别编写两个div:一个展开界面，另一个是收起界面。默认展示收起界面的div，当其中一个显示，另外一个隐藏，二者同时只能显示其一。当点击收起的div时，显示展开界面的div，同时将收起的div进行隐藏。点击收起按钮时，隐藏当前的，显示收起界面。5.4.2聊天角色选择。聊天室界面展开时，聊天室右侧展示角色栏，角色栏里有相应的聊天室角色信息，角色栏首行通过角色字体、背景颜色以及角色加上“我”字突出显示当前用户聊天使用角色。当用户想要更改聊天角色时，点击重新选择角色的按键，角色栏用户重新进行排序，更新首行用户使用角色名，同时用户已经发送的信息面板往左进行展示，此后发送信息的角色同时更改为当前角色。5.4.3消息发送。用户通过提示面板了解到直接到输入框输入信息。通过发送按键发送用户输入的信息到后端和展示面板。当检测到服务端发送的消息，通过dom发送到展示面板，展示接收的信息。同时用户每发送一次信息，消息面板盒的焦点对准到底部。当用户输入为空时，弹出警示提示框。5.4.4滑块导航。当消息面板接受到的消息量少时，用户不需要用到导航，导航键隐藏，当用户在消息面板内需要向上滑动消息浏览时，导航键随着滑动出现。点击导航按键焦点到底部，并隐藏导航按键，代码如图2所示。

6结束语

目前市面上的导航网站较多，但在许多细分领域（如校园内部）还涉及较少。不同高校会有不同的网址导航需求，但对于网站功能需求则具有一定的共通性。因此，本网站立足于用户在校园领域导航网站的个性化需求进行设计与开发，同时希望为从事高校网站的管理人员以及网址导航类网站未来的开发方向提供一定的思路。本文进行的基于web前端的校园导航网站，网站前端的基本雏形已经实现，用户在PC端可以查看浏览基本的网页链接，注册登录后可以进行导航网址自定义编辑，同时在聊天室发送信息，对话框进行展示，留言板发表信息等。同时，在开发过程中也有看到，网站还有许多仍待完善和优化的地方，例如页面路由可以尝试结合vue.js技术来更好地实现导航守卫等等。

参考文献：

[1]唐敏,孙九凌.校园网址导航分析研究[J].电脑知识与技术,2020,16(31):73-75.

[2]杨丰嘉,黄媛媛.基于Vue.js的在线商城网站设计与实现[J].工程技术研究,2020,2(8).

[3]郑宏艳,丁健,米长虹,黄治平,郑宏杰.农业环境类相关科研数据资源网址导航网站[J].科技经济导刊,2019,27(11):27-28.

[4]刘志洋.ajax技术在web程序开发中的运用探讨[J].轻纺工业与技术,2020,49(2):169-170.

作者:袁明瑾 王风硕 单位:成都锦城学院 计算机与软件学院