当前位置：首页 > VUE

vue实现课程管理系统

2026-01-21 18:24:23VUE

Vue实现课程管理系统的基本步骤

使用Vue框架实现课程管理系统需要结合前端开发技术和后端数据交互。以下是一个基本实现方案：

项目初始化 使用Vue CLI创建项目基础结构：

vue create course-management-system

安装必要依赖 需要安装Vue Router、Axios等核心库：

npm install vue-router axios element-ui

前端页面结构设计

课程列表页面 使用表格展示课程信息，包含分页和搜索功能：

<template>
  <el-table :data="courses" style="width: 100%">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="课程名称"></el-table-column>
    <el-table-column prop="teacher" label="授课教师"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

课程表单组件 实现课程添加和编辑功能：

<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="课程名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="授课教师">
      <el-input v-model="form.teacher"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

路由配置

配置前端路由实现页面导航：

vue实现课程管理系统

import { createRouter, createWebHistory } from 'vue-router'
import CourseList from './views/CourseList.vue'
import CourseForm from './views/CourseForm.vue'

const routes = [
  { path: '/', component: CourseList },
  { path: '/add', component: CourseForm },
  { path: '/edit/:id', component: CourseForm }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

数据交互实现

API服务封装 创建api.js文件封装所有数据请求：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:3000/api'
})

export default {
  getCourses() {
    return api.get('/courses')
  },
  addCourse(course) {
    return api.post('/courses', course)
  },
  updateCourse(id, course) {
    return api.put(`/courses/${id}`, course)
  },
  deleteCourse(id) {
    return api.delete(`/courses/${id}`)
  }
}

在组件中使用API 课程列表组件中获取数据：

import api from '../api'

export default {
  data() {
    return {
      courses: []
    }
  },
  created() {
    this.fetchCourses()
  },
  methods: {
    async fetchCourses() {
      try {
        const response = await api.getCourses()
        this.courses = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}

状态管理（可选）

对于复杂应用可以使用Vuex进行状态管理：

vue实现课程管理系统

import { createStore } from 'vuex'

export default createStore({
  state: {
    courses: []
  },
  mutations: {
    SET_COURSES(state, courses) {
      state.courses = courses
    }
  },
  actions: {
    async fetchCourses({ commit }) {
      const response = await api.getCourses()
      commit('SET_COURSES', response.data)
    }
  }
})

后端接口实现（示例）

使用Node.js和Express创建简单API：

const express = require('express')
const app = express()
app.use(express.json())

let courses = [
  { id: 1, name: 'Vue基础', teacher: '张老师' },
  { id: 2, name: 'React进阶', teacher: '李老师' }
]

app.get('/api/courses', (req, res) => {
  res.json(courses)
})

app.post('/api/courses', (req, res) => {
  const course = req.body
  course.id = courses.length + 1
  courses.push(course)
  res.status(201).json(course)
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

样式和UI优化

使用Element UI组件库快速构建美观界面：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')