![e0461ccccbbc4425a5a44fd2c6948790.png](https://i-blog.csdnimg.cn/blog_migrate/c17ba4bf045be85c5a37045ea8715b6d.jpeg)
新增需求
完成课时模块的添加、修改、内容回显的前端页面开发。
前后端接口联调:完成与后台接口的对接,实现对课时内容进行操作。
项目运行
本地运行
使用 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()
- 添加 & 修改课时操作。
视频讲解
知乎视频www.zhihu.com想了解更多,欢迎关注我的微信公众号:Renda_Zhang