当前位置：首页 > VUE

vue实现创建课程

2026-02-19 15:57:36VUE

创建课程功能实现

在Vue中实现创建课程功能，需要结合表单处理、数据绑定和后端交互。以下是实现方案：

基础组件结构

创建课程表单组件基本结构：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="courseName">课程名称</label>
      <input id="courseName" v-model="course.name" type="text" required>
    </div>

    <div>
      <label for="description">课程描述</label>
      <textarea id="description" v-model="course.description"></textarea>
    </div>

    <div>
      <label for="price">课程价格</label>
      <input id="price" v-model.number="course.price" type="number" min="0">
    </div>

    <button type="submit">创建课程</button>
  </form>
</template>

数据绑定与验证

初始化课程数据和验证规则：

<script>
export default {
  data() {
    return {
      course: {
        name: '',
        description: '',
        price: 0,
        category: ''
      },
      errors: {}
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.course.name) this.errors.name = '课程名称必填'
      if (this.course.price < 0) this.errors.price = '价格不能为负数'
      return Object.keys(this.errors).length === 0
    }
  }
}
</script>

表单提交处理

处理表单提交并调用API：

methods: {
  async handleSubmit() {
    if (!this.validateForm()) return

    try {
      const response = await axios.post('/api/courses', this.course)
      this.$emit('course-created', response.data)
      this.resetForm()
    } catch (error) {
      console.error('创建课程失败:', error)
    }
  },

  resetForm() {
    this.course = {
      name: '',
      description: '',
      price: 0,
      category: ''
    }
  }
}

增强功能实现

添加课程封面图片上传：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <img v-if="previewImage" :src="previewImage" alt="课程封面预览">
  </div>
</template>

<script>
methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    this.course.coverImage = file

    // 创建预览
    const reader = new FileReader()
    reader.onload = (e) => {
      this.previewImage = e.target.result
    }
    reader.readAsDataURL(file)
  }
}
</script>

使用Vuex管理状态

在store中定义课程相关actions：

// store/modules/courses.js
const actions = {
  async createCourse({ commit }, courseData) {
    try {
      const formData = new FormData()
      Object.keys(courseData).forEach(key => {
        formData.append(key, courseData[key])
      })

      const response = await axios.post('/courses', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      commit('ADD_COURSE', response.data)
      return response.data
    } catch (error) {
      throw error.response.data
    }
  }
}

组件优化建议

使用vee-validate进行表单验证：

<ValidationObserver v-slot="{ handleSubmit }">
<form @submit.prevent="handleSubmit(submit)">
 <ValidationProvider rules="required" v-slot="{ errors }">
   <input v-model="course.name" type="text">
   <span>{{ errors[0] }}</span>
 </ValidationProvider>
</form>
</ValidationObserver>

添加加载状态反馈：

data() {
return {
 isLoading: false
}
},
methods: {
async handleSubmit() {
 this.isLoading = true
 try {
   await this.$store.dispatch('createCourse', this.course)
 } finally {
   this.isLoading = false
 }
}
}

使用Element UI等组件库增强UI：

vue实现创建课程

<el-form :model="course" :rules="rules" ref="form">
<el-form-item label="课程名称" prop="name">
 <el-input v-model="course.name"></el-input>
</el-form-item>
<el-button type="primary" :loading="isLoading" @click="submitForm">
 创建课程
</el-button>
</el-form>

以上实现方案涵盖了从基础表单创建到状态管理的完整流程，可根据实际项目需求进行调整和扩展。