vue实现课程管理
Vue 实现课程管理系统的核心步骤
环境准备与项目搭建
使用 Vue CLI 或 Vite 创建项目，安装必要依赖（如 Vue Router、Axios、Element UI 等）。通过 npm init vue@latest 或 npm create vite@latest 初始化项目结构。
路由配置与页面划分
在 router/index.js 中定义路由，例如课程列表、添加课程、编辑课程等页面：
const routes = [
{ path: '/', component: CourseList },
{ path: '/add', component: AddCourse },
{ path: '/edit/:id', component: EditCourse }
];状态管理（可选）
使用 Pinia 或 Vuex 管理课程数据状态。定义 courses 状态和对应操作（增删改查）：
// Pinia 示例
export const useCourseStore = defineStore('courses', {
state: () => ({ courses: [] }),
actions: {
async fetchCourses() {
this.courses = await axios.get('/api/courses');
}
}
});API 接口封装
通过 Axios 封装后端接口调用，统一处理请求和响应：
// api/course.js
export const getCourses = () => axios.get('/api/courses');
export const addCourse = (data) => axios.post('/api/courses', data);核心组件开发
- 课程列表组件：展示表格数据，包含分页和搜索功能。
- 表单组件：复用表单组件处理添加/编辑逻辑，通过
v-model绑定数据。 - 删除操作：添加确认对话框和接口调用。
表单验证
使用 Vuelidate 或 Element UI 的校验规则：
rules: {
courseName: [{ required: true, message: '请输入课程名', trigger: 'blur' }]
}样式与布局
采用 Flex 或 Grid 布局，结合 UI 库（如 Element UI）快速构建界面。确保响应式设计适配不同设备。
部署与优化
- 打包生成静态文件：
npm run build - 配置 Nginx 或 Docker 部署
- 启用路由的 History 模式需服务器端支持
关键代码示例
课程列表表格
<template>
<el-table :data="courses">
<el-table-column prop="name" label="课程名称" />
<el-table-column label="操作">
<template #default="scope">
<el-button @click="editCourse(scope.row.id)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>表单提交逻辑
const submitForm = async () => {
try {
await addCourse(formData);
router.push('/');
} catch (error) {
console.error('提交失败', error);
}
};
