当前位置：首页 > VUE

vue实现课程管理

2026-03-30 09:12:33VUE

Vue 实现课程管理系统的核心步骤

项目初始化 使用 Vue CLI 或 Vite 创建项目框架，安装必要依赖如 vue-router、axios、Element-UI（可选）。推荐目录结构按功能模块划分，例如：

src/
├── views/       # 页面组件
├── components/  # 公共组件
├── router/      # 路由配置
├── api/         # 接口封装
└── store/       # Vuex状态管理

路由配置 在 router/index.js 中定义课程管理相关路由，需包含课程列表、新增/编辑课程、详情页等路由。示例代码：

const routes = [
  {
    path: '/courses',
    component: () => import('@/views/CourseList.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/courses/create',
    component: () => import('@/views/CourseForm.vue')
  }
]

API 接口封装 在 api/course.js 中集中管理课程相关接口，使用 axios 进行 HTTP 请求封装：

import request from '@/utils/axios'

export const getCourseList = (params) => {
  return request.get('/api/courses', { params })
}

export const createCourse = (data) => {
  return request.post('/api/courses', data)
}

状态管理（可选） 对于复杂状态逻辑可使用 Vuex/Pinia。在 store/modules/course.js 中定义课程相关的 state、mutations 和 actions：

const state = {
  courses: []
}

const mutations = {
  SET_COURSES(state, courses) {
    state.courses = courses
  }
}

const actions = {
  async fetchCourses({ commit }) {
    const res = await getCourseList()
    commit('SET_COURSES', res.data)
  }
}

核心功能实现 课程列表页需实现分页查询、筛选功能。使用 Element-UI 表格组件示例：

<template>
  <el-table :data="courses">
    <el-table-column prop="name" label="课程名称"/>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button @click="handleEdit(row.id)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    @current-change="handlePageChange"
    :current-page="pagination.page"
    :page-size="pagination.size"
    :total="total"/>
</template>

表单验证 课程新增/编辑页需实现表单验证，推荐使用 VeeValidate 或 Element-Form 的内置验证：

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="课程名称" prop="name">
    <el-input v-model="form.name"/>
  </el-form-item>
  <el-form-item>
    <el-button @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

<script>
const rules = {
  name: [
    { required: true, message: '请输入课程名称', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在3到50个字符', trigger: 'blur' }
  ]
}
</script>

优化建议

使用动态导入实现路由懒加载
添加全局 loading 状态管理
对高频操作如删除添加确认对话框
实现基于角色的权限控制
使用 keep-alive 缓存课程列表页状态

技术选型参考方案

基础技术栈

Vue 3 + Composition API
TypeScript（可选）
Pinia/Vuex 4
Element Plus/Ant Design Vue

扩展功能

文件上传：使用 el-upload 组件实现课程封面上传
富文本编辑：集成 TinyMCE 或 WangEditor
数据可视化：使用 ECharts 展示课程统计报表
导出功能：通过 xlsx 库实现 Excel 导出

典型业务逻辑示例

课程状态管理 通过 computed 属性实现课程状态筛选：

const activeCourses = computed(() => {
  return courses.value.filter(item => item.status === 'active')
})

批量操作实现 在列表页实现批量选择操作：

vue实现课程管理

<el-table 
  :data="courses" 
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"/>
</el-table>

<script>
const selectedIds = ref([])
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id)
}
</script>