1. 程式人生 > 其它 >Vue實現線上考試系統

Vue實現線上考試系統

1.技術介紹
java+springboot+mysql+mybatis+Vue
開發工具:eclipse或idea
2.主要功能說明:
1)學生
註冊、登入、檢視試卷、開始考試、檢視成績、修改密碼
2)教師
學生資訊管理、試卷管理、試題管理、檢視學生成績、修改密碼
3)管理員
教師管理、學生管理、科目管理、檢視學生成績、試題管理、修改密碼、登出
3.部分程式碼展示:
註冊

```java
<template>
<div style="width: 30%;margin-left: 30%;margin-top:6%" id="bag">
<p style="text-align: center"><img src="../assets/images/logo.png" height="55"/></p>
<h3 style="text-align: center">學生註冊</h3>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="使用者名稱">
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="密碼">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item label="確認密碼">
<el-input v-model="form.password2" type="password"></el-input>
</el-form-item>
<el-form-item style="text-align: center">
<el-button type="primary" @click="onSubmit()">註冊</el-button>
<router-link type="primary" to="/login">
<el-button type="primary">登入</el-button>
</router-link>
</el-form-item>
</el-form>
</div>
</template>

<script>
import ElementUI from 'element-ui';
import axios from "axios";

export default {
name: "register",
data() {
return {
form: {
userName: '',
password: '',
password2: ''
}
}
},
methods: {
onSubmit() {
let userName = this.form.userName;
let password = this.form.password;
let password2 = this.form.password2;
if (userName === '' || userName === null) {
ElementUI.Message.error("請輸入使用者名稱!!");
return;
}
if (password === '' || password === null) {
ElementUI.Message.error("請輸入密碼!!");
return;
}
if (password2 === '' || password2 === null) {
ElementUI.Message.error("請輸入確認密碼!!");
return;
}
if (password !== password2) {
ElementUI.Message.error("密碼和確認密碼不一樣,請重新輸入!!");
return;
}
let _this = this;
let param = new URLSearchParams();
param.append("userName", userName);
axios
.post('http://localhost/user/findByUserName', param)
.then(function (response) {
if (response.data.success) {
let __this = _this;
let param2 = new URLSearchParams();
param2.append("userName", __this.form.userName);
param2.append("password", __this.form.password);
param2.append("type", "學生");
axios
.post('http://localhost/user/add', param2)
.then(function (response) {
if (response.data.success) {
ElementUI.Message.success("註冊成功");
__this.$router.push("/login");
}
})
.catch(function (error) {
alert(error);
console.log(error);
});
} else {
ElementUI.Message.error("使用者名稱已經存在,請重新輸入!!");
}
})
.catch(function (error) {
alert(error);
console.log(error);
});
}
}
}
</script>

<style scoped>
#bag{
background-color: #ffffff;
width:100%; //大小設定為100%
height:100%; //大小設定為100%
position:fixed;
background-size:100% 100%;
/*opacity:0.9;*/
}
.text{
color: red;
}
</style>

```
登入
<template>
<div style="width: 30%;margin-left: 30%; text-align: center;margin-top:200px; position: fixed" id="bag">
<p class=""><img src="../assets/images/logo.png" height="55"/></p>
<h3 style="text-align: center"><span style="color: #a768db">{{ form.type }}</span>登入</h3>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
<el-form-item label="使用者名稱" prop="userName" class="text">
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password" class="text">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item label="選擇身份">
<el-radio-group v-model="form.type">
<el-radio-button size="small" label="學生">學生 </el-radio-button>
<el-radio-button size="small" label="教師">教師 </el-radio-button>
<el-radio-button size="small" label="管理員">管理員</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item style="text-align: center">
<el-button type="primary" @click="onSubmit()">登入</el-button>
<router-link type="primary" to="/register">
<el-button type="primary">註冊</el-button>
</router-link>
</el-form-item>
</el-form>
</div>
</template>

<script>
import ElementUI from "element-ui";
import axios from "axios";

export default {
name: "login",
data() {
return {
form: {
userName: '',
password: '',
type: '學生'
},
rules: {
userName: [
{required: true, message: '請輸入使用者名稱', trigger: 'blur'},
],
password: [
{required: true, message: '請輸入密碼', trigger: 'blur'}
]
}
}
},
methods: {
//登入
onSubmit() {
if (this.form.userName === null || this.form.userName === '') {
ElementUI.Message.error("請輸入使用者名稱!");
return null;
}
if (this.form.password === null || this.form.password === '') {
ElementUI.Message.error("請輸入密碼!");
return null;
}
let _this = this;
let param = new URLSearchParams();
param.append("userName", this.form.userName);
param.append("password", this.form.password);
param.append("type", this.form.type);
axios
.post('http://localhost/user/login', param)
.then(function (response) {
let status = response.data.status;
let userId = response.data.userId;
if (status === 1) {
ElementUI.Message.success("登入成功!" + "(當前身份:" + _this.form.type + ")");
sessionStorage.setItem('token', status)
sessionStorage.setItem("userName", _this.form.userName);
sessionStorage.setItem("type", _this.form.type);
sessionStorage.setItem("userId", userId);
if (_this.form.type === '學生') {
_this.$router.push('/student');
} else if (_this.form.type === '教師') {
_this.$router.push('/teacher');
} else if (_this.form.type === '管理員') {
_this.$router.push('/manager');
}
} else {
ElementUI.Message.error("使用者名稱、密碼或身份錯誤,請重新輸入!");
}
})
.catch(function (error) {
console.log(error);
});
}
}
}
</script>

<style scoped>
#bag{
background-color: #ffffff;

width:100%; //大小設定為100%
height:100%; //大小設定為100%

position:fixed;
background-size:100% 100%;
/*opacity:0.9;*/
}
.text{
color: red;
}

</style>
4.系統演示地址
連結:https://pan.baidu.com/s/19griPlEhyOHBoSqE3Y36-w
提取碼:1qhz