项目概述
这里给大家分享一个前后端分离的项目,该项目是一个课程管理系统,项目主要分为教师端和学生端,教师可以添加课程,设置,以及对学生进行打分,学生可以查看课程列表进行选课,并可以检查自己的所选课程,以及查看动态生成的课表。
成绩部分未完善、该项目可以作为模板二次开发,不建议直接使用是之前练手的项目部分功能接口以及数据库有瑕疵
项目效果图
学生模块
登录首页
用户注册
学生登录首页
学生选课入口
本人课程列表与课表展示页面
我的成绩
用户信息
教师模块
登录
教师端首页
所授课程页面
ps: 点击所授课程有时候列表出不来 ctrl +r 刷新一下就可以了
课程对应学生列表以及打分页面
注:所授课程页面点击学生列表按钮跳转至该页面
录取课程
用户信息
源码
私
登录部分源代码分享
<template>
<el-main>
<el-form
:model="ReginForm"
class="regform"
label-width="0">
<h3>教师登录</h3>
<el-form-item prop="username">
<el-input
type="text"
v-model="ReginForm.username"
placeholder="工号">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="ReginForm.password"
placeholder="密码">
</el-input>
</el-form-item>
<!--
<img :src="src" id="img-vcode" @click="getImage" :key="key">
<label>
<div class="label-text">验证码:</div>
<input type="text" v-model="ReginForm.code" name="vcode" style="width: 100px">
</label> -->
<el-form-item >
<el-button
type="success"
class="submitBtn"
round
@click.native.prevent="submit">
教师端登录
</el-button>
<el-button
type="primary"
class="resetBtn"
round
@click.native.prevent="reset">
重置
</el-button>
<hr>
<p>返回学生登录 <span class="to" @click="tologin">点我</span></p>
</el-form-item>
</el-form>
</el-main>
</template>
<script>
const axios = require('axios');
export default {
data () {
return {
ReginForm: {
username: '84656',//工号
password: '123456',//密码
code:'',
},
}
},
created(){
//this.getImage();//获取验证码
},
methods: {
// ...
submit () {
axios.post('/teacher/login',this.ReginForm)
.then(response=>{
console.log(response);
console.log(response.data);
if(response.data.msg=='username is null'){
this.$message.warning("用户名错误");
return;
}
if(response.data.msg=='password is error'){
this.$message.warning("密码错误");
return;
}
if(response.data.msg=='success'){
console.log('conso');
console.log(response.data.data);
window.sessionStorage.setItem('flag','ok');
window.sessionStorage.setItem("teacherList",JSON.stringify(response.data.data));
console.log("session");
console.log(window.sessionStorage.getItem("teacherList"));
this.$message.success("登陆成功!!!")
this.$router.push({path:'/thome'});
}
})
},
//重置
reset () {
this.$refs.ReginForm.resetFields()
},
//返回登录页
tologin () {
this.$router.push('/login')
}
}
}
</script>
<style scoped>
.regform {
margin: 150px auto;
width: 400px;
height: 300px;
background: #fff;
box-shadow: 0 0 10px #B4BCCC;
padding: 30px 30px 0 30px;
border-radius: 25px;
}
.submitBtn {
width: 65%;
}
.to {
color: #FA5555;
cursor: pointer;
}
</style>