目 录
摘 要 II
Abstract III
第1章 绪论 1
1.1 人工智能精品课程网站开发背景 1
1.2 人工智能精品课程网站现状分析 2
1.3 实现精品课程网站的意义 2
1.4 本文的主要工作 3
1.5 论文结构 3
第 2 章 网站概述以及涉及技术栈介绍 4
2.1 精品课程网站功能概述 4
2.2 精品课程网站开发目标 4
2.3 网站开发环境以及涉及技术栈介绍 4
2.3.1 开发环境 4
2.3.2 前端框架介绍 5
2.3.3 前端组件库介绍 5
2.3.4 Java语言介绍 6
2.3.5 后端开发框架介绍 7
2.3.6 持久层框架介绍 8
2.3.7 权限控制框架介绍 9
2.3.8 Ajax以及axios介绍 9
2.3.9 MySQL数据库介绍 11
2.4 网站结构介绍 12
第 3 章 精品课程网站需求分析及功能介绍 13
3.1 用户群体 13
3.2 需求分析 13
3.3 网站功能介绍 14
3.3.1 教学资源 14
3.3.2 课程建设 16
3.3.3 实践教学 17
3.3.4 教学成果 17
3.3.5 教学团队 18
3.3.6 用户管理 19
第4章 课程网站的设计及实现 20
4.1 后端项目结构分析 20
4.1.1 Java代码结构分析 20
4.1.2 resources文件结构分析 21
4.2 登录功能的实现分析 22
4.3 跨域资源共享(CORS)的分析及实现 22
4.4 文件上传的实现及分析 23
4.5 响应体的定义 24
4.6 axios的封装 25
4.7 前后端权限的控制分析 28
4.8 数据库设计及分析 31
4.8.1 数据库ER图分析 31
4.8.2 事务的分析 32
4.8.3 隔离级别的分析 33
4.8.4 MySQL对事务隔离的实现及分析 33
4.8.5 Spring Boot对事务隔离的实现及分析 34
第5章 系统测试与部署 36
5.1 软件测试概念及测试环境介绍 36
5.1.1 软件测试概念介绍 36
5.1.2 测试环境介绍 37
5.2 登录功能测试 37
5.3 文件上传及下载测试 38
5.3.1 上传测试 38
5.3.2 下载测试 38
5.4 Spring单元测试 39
5.5 系统的线上部署 40
5.5.1 前端项目部署 41
5.5.2 后端项目部署 42
第6章 总结与展望 43
6.1 工作总结 43
6.2 展望 43
致 谢 45
参 考 文 献 46
第 3 章 精品课程网站需求分析及功能介绍
3.1 用户群体
该网站面向的用户群体主要是老师和学生，由于不提供账号注册，所以需要管理员进行统一的账号注册以及后续的账号管理操作。
对于老师来说，其是教学活动的发起者，所以相关的课件，课程资料，教学大纲都需要由其本人进行填写相关表单，然后进行上传，其可以做到教学资源的新增及其管理。
对于学生来说，我们需要浏览相关课程的资料，对于Word文档或者PDF文档，可以在线预览并且能够下载。对于教学成果以及教学团队这两个模块，我们可以浏览老师上传的相关资料和介绍。
对于网站管理员来说，其拥有的权限仅能对老师和学生的账号进行操作，不能对相关课程资料进行操作，因为其只负责老师和学生的账号管理，课程资料的操作只能说老师来进行操作。
3.2 需求分析
现如今互联网发展如火如荼，我们的教育方式也应该与时俱进，在进行传统教学的同时，可以采用新兴的互联网进行补充，达到锦上添花，更上一层楼的效果。
为了方便我们学生获取课程资源，节省师生时间，在老师的指导下，开发了这个人工智能精品课程网站。开发这个网站的目的就是为了方便同学们获取优质的课程资源，我们不仅仅可以从该网站获取到课件，还可以获取到其他课程相关的资料。同时该网站也不仅仅是针对人工智能这一门课程进行开发的，老师可以上传其他课程的资料，是可以进行扩展的，尽量满足我们学生的所有课程需求。同时网站的设计还应美观大方，操作菜单逻辑清晰，对于老师和学生都应该易于使用，使其可以真正达到预期的使用效果
3.3 网站功能介绍
该网站主要分为6个模块，分为教学资源，课程建设，实践教学，教学成果，教学团队，用户管理。其中用户管理这一模块是管理员专门拥有的，而且管理员也只拥有这一模块。
3.3.1 教学资源
教学资源里面拥有7个子菜单，依次为：
（1）创建课程：
一门课程可以包含多个章节，每个章节都有课件，那么课程与章节的结构就是课件的归属信息，必须有对应的课程章节才能上传课件。课程这一实体类，是需要老师手动创建的，课程创建完毕后，本文转载自http://www.biyezuopin.vip/onews.asp?id=11102老师可以选择该课程进行章节创建。由于这里是对课程的创建，所有学生是没有权限访问这个子菜单的。页面如下：
图3.1 课程的创建
<template>
<div class="login-wrap">
<div class="ms-login">
<div class="ms-title">网络教学平台</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
<el-form-item prop="jobNo">
<el-input v-model="ruleForm.jobNo" placeholder="jobNo">
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
</el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</div>
<p class="login-tips">Tips : 初始密码 222</p>
</el-form>
</div>
</div>
</template>
<script>
import { Message, MessageBox } from 'element-ui'
export default {
data: function(){
return {
ruleForm: {
jobNo: null,
password: null
},
rules: {
jobNo: [
{ required: true, message: '请输入工号或者学号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if(valid){
this.postRequest('/api/login', {
username: this.ruleForm.jobNo,
password: this.ruleForm.password
}).then(resp=> {
if(resp.status == 200){
window.localStorage["token"] = resp.headers.token;
window.localStorage["username"] = resp.data.username;
window.localStorage["role"] = resp.data.role;
window.localStorage["jobNo"] = resp.data.jobNo;
window.localStorage["IP"] = resp.data.IP;
this.$router.push('/');
}else{
return false;
}
})
}
})
}
}
}
</script>
<style scoped>
.login-wrap{
position: relative;
width:100%;
height:100%;
background-image: url(../../assets/img/back.jpg);
background-size: 100%;
}
.ms-title{
color:#3a8ee6;
width:100%;
line-height: 50px;
text-align: center;
font-size:20px;
/* color: #fff; */
border-bottom: 1px solid #ddd;
}
.ms-login{
position: absolute;
left:50%;
top:50%;
width:350px;
margin:-190px 0 0 -175px;
border-radius: 5px;
background: rgba(255,255,255, 0.3);
overflow: hidden;
}
.ms-content{
padding: 30px 30px;
}
.login-btn{
text-align: center;
}
.login-btn button{
width:100%;
height:36px;
margin-bottom: 10px;
}
.login-tips{
font-size:12px;
line-height:30px;
color:#fff;
}
</style>
