vue实现课堂发布测试
使用Vue实现课堂发布测试功能
创建Vue项目并安装依赖
确保已安装Node.js和Vue CLI，通过以下命令创建项目：
vue create classroom-test
cd classroom-test
npm install axios vue-router element-ui配置路由和状态管理
在src/router/index.js中配置路由：
import Vue from 'vue'
import Router from 'vue-router'
import TestPublish from '../views/TestPublish.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/publish',
name: 'TestPublish',
component: TestPublish
}
]
})构建测试发布组件
创建src/views/TestPublish.vue组件：
<template>
<div class="test-publish">
<el-form :model="testForm" :rules="rules" ref="testForm">
<el-form-item label="测试标题" prop="title">
<el-input v-model="testForm.title"></el-input>
</el-form-item>
<el-form-item label="测试描述" prop="description">
<el-input type="textarea" v-model="testForm.description"></el-input>
</el-form-item>
<el-form-item label="截止时间" prop="deadline">
<el-date-picker
v-model="testForm.deadline"
type="datetime"
placeholder="选择截止时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">发布测试</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
testForm: {
title: '',
description: '',
deadline: ''
},
rules: {
title: [
{ required: true, message: '请输入测试标题', trigger: 'blur' }
],
deadline: [
{ required: true, message: '请选择截止时间', trigger: 'change' }
]
}
}
},
methods: {
submitForm() {
this.$refs.testForm.validate(valid => {
if (valid) {
this.publishTest()
}
})
},
async publishTest() {
try {
const response = await this.$axios.post('/api/tests', this.testForm)
this.$message.success('测试发布成功')
this.$router.push('/')
} catch (error) {
this.$message.error('发布失败: ' + error.message)
}
}
}
}
</script>配置API请求
在src/main.js中配置axios：
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import ElementUI from 'element-ui'
Vue.prototype.$axios = axios.create({
baseURL: 'http://your-api-server.com'
})
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')添加样式增强
在src/App.vue中添加基础样式：
<style>
.test-publish {
max-width: 800px;
margin: 20px auto;
padding: 20px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
</style>实现后端集成
确保后端API接口符合以下规范：
- POST
/api/tests接收测试数据 - 请求体格式：
{ "title": "字符串", "description": "字符串", "deadline": "ISO日期字符串" }
部署与测试
运行开发服务器进行测试：
npm run serve访问http://localhost:8080/publish测试功能
