专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

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

ins518 2024-11-26 03:57:43 技术文章 12 ℃ 0 评论


新增需求

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

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


项目运行

本地运行

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

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

虚拟机运行

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


前端页面的开发

CourseTasks.vue

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

视频讲解

>视频讲解合集,点击这里<

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表