基于微信小程序的在线学习系统设计与实现

本文链接：https://blog.csdn.net/qq_15801219/article/details/145651192

💗博主介绍：✌全网粉丝15W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者,计算机毕设实战导师。目前专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌
💗主要服务内容：免费功能设计、选题定题、开题报告、任务书、程序开发、论文编写和辅导、论文降重、程序讲解、答辩辅导等，欢迎咨询~
👇🏻 精彩专栏推荐订阅👇🏻
计算机毕业设计精品项目案例（持续更新）
🌟文末获取源码+数据库+文档🌟
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以和学长沟通，希望帮助更多的人

一.前言

在这里插入图片描述

随着互联网技术的不断进步和智能设备的普及，移动学习作为一种新兴的学习方式正逐渐成为教育领域的重要组成部分。然而，传统基于手机APP的在线学习平台和线下教学存在诸多弊端，如APP占用手机存储空间大、界面繁琐、操作复杂、学习资源单一等，无法满足用户多样化的学习需求。而微信小程序具有无需下载安装、即用即走、开发运营成本低、社交分享功能突出等优势，为移动学习平台的开发提供了新的契机。
本研究设计并实现了一个基于微信小程序的在线学习系统，以满足用户随时随地学习的需求。该系统集成了学习资源、课程作业、在线学习、学习论坛、公告通知等多个功能模块，为用户提供了便捷、高效、互动的学习体验。通过该系统，学生可以方便地选择课程进行学习和查看学习进度，进行考试测评，与其他用户进行互动、分享学习心得等，并管理个人信息。该系统采用前后端分离的设计架构，前端使用微信小程序框架进行开发，后端使用Java语言和相关框架进行开发，数据库采用MySQL进行数据存储和管理。该系统的实现为移动学习平台的开发提供了新思路和方法，也为教育领域的数字化转型贡献了一份力量。

二.技术环境

jdk版本：1.8 及以上
ide工具：Eclipse或者 IDEA，微信小程序开发工具
数据库: mysql5.7 （必须5.7）
编程语言: Java
java框架：SpringBoot
maven: 3.6.1
详细技术：HTML+CSS+JAVA+SpringBoot+MYSQL+VUE+MAVEN+微信开发工具

三.功能设计

本系统有三个角色：管理员、教师服务端和学生微信端，要求具备以下功能：
(a) 管理员；管理员使用本系统涉到的功能主要有：首页、学生、教师、课程名称、学习资源、课程作业、完成作业、作业评分、学生成绩、学习打卡、学习论坛、学习考试管理、考试试题管理、系统管理、在线考试管理、我的信息等功能。管理员用例图如图所示。
在这里插入图片描述

(b) 教师；教师使用本系统涉到的功能主要有：首页、学习资源、课程作业、完成作业、作业评分、学生成绩、学习打卡、学习论坛、学习考试管理、考试试题管理、在线考试管理、我的信息等功能。教师用例图如图所示。
在这里插入图片描述
© 学生；进入系统可以实现首页、学习资源、课程作业、在线考试、学习论坛、公告通知、我的等功能进行操作。学生用例图如图所示。

系统总体功能结构图如下所示：

程序上交给用户进行使用时，需要提供程序的操作流程图，这样便于用户容易理解程序的具体工作步骤，现如今程序的操作流程都有一个大致的标准，即先通过登录页面提交登录数据，通过程序验证正确之后，用户才能在程序功能操作区页面操作对应的功能。
在这里插入图片描述

四.数据设计

数据库概念模型的设计是为了抽象真实世界的信息，并对信息世界进行建模。它是数据库设计的强大工具。数据库概念模型设计可以通过E-R图描述现实世界的概念模型。而且Mysql数据库是自我保护能力比较强的数据库，限于篇幅要求，仅列出关键部分实体属性图和E-R图，如下所述。
在这里插入图片描述

系统总体E-R图如下图所示。
在这里插入图片描述

五.部分效果展示

5.1用户微信端功能实现效果

登录界面，首先双击打开微信小程序端系统，连上网络之后会显示出本系统的登录界面，这是进入小程序的第初始页面“登录”，能成功进入到该登录界面则代表小程序的开启是成功的，接下来就可以操作本系统所带有的其他所有的功能，如图所示。

在这里插入图片描述

系统首页是学生注册登录后进入的第一个界面，学生可通过小程序端首页进入对应的页面或者通过小程序最下面的那一行导航栏中的“首页、学习资源、课程作业、在线考试、学习论坛、公告通知、我的”，也可以点击“我的”进入我的页面，在我的页面可以对完成作业、专业评分、学生成绩、学习打卡、我的收藏、我要发帖、我的发帖等进行详细操作，如图所示。
在这里插入图片描述

学生点击学习资源，在学习资源页面的输入栏填写章节，进行搜索，还可以查看课程名称、章节、资料名称、图片、文件、上传时间、视频、教师工号、点击次数、收藏数等信息。还可以进行学习打卡、收藏等操作；如图所示。
在这里插入图片描述

学生点击课程作业，在课程作业页面的输入栏填写章节，进行搜索，然后查看课程名称、章节、封面、作业名称、作业内容、下发时间、教师工号、教师姓名等详情，还可以进行下载、提交作业等操作。如图所示。
在这里插入图片描述

在我的功能界面，学生点击“我的”进入我的页面，在我的页面可以对完成作业、专业评分、学生成绩、学习打卡、我的收藏、我要发帖、我的发帖等进行详细操作，如图所示。
在这里插入图片描述

5.2管理员服务端功能实现效果

管理员的登陆界面包括管理员的账号、密码，其中就是已有的账号，还有需要注册的账号。只要管理员在账号上注册，注册信息就会被录入 MySQL数据库，有一个资料库，只要输入成功，就可以登陆，然后进入主页的管理。管理员登录界面如图所示。
在这里插入图片描述

管理员登录到微信小程序的在线学习系统可以查看首页、学生、教师、课程名称、学习资源、课程作业、完成作业、作业评分、学生成绩、学习打卡、学习论坛、学习考试管理、考试试题管理、系统管理、在线考试管理、我的信息等功能进行详细操作，如图所示。
在这里插入图片描述

管理员点击学生；在学生页面输入学号、姓名、性别、手机、专业、头像、院系等信息，进行搜索，增加或删除学生信息等操作；如图所示。

在这里插入图片描述

管理员点击教师；在教师页面对教师工号、教师姓名、性别、职称、电话、头像等信息，进行搜索或增加、删除教师信息等操作；如图所示。
在这里插入图片描述

管理员点击学习资源；在学习资源页面输入课程名称、章节、资料名称、图片、文件、上传时间、视频、教师工号、点击次数、收藏数等信息，进行搜索、增加或删除学习资源等操作；如图所示。

在这里插入图片描述

管理员点击课程作业；在课程作业页面对课程名称、章节、封面、作业名称、作业内容、下发时间、教师工号、教师姓名等信息，进行搜索、增加或删除课程作业等操作；如图所示。

在这里插入图片描述

管理员点击完成作业；在完成作业页面对课程名称、章节、封面、作业名称、教师工号、教师姓名、作业答案、上交时间、学号、姓名等信息，进行搜索或删除完成作业等操作；如图所示。

在这里插入图片描述

管理员点击作业评分；在作业评分页面对作业名称、教师工号、教师姓名、学号、姓名、教师评分、评分时间等信息，进行搜索或删除作业评分等操作；如图所示。
在这里插入图片描述

管理员点击学生成绩；在学生成绩页面对学号、姓名、班级、课程名称、成绩、考试时间、教师工号、教师姓名、课程图片等信息，进行搜索、增加或删除学生成绩等操作；如图所示。
在这里插入图片描述

管理员点击学习论坛；在学习论坛页面对贴子标题、用户名、状态、是否置顶、置顶时间等信息，进行搜索、增加或删除学习论坛等操作；如图所示。

在这里插入图片描述

5.3教师服务端功能实现效果

教师登录系统后，可以对首页、学习资源、课程作业、完成作业、作业评分、学生成绩、学习打卡、学习论坛、学习考试管理、考试试题管理、在线考试管理、我的信息等功能进行相应操作，如图所示。
在这里插入图片描述

部分功能代码

	/**
	 * 上传文件
	 */
	@RequestMapping("/upload")
    @IgnoreAuth
	public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
		if (file.isEmpty()) {
			throw new EIException("上传文件不能为空");
		}
		String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
		File path = new File(ResourceUtils.getURL("classpath:static").getPath());
		if(!path.exists()) {
		    path = new File("");
		}
		File upload = new File(path.getAbsolutePath(),"/upload/");
		if(!upload.exists()) {
		    upload.mkdirs();
		}
		String fileName = new Date().getTime()+"."+fileExt;
        if(StringUtils.isNotBlank(type) && type.contains("_template")) {
            fileName = type + "."+fileExt;
            new File(upload.getAbsolutePath()+"/"+fileName).deleteOnExit();
        }
		File dest = new File(upload.getAbsolutePath()+"/"+fileName);
		file.transferTo(dest);
		if(StringUtils.isNotBlank(type) && type.equals("1")) {
			ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
			if(configEntity==null) {
				configEntity = new ConfigEntity();
				configEntity.setName("faceFile");
				configEntity.setValue(fileName);
			} else {
				configEntity.setValue(fileName);
			}
			configService.insertOrUpdate(configEntity);
		}
		return R.ok().put("file", fileName);
	}
	
	/**
	 * 登录
	 */
	@IgnoreAuth
	@RequestMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		YonghuEntity u = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuzhanghao", username));
		if(u==null || !u.getMima().equals(password)) {
			return R.error("账号或密码不正确");
		}
		
		String token = tokenService.generateToken(u.getId(), username,"yonghu",  "用户" );
		return R.ok().put("token", token);
	}
	/**
     * 注册
     */
	@IgnoreAuth
    @RequestMapping("/register")
    public R register(@RequestBody YonghuEntity yonghu){
    	//ValidatorUtils.validateEntity(yonghu);
    	YonghuEntity u = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuzhanghao", yonghu.getYonghuzhanghao()));
		if(u!=null) {
			return R.error("注册用户已存在");
		}
		Long uId = new Date().getTime();
		yonghu.setId(uId);
        yonghuService.insert(yonghu);
        return R.ok();
    }