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测试功能