当前位置：首页 > VUE

vue实现创建课程

2026-01-18 23:34:44VUE

Vue 实现创建课程功能

在 Vue 中实现创建课程功能通常涉及前端表单设计、数据绑定、API 调用等步骤。以下是具体实现方法：

创建课程表单组件

新建一个 Vue 组件用于课程创建，包含必要的表单字段：

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

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

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

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

设置数据模型和提交逻辑

在组件脚本部分定义数据模型和提交方法：

<script>
export default {
  data() {
    return {
      course: {
        name: '',
        description: '',
        price: 0,
        // 可根据需求添加更多字段
      }
    }
  },
  methods: {
    async submitCourse() {
      try {
        const response = await this.$http.post('/api/courses', this.course)
        // 处理成功响应
        this.$emit('course-created', response.data)
        this.resetForm()
        this.$toast.success('课程创建成功')
      } catch (error) {
        // 处理错误
        console.error('创建课程失败:', error)
        this.$toast.error('课程创建失败')
      }
    },
    resetForm() {
      this.course = {
        name: '',
        description: '',
        price: 0
      }
    }
  }
}
</script>

表单验证增强

可以添加更完善的表单验证：

<template>
  <!-- 原有表单代码 -->
  <span v-if="errors.name" class="error">{{ errors.name }}</span>
  <!-- 其他字段类似 -->
</template>

<script>
export default {
  data() {
    return {
      errors: {
        name: '',
        description: '',
        price: ''
      },
      // 原有course数据
    }
  },
  methods: {
    validateForm() {
      let isValid = true

      this.errors.name = this.course.name ? '' : '课程名称不能为空'
      if (this.errors.name) isValid = false

      // 其他验证规则

      return isValid
    },
    async submitCourse() {
      if (!this.validateForm()) return

      // 原有提交逻辑
    }
  }
}
</script>

使用 Vuex 管理状态

对于大型应用，可以使用 Vuex 管理课程状态：

// store/modules/courses.js
const actions = {
  async createCourse({ commit }, courseData) {
    try {
      const response = await api.post('/courses', courseData)
      commit('ADD_COURSE', response.data)
      return response.data
    } catch (error) {
      throw error
    }
  }
}

const mutations = {
  ADD_COURSE(state, course) {
    state.courses.push(course)
  }
}

然后在组件中调用：

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['createCourse']),
    async submitCourse() {
      try {
        await this.createCourse(this.course)
        // 成功处理
      } catch (error) {
        // 错误处理
      }
    }
  }
}
</script>

样式优化

添加基础样式提升用户体验：

<style scoped>
.course-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.error {
  color: red;
  font-size: 0.8em;
}
</style>