基于Java、SSM、HTML、Vue在线视频教学网课管理系统毕业设计，附源码
摘要
随着互联网技术的飞速发展，在线教育市场呈现出蓬勃的发展态势。本论文聚焦于在线视频教学网课管理系统的设计与实现，该系统基于Java语言，运用SSM（Spring + SpringMVC + MyBatis）框架构建后端服务，结合HTML与Vue技术搭建前端页面，旨在打造一个功能完备、操作便捷的网课管理平台。系统涵盖课程管理、用户管理、视频教学等核心功能模块。通过SSM框架实现业务逻辑的分层管理，提高系统的可维护性与扩展性；利用Vue的组件化开发模式，提升前端用户体验，实现动态交互效果。同时，系统注重数据的安全性与稳定性，采用合理的数据库设计存储课程、用户等各类数据。该在线视频教学网课管理系统的设计，为教育机构和教师开展线上教学提供了有力的支持，有助于提高教学效率，促进在线教育的发展。
实现的功能
系统分为管理员、媒体用户（上传视频）、观众用户，三种角色。
管理员：学生用户管理、教师用户管理、公告管理、分类管理、视频管理等；
学生用户：查看视频、查看公告、登录注册、收藏等；
教师用户：发布视频、登录注册等。
使用的技术
后端框架：SSM（Spring、SpringMVC、Mybatis），MySQL数据库、maven依赖管理等；
前端技术：Bootstrap、html、css、JavaScript、JQuery、VUE等。
部分代码展示
<template>
<div>
<div class="container">
<div class="login-form" style="backgroundColor:rgba(255,255,255,.5);borderRadius:10px">
<h1 class="h1" style="color:rgba(25, 169, 123, 1);fontSize:28px;">数据结构课程管理平台注册</h1>
<el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="120px">
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">学号</div>
<div class="input-container">
<input v-model="ruleForm.xuehao" class="input" type="text" placeholder="学号">
</div>
</div> -->
<el-form-item label="学号" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xuehao" autocomplete="off" placeholder="学号" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">学生姓名</div>
<div class="input-container">
<input v-model="ruleForm.xueshengxingming" class="input" type="text" placeholder="学生姓名">
</div>
</div> -->
<el-form-item label="学生姓名" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xueshengxingming" autocomplete="off" placeholder="学生姓名" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">手机</div>
<div class="input-container">
<input v-model="ruleForm.shouji" class="input" type="text" placeholder="手机">
</div>
</div> -->
<el-form-item label="手机" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">邮箱</div>
<div class="input-container">
<input v-model="ruleForm.youxiang" class="input" type="text" placeholder="邮箱">
</div>
</div> -->
<el-form-item label="邮箱" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.youxiang" autocomplete="off" placeholder="邮箱" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">教师工号</div>
<div class="input-container">
<input v-model="ruleForm.jiaoshigonghao" class="input" type="text" placeholder="教师工号">
</div>
</div> -->
<el-form-item label="教师工号" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.jiaoshigonghao" autocomplete="off" placeholder="教师工号" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">教师姓名</div>
<div class="input-container">
<input v-model="ruleForm.jiaoshixingming" class="input" type="text" placeholder="教师姓名">
</div>
</div> -->
<el-form-item label="教师姓名" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.jiaoshixingming" autocomplete="off" placeholder="教师姓名" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">职称</div>
<div class="input-container">
<input v-model="ruleForm.zhicheng" class="input" type="text" placeholder="职称">
</div>
</div> -->
<el-form-item label="职称" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.zhicheng" autocomplete="off" placeholder="职称" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">联系电话</div>
<div class="input-container">
<input v-model="ruleForm.lianxidianhua" class="input" type="text" placeholder="联系电话">
</div>
</div> -->
<el-form-item label="联系电话" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.lianxidianhua" autocomplete="off" placeholder="联系电话" type="text" />
</el-form-item>
<div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
<el-button class="btn" type="primary" @click="login()">注册</el-button>
<el-button class="btn close" type="primary" @click="close()">取消</el-button>
</div>
</el-form>
</div>
<!-- <div class="nk-navigation">
<a href="#">
<div @click="login()">注册</div>
</a>
</div> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
},
tableName:"",
rules: {}
};
},
mounted(){
let table = this.$storage.get("loginTable");
this.tableName = table;
},
methods: {
// 获取uuid
getUUID () {
return new Date().getTime();
},
close(){
this.$router.push({ path: "/login" });
},
// 注册
login() {
if((!this.ruleForm.xuehao) && `xuesheng` == this.tableName){
this.$message.error(`学号不能为空`);
return
}
if((!this.ruleForm.mima) && `xuesheng` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if(`xuesheng` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
this.$message.error(`手机应输入手机格式`);
return
}
if(`xuesheng` == this.tableName && this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){
this.$message.error(`邮箱应输入邮件格式`);
return
}
if((!this.ruleForm.jiaoshigonghao) && `jiaoshi` == this.tableName){
this.$message.error(`教师工号不能为空`);
return
}
if((!this.ruleForm.mima) && `jiaoshi` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if(`jiaoshi` == this.tableName && this.ruleForm.lianxidianhua&&(!this.$validate.isMobile(this.ruleForm.lianxidianhua))){
this.$message.error(`联系电话应输入手机格式`);
return
}
this.$http({
url: `${this.tableName}/register`,
method: "post",
data:this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "注册成功",
type: "success",
duration: 1500,
onClose: () => {
this.$router.replace({ path: "/login" });
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
};
</script>
正文到此结束
