基于Vue的义务支教城镇村中小学教育网站

2022-12-08周城乐蔡尔曼陆梓豪刘泳茵郑晓培

现代计算机 2022年18期

周城乐，蔡尔曼，陆梓豪，刘泳茵，郑晓培

（广州新华学院信息科学学院，东莞 523000）

0 引言

大学生支教活动从1994年开始，已经持续了近三十年。目前来说支教学校暂未覆盖全面，人员方面也较少，因为有些学校较为偏僻，许多事情处理得并不完善；此外，物质条件相对艰苦，在一定程度上对支教人员、支教效果产生了不小的影响［1］。

该平台为支教这一活动带来更大的便捷。不仅能让大学生注册登录还能让社会人士注册登录，该平台有志愿者进行实地考察，以最真实的图片还原当地环境；志愿者会与当地人员沟通，并将情况如实更新在平台上，给予报名人更多的选择。此外，针对每一个地方的不同教学教材，该平台还可提供专门的培训，以便支教志愿者可以进行有针对性的备课。

1 相关技术

1.1 Vue框架

本平台使用的前端框架是当下应用较为广泛的Vue框架，它是一套构建用户界面的轻量级渐进式框架，基于数据驱动和组件化的思想构建前端页面，采用自底向上渐进式增量开发、设计［2］。通过MVVM模式（见图1）思想实现数据双向绑定，让数据操作更为简单。Vue框架的核心只关注视图层，其具有易使用性、灵活性、高性能等特点。若使用Vue框架的开发人员具有HTML、CSS以及JavaScript的基础，即可快速上手，简单易学。

其提供的API参考了各大主流框架，简单灵活并可以开发任意规模的应用，是目前应用广泛的前端首选框架。为了提升用户体验和界面的美观程度，本平台的前端开发引入了ElementUI开源的组件库，它是一套为前端开发者量身定做的组件库。它不依赖于Vue，是现阶段和Vue配合进行项目开发的一个较好的UI库，其中有许多现成的框架，可以节约编写样式的时间，并且大大提高编程速率［3］。

1.2 SpringBoot框架

SpringBoot框架是Java平台上的一种开源应用框架，它是基于Spring设计的全新开源轻量级框架。它继承了Spring的优良特性，自带Tomcat服务或Jetty等Servlet容器，简化Spring应用的开发及搭建过程，实现了自动配置。SpringBoot框架中有两个非常重要的策略：开箱即用和约定优于配置，SpringBoot提供了大量依赖包，无需配置文件即可实现大部分功能。同时根据软件设计标准提供给开发人员一个默认框架，减少了大量配置工作，并且可以自动完成代码编译、测试和打包等工作，极大地提高了开发效率［3］。本平台利用SpringBoot的优势进行后台管理系统的设计。

1.3 MySQL和Redis数据库

MySQL是Web应用方面最好的关系数据库管理应用软件之一。MySQL具有体积小、速度快、总体拥有成本低、源代码开源，支持多种操作系统等特点；核心程序采用完全的多线程编程，可以充分利用CPU。

Redis远程字典服务是一个高性能的keyvalue存储系统［4］，具有速度快、支持丰富数据类型、支持数据备份、持久化存储、操作原子性等特性。

2 平台功能设计与实现

2.1 总体设计

界面设计要符合人机界面设计的基本原则，保证网站的操作简单和细节透明，本平台界面采用单页面开发方式，使用Vue框架进行开发，搭配ElementUI进行界面美化。前端的功能面向用户，主要包括：首页页面、社区页面、用户信息页面、客服页面以及视频资源页面。后端则是连接数据库，与前端做数据交互。后端能对相关信息进行管理，包括信息的增、删、改、查等功能。前后端的具体设计模块如图2所示。

根据平台需求分析，该平台主要包括：热门信息、新闻查询、话题交流、用户信息、客服以及视频资源。

2.1.1 热门信息、新闻查询

进入该平台后可以根据各种支教活动的热门信息、新闻资讯、各大高校的信息来搜索支教学校。

2.1.2 话题交流

进入该页面并且登录成功后可以在该区域发表话题，分享教学以及生活方面的支教经验，为后续人员提醒；也可以分享支教趣事、校园风景等；还可在话题下进行评论，便于网友们在该页面实时交流心得体会等。

2.1.3 用户信息

进入该页面完成注册后，系统将识别用户的身份，区分是大学生还是社会人员，统一将信息录入后台。若是大学生，则会反馈出学校专门的页面，里面包含该学生所属学校发布的支教学校的相关信息，包括教师的住宿、入校通知、校园风光等，此外还包含该信息对应的学生学历、年级、专业等，对于已报名的学生，学校还会发布相应的任务；若是社会人员，则会包含个人信息的录入，收藏的视频、文章、学校，以及报名后所获得的任务。

2.1.4 视频

进入该页面可以获取许多对应支教学校的教学技巧、备课技巧等。

进入该页面后可以与该平台客服取得联系，使用者提出的问题，以及举报、投诉或者急救需求都能得到解决。

2.2 后端功能

2.2.1 用户信息管理

只有用户本人可在个人页面登录自己的个人信息，对个人信息进行增加、删除、查看、修改。

2.2.2 支教学校信息查询

对支教学校信息模板进行管理，以便于用户输入某个特定的词语时或者相关的词语时可以查询、筛选想要的信息。

2.2.3 热门新闻信息管理

后台人员对相关的热门信息、新闻进行发布、查看、删除、修改。

2.2.4 视频信息管理

后台人员对相关支教学校的相应视频进行分类式发布、删除、修改、查看。

要加快建设市级大宗农产品交易服务中心，集中力量搭建农产品物流信息平台，大力支持各类涉农电子商务平台和特色电子商务，加快发展农产品大市场、大流通。同时，大力发展现代物流网络，为农村产业融合奠定一个坚实的物质基础。

2.2.5 话题信息管理

用户可以发布、修改、删除、查询自己的话题或者评论。

2.3 前后端设计

前端设计了多个页面，将常见的功能都添加进来。前端使用Vue.js框架等前端语言编写，同时使用了ElementUI组件库来美化页面。

后台设置了信息管理等模块功能，应用Java语言编写，并利用Springboot框架的优良特性来提高编程效率。采用的是MySQL数据库。该系统共用到了五个数据表，分别是支教活动信息表（z_activities）、支教资讯列表（z_news）、用户信息表（z_users）、视频信息表（x_videos）和实践地信息表（z_address），使用主键相关联可以很好地提高空间利用率，也方便信息的增删改操作［5］。

2.4 系统实现

系统主要分为平台前端界面实现和后台管理两大部分。前端界面使用Vue.js实现，核心功能是为用户提供页面展示的信息、播放视频、信息查询、社区分享等功能页面。后台通过SpringBoot框架，利用Java语言和MySQL、Redis数据库进行开发。在数据库设计上，以MySQL为主，以Redis为辅，MySQL作为主存储，Redis用于缓存，加快系统的访问速度。视频播放、搜索功能等高性能需求使用Redis，而活动信息展示等不需要高性能的需求则使用MySQL［6］，以此来提高网站性能。服务接口API，实现前端界面与后台管理的直接交互。