教育平台项目前端：视频讲解

新增需求

完成课时模块的添加、修改、内容回显的前端页面开发。

前后端接口联调：完成与后台接口的对接，实现对课时内容进行操作。

项目运行

本地运行

使用 IntelliJ Idea 打开 edu_work 项目；配置 Tomcat 服务器的部署方式为 war；配置 Tomcat 服务器的本地图片上传目录；运行 lagou_edu_home。

使用 VS Code 打开 edu-boss 项目，然后打卡命令行运行 npm run serve。

虚拟机运行

分别打包好后台项目和前端项目，然后分别部署到虚拟机中的两个不同的 tomcat 目录中，先运行后台再运行前端项目。

前端页面的开发

CourseTasks.vue

新增两个按钮：添加课时按钮、编辑课时按钮。新增一个对话框：对话框中包含一个表单，表单用于显示添加或修改课时的信息。Vue 的 data 中增加数据：addLessonForm - 跟表单绑定的课时信息 Map 类型；rules - 表单校验规则 Map 类型；showAddLesson - 是否显示对话框的布尔值。Vue 的生命周期 created 钩子函数中为 addLessonForm 获取课程 id 和课程名。Vue 的 methods 中新增方法：handleShowAddLessonDialog(section) - 显示添加课时表单，回显课时信息；handleShowEditLessonDialog(lessonNode) - 显示修改课时表单，回显课时信息；handleAddLesson() - 添加 & 修改课时操作。

视频讲解

视频讲解合集链接

1_前端页面开发代码

2_部署前后端项目到虚拟机

3_对课时内容进行操作

想了解更多，欢迎关注我的微信公众号：Renda_Zhang