计算机毕业设计 381的在线课程购买学习系统vue 毕设

第5章 系统详细设计

一、技术路线：

开发语言：Java

前端技术：JavaScript、VUE.js（2.X）、css3

数据库：MySQL 5.7

数据库管理工具：Navicat或sqlyog

开发工具：IDEA或Ecplise

二、项目介绍：

https://www.bilibili.com/video/BV1Ab4y1K7TZ/

三、运行截图：

3.1前台首页功能模块

在线学习系统 ，在系统首页可以查看首页、课程信息、付费资料、积分商品、解疑论坛、试卷列表、系统公告、留言反馈、个人中心、后台管理等内容，如图3-1所示。

图3-1系统功能界面图

    登录、学生注册，在学生注册页面可以填写学号、密码、学生姓名、联系电话等信息进行注册、登录，如图3-2所示。

图3-2登录、学生注册界面图

课程信息，在课程信息页面通过填写课程名称、课程编号、课程类别、图片、课程视频、课程内容等信息进行提交，如图3-3所示。在付费资料页面通过填写课程编号、课程名称、资料名称、资料图片、价格、内容等信息进行购买操作，如图3-4所示。

图3-3课程信息界面图

图3-4付费资料界面图

3.2管理员功能模块

管理员登录，通过填写注册时输入的用户名、密码、角色进行登录，如图3-5所示。

图3-5管理员登录界面图

管理员登录进入在线学习系统可以查看首页、个人中心、学生管理、课程分类管理、课程信息管理、付费资料管理、资料购买管理、资料发送管理、学生积分管理、学生积分增加管理、学生积分扣减管理、商品分类管理、积分商品管理、积分兑换管理、解疑论坛、试卷管理、留言板管理、试题管理、系统管理、考试管理等信息。

学生管理，在学生管理页面中可以通过填写学号、密码、学生姓名、性别、出生日期、联系电话等内容进行修改、删除，如图3-6所示。还可以根据需要对课程信息管理进行添加，修改或删除等详细操作，如图3-7所示。

图3-6学生管理界面图

图3-7课程信息管理界面图

付费资料管理，在付费资料管理页面中可以填写课程编号、课程名称、资料名称、资料图片、价格、内容等信息，并可根据需要对已有付费资料管理进行修改或删除等操作，如图3-8所示。

图3-8付费资料管理界面图

学生积分管理，在学生积分管理页面中可以填写学号、学生姓名、积分、备注等信息，并可根据需要对已有学生积分管理进行修改或删除等详细操作，如图3-9所示。

图3-9学生积分管理界面图

学生积分增加管理，在学生积分增加管理页面中可以查看学号、学生姓名、积分、增加原因、日期等内容，并且根据需要对已有学生积分增加管理进行详情，修改或删除等详细操作，如图3-10所示。

图3-10学生积分增加管理界面图

积分兑换管理，在积分兑换管理页面中可以查看商品编号、商品名称、所需积分、学号、学生姓名、兑换申请、收货地址、联系电话、审核回复、审核状态、审核等内容，并且根据需要对已有积分兑换管理进行详情，修改或删除等详细操作，如图3-11所示。

图3-11积分兑换管理界面图

解疑论坛，在解疑论坛页面中可以查看帖子标题、用户名、状态等内容，并且根据需要对已有解疑论坛进行详情，修改或删除等详细操作，如图3-12所示。

图3-12解疑论坛界面图

轮播图；该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除操作，如图3-13所示。

图3-13轮播图管理界面图

3.3学生功能模块

学生登录进入在线学习系统可以查看首页、个人中心、资料购买管理、资料发送管理、学生积分管理、学生积分增加管理、学生积分扣减管理、积分兑换管理、我的收藏管理、考试管理等内容。

学生积分管理，在学生积分管理页面中通过填写学号、学生姓名、积分、备注等信息，还可以根据需要对学生积分管理进行修改、删除如图3-14所示。

图3-14学生积分管理界面图

学生积分增加管理，在学生积分增加管理页面中可以查看学号、学生姓名、积分、增加原因、日期等信息内容，并且根据需要对已有学生积分增加管理进行修改或删除等其他详细操作，如图3-15所示。

图3-15学生积分增加管理界面图

资料购买管理，在资料购买管理页面中通过填写课程编号、课程名称、资料名称、价格、学号、学生姓名、购买日期、是否支付、审核回复等内容进行详情、删除，如图3-16所示。

图3-16资料购买管理界面图

积分兑换管理，在积分兑换管理页面中可以查看商品编号、商品名称、所需积分、学号、学生姓名、兑换申请、收货地址、联系电话、审核回复、审核状态、审核等内容，并且根据需要对已有积分兑换管理进行详情、删除等详细操作，如图3-17所示。

图3-17积分兑换管理界面图