2024年Day206，事件分发机制面试题

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 给之前的课程分类导入成功后添加路由跳转

---

【课程管理】模块需求

====================================================================

---

【课程管理】–添加课程–基本信息功能

============================================================================

一、设计数据库

---

下面的edu_teacher、edu_subject已经在上面的流程创建过了

• edu_course_description课程简介表

存储课程简介信息

CREATE TABLE edu_course_description (

id char(19) NOT NULL COMMENT ‘课程ID’,

description text COMMENT ‘课程简介’,

gmt_create datetime NOT NULL COMMENT ‘创建时间’,

gmt_modified datetime NOT NULL COMMENT ‘更新时间’,

PRIMARY KEY (id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=‘课程简介’;

Data for table “edu_course_description”

INSERT INTO edu_course_description VALUES (‘1104870479077879809’,‘

11

’,‘2019-03-11 06:23:44’,‘2019-03-11 06:23:44’),(‘1192252213659774977’,‘

测试

’,‘2019-11-07 09:27:33’,‘2019-11-13 16:21:28’),(‘14’,‘’,‘2019-03-13 06:04:43’,‘2019-03-13 06:05:33’),(‘15’,‘’,‘2019-03-13 06:03:33’,‘2019-03-13 06:04:22’),(‘18’,‘

本套Java视频完全针对零基础学员，课堂实录，自发布以来，好评如潮！Java视频中注重与学生互动，讲授幽默诙谐、细致入微，覆盖Java基础所有核心知识点，同类Java视频中也是代码量大、案例多、实战性强的。同时，本Java视频教程注重技术原理剖析，深入JDK源码，辅以代码实战贯穿始终，用实践驱动理论，并辅以必要的代码练习。

\n

------------------------------------

\n

视频特点：

\n

通过学习本Java视频教程，大家能够真正将Java基础知识学以致用、活学活用，构架Java编程思想，牢牢掌握"源码级"的Javase核心技术，并为后续JavaWeb等技术的学习奠定扎实基础。

1.通俗易懂，细致入微：每个知识点高屋建瓴，深入浅出，简洁明了的说明问题
2.具实战性：全程真正代码实战，涵盖上百个企业应用案例及练习
3.深入：源码分析，更有 Java 反射、动态代理的实际应用等
4.登录尚硅谷官网，技术讲师免费在线答疑

’,‘2019-03-06 18:06:36’,‘2019-10-30 19:58:36’);

• edu_video课程小节表

存储章节里面小节信息

CREATE TABLE edu_video (

id char(19) NOT NULL COMMENT ‘视频ID’,

course_id char(19) NOT NULL COMMENT ‘课程ID’,

chapter_id char(19) NOT NULL COMMENT ‘章节ID’,

title varchar(50) NOT NULL COMMENT ‘节点名称’,

video_source_id varchar(100) DEFAULT NULL COMMENT ‘云端视频资源’,

video_original_name varchar(100) DEFAULT NULL COMMENT ‘原始文件名称’,

sort int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘排序字段’,

play_count bigint(20) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘播放次数’,

is_free tinyint(1) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘是否可以试听：0收费 1免费’,

duration float NOT NULL DEFAULT ‘0’ COMMENT ‘视频时长（秒）’,

status varchar(20) NOT NULL DEFAULT ‘Empty’ COMMENT ‘Empty未上传 Transcoding转码中 Normal正常’,

size bigint(20) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘视频源文件大小（字节）’,

version bigint(20) unsigned NOT NULL DEFAULT ‘1’ COMMENT ‘乐观锁’,

gmt_create datetime NOT NULL COMMENT ‘创建时间’,

gmt_modified datetime NOT NULL COMMENT ‘更新时间’,

PRIMARY KEY (id),

KEY idx_course_id (course_id),

KEY idx_chapter_id (chapter_id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT COMMENT=‘课程视频’;

Data for table “edu_video”

INSERT INTO edu_video VALUES (‘1182499307429339137’,‘18’,‘32’,‘第一节’,‘’,‘’,0,0,0,0,‘’,0,1,‘2019-10-11 11:32:59’,‘2019-10-11 11:57:38’),(‘1185312444399071234’,‘14’,‘1’,‘12’,‘’,‘’,0,0,0,0,‘Empty’,0,1,‘2019-10-19 05:51:23’,‘2019-10-19 05:51:33’),(‘1189434737808990210’,‘18’,‘44’,‘测试’,‘’,‘’,1,0,0,0,‘Empty’,0,1,‘2019-10-30 14:51:55’,‘2019-10-30 14:51:55’),(‘1189471423678939138’,‘18’,‘1181729226915577857’,‘test’,‘2b887dc9584d4dc68908780ec57cd3b9’,‘视频’,1,0,0,0,‘Empty’,0,1,‘2019-10-30 17:17:41’,‘2019-10-30 17:17:41’),(‘1189476403626409986’,‘18’,‘1181729226915577857’,‘22’,‘5155c73dc112475cbbddccf4723f7cef’,‘视频.mp4’,0,0,0,0,‘Empty’,0,1,‘2019-10-30 17:37:29’,‘2019-10-30 17:37:29’),(‘1192252824606289921’,‘1192252213659774977’,‘1192252428399751169’,‘第一课时’,‘756cf06db9cb4f30be85a9758b19c645’,‘eae2b847ef8503b81f5d5593d769dde2.mp4’,0,0,0,0,‘Empty’,0,1,‘2019-11-07 09:29:59’,‘2019-11-07 09:29:59’),(‘1192628092797730818’,‘1192252213659774977’,‘1192252428399751169’,‘第二课时’,‘2a02d726622f4c7089d44cb993c531e1’,‘eae2b847ef8503b81f5d5593d769dde2.mp4’,0,0,1,0,‘Empty’,0,1,‘2019-11-08 10:21:10’,‘2019-11-08 10:21:22’),(‘1192632495013380097’,‘1192252213659774977’,‘1192252428399751169’,‘第三课时’,‘4e560c892fdf4fa2b42e0671aa42fa9d’,‘eae2b847ef8503b81f5d5593d769dde2.mp4’,0,0,1,0,‘Empty’,0,1,‘2019-11-08 10:38:40’,‘2019-11-08 10:38:40’),(‘1194117638832111617’,‘1192252213659774977’,‘1192252428399751169’,‘第四课时’,‘4e560c892fdf4fa2b42e0671aa42fa9d’,‘eae2b847ef8503b81f5d5593d769dde2.mp4’,0,0,0,0,‘Empty’,0,1,‘2019-11-12 13:00:05’,‘2019-11-12 13:00:05’),(‘1196263770832023554’,‘1192252213659774977’,‘1192252428399751169’,‘第五课时’,‘27d21158b0834cb5a8d50710937de330’,‘eae2b847ef8503b81f5d5593d769dde2.mp4’,5,0,0,0,‘Empty’,0,1,‘2019-11-18 11:08:03’,‘2019-11-18 11:08:03’),(‘17’,‘18’,‘15’,‘第一节：Java简介’,‘196116a6fee742e1ba9f6c18f65bd8c1’,‘1’,1,1000,1,100,‘Draft’,0,1,‘2019-01-01 13:08:57’,‘2019-10-11 11:26:39’),(‘18’,‘18’,‘15’,‘第二节：表达式和赋值语句’,‘2d99b08ca0214909899910c9ba042d47’,'7 - How Do I Find Time for My ',2,999,1,100,‘Draft’,0,1,‘2019-01-01 13:09:02’,‘2019-03-08 03:30:27’),(‘19’,‘18’,‘15’,‘第三节：String类’,‘51120d59ddfd424cb5ab08b44fc8b23a’,‘eae2b847ef8503b81f5d5593d769dde2.mp4’,3,888,0,100,‘Draft’,0,1,‘2019-01-01 13:09:05’,‘2019-11-12 12:50:45’),(‘20’,‘18’,‘15’,‘第四节：程序风格’,‘2a38988892d84df598752226c50f3fa3’,‘00-day10总结.avi’,4,666,0,100,‘Draft’,0,1,‘2019-01-01 13:09:05’,‘2019-10-11 09:20:09’);

• edu_course课程基本信息

存储课程基本信息

CREATE TABLE edu_course (

id char(19) NOT NULL COMMENT ‘课程ID’,

teacher_id char(19) NOT NULL COMMENT ‘课程讲师ID’,

subject_id char(19) NOT NULL COMMENT ‘课程专业ID’,

subject_parent_id char(19) NOT NULL COMMENT ‘课程专业父级ID’,

title varchar(50) NOT NULL COMMENT ‘课程标题’,

price decimal(10,2) unsigned NOT NULL DEFAULT ‘0.00’ COMMENT ‘课程销售价格，设置为0则可免费观看’,

lesson_num int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘总课时’,

cover varchar(255) CHARACTER SET utf8 NOT NULL COMMENT ‘课程封面图片路径’,

buy_count bigint(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘销售数量’,

view_count bigint(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘浏览数量’,

version bigint(20) unsigned NOT NULL DEFAULT ‘1’ COMMENT ‘乐观锁’,

status varchar(10) NOT NULL DEFAULT ‘Draft’ COMMENT ‘课程状态 Draft未发布 Normal已发布’,

is_deleted tinyint(3) DEFAULT NULL COMMENT ‘逻辑删除 1（true）已删除， 0（false）未删除’,

gmt_create datetime NOT NULL COMMENT ‘创建时间’,

gmt_modified datetime NOT NULL COMMENT ‘更新时间’,

PRIMARY KEY (id),

KEY idx_title (title),

KEY idx_subject_id (subject_id),

KEY idx_teacher_id (teacher_id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT COMMENT=‘课程’;

Data for table “edu_course”

INSERT INTO edu_course VALUES (‘1192252213659774977’,‘1189389726308478977’,‘1178214681139539969’,‘1178214681118568449’,‘java基础课程：test’,0.01,2,‘https://guli-file-190513.oss-cn-beijing.aliyuncs.com/cover/default.gif’,4,387,1,‘Normal’,0,‘2019-11-07 09:27:33’,‘2019-11-18 13:35:03’),(‘14’,‘1189389726308478977’,‘1101348944971091969’,‘1101348944920760321’,‘XHTML CSS2 JS整站制作教程课程学习’,0.00,3,‘http://guli-file.oss-cn-beijing.aliyuncs.com/cover/2019/03/13/d0086eb0-f2dc-45f7-bba1-744d95e5be0f.jpg’,3,44,15,‘Normal’,0,‘2018-04-02 18:33:34’,‘2019-11-16 21:21:45’),(‘15’,‘1189389726308478977’,‘1101348944971091969’,‘1101348944920760321’,‘HTML5入门课程学习’,0.00,23,‘http://guli-file.oss-cn-beijing.aliyuncs.com/cover/2019/03/13/22997b8e-3606-4d2e-9b4f-09f48418b6e4.jpg’,0,51,17,‘Normal’,0,‘2018-04-02 18:34:32’,‘2019-11-12 10:19:20’),(‘18’,‘1189389726308478977’,‘1178214681139539969’,‘1178214681118568449’,‘Java精品课程’,0.01,20,‘http://guli-file.oss-cn-beijing.aliyuncs.com/cover/2019/03/06/866e9aca-b530-4f71-a690-72d4a4bfd1e7.jpg’,151,737,6,‘Normal’,0,‘2018-04-02 21:28:46’,‘2019-11-18 11:14:52’);

• edu_chapter课程章节表

存储课程章节信息

CREATE TABLE edu_chapter (

id char(19) NOT NULL COMMENT ‘章节ID’,

course_id char(19) NOT NULL COMMENT ‘课程ID’,

title varchar(50) NOT NULL COMMENT ‘章节名称’,

sort int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘显示排序’,

gmt_create datetime NOT NULL COMMENT ‘创建时间’,

gmt_modified datetime NOT NULL COMMENT ‘更新时间’,

PRIMARY KEY (id),

KEY idx_course_id (course_id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT COMMENT=‘课程’;

Data for table “edu_chapter”

INSERT INTO edu_chapter VALUES (‘1’,‘14’,‘第一章：HTML’,0,‘2019-01-01 12:27:40’,‘2019-01-01 12:55:30’),(‘1181729226915577857’,‘18’,‘第七章：I/O流’,70,‘2019-10-09 08:32:58’,‘2019-10-09 08:33:20’),(‘1192252428399751169’,‘1192252213659774977’,‘第一章节’,0,‘2019-11-07 09:28:25’,‘2019-11-07 09:28:25’),(‘15’,‘18’,‘第一章：Java入门’,0,‘2019-01-01 12:27:40’,‘2019-10-09 09:13:19’),(‘3’,‘14’,‘第二章：CSS’,0,‘2019-01-01 12:55:35’,‘2019-01-01 12:27:40’),(‘32’,‘18’,‘第二章：控制台输入和输出’,0,‘2019-01-01 12:27:40’,‘2019-01-01 12:27:40’),(‘44’,‘18’,‘第三章：控制流’,0,‘2019-01-01 12:27:40’,‘2019-01-01 12:27:40’),(‘48’,‘18’,‘第四章：类的定义’,0,‘2019-01-01 12:27:40’,‘2019-01-01 12:27:40’),(‘63’,‘18’,‘第五章：数组’,0,‘2019-01-01 12:27:40’,‘2019-01-01 12:27:40’),(‘64’,‘18’,‘第六章：继承’,61,‘2019-01-01 12:27:40’,‘2019-10-09 08:32:47’);

---

二、各表之间的关系

---

表与表之间的关系分：一对一、一对多、多对多

三、添加课程分析

---

添加课程–编辑课程基本信息功能细节分析

四、使用代码生成器生成课程相关代码

---

@Test

public void run() {

// 1、创建代码生成器

AutoGenerator mpg = new AutoGenerator();

// 2、全局配置

GlobalConfig gc = new GlobalConfig();

String projectPath = System.getProperty(“user.dir”);

gc.setOutputDir(“D:\JavaStudy\gulixueyuan\guli_parent\service\service_edu” + “/src/main/java”); //输出目录

gc.setAuthor(“achang”); //作者名

gc.setOpen(false); //生成后是否打开资源管理器

gc.setFileOverride(false); //重新生成时文件是否覆盖

gc.setServiceName(“%sService”); //去掉Service接口的首字母I

gc.setIdType(IdType.ID_WORKER_STR); //主键策略

gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型

gc.setSwagger2(true);//开启Swagger2模式

mpg.setGlobalConfig(gc);

// 3、数据源配置

DataSourceConfig dsc = new DataSourceConfig();

dsc.setUrl(“jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8”);

dsc.setDriverName(“com.mysql.cj.jdbc.Driver”);

dsc.setUsername(“root”);

dsc.setPassword(“00000”);

dsc.setDbType(DbType.MYSQL);

mpg.setDataSource(dsc);

// 4、包配置

PackageConfig pc = new PackageConfig();

//生成包：com.achang.eduservice

pc.setModuleName(“eduservice”); //模块名

pc.setParent(“com.achang”);

//生成包：com.achang.oss.controller

pc.setController(“controller”);

pc.setEntity(“entity”);

pc.setService(“service”);

pc.setMapper(“mapper”);

mpg.setPackageInfo(pc);

// 5、策略配置

StrategyConfig strategy = new StrategyConfig();

strategy.setInclude(“edu_course”,“edu_chapter”,“edu_course_description”,“edu_video”);//根据数据库哪张表生成，有多张表就加逗号继续填写

strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略

strategy.setTablePrefix(pc.getModuleName() + “_”); //生成实体时去掉表前缀

strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略

strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作

strategy.setRestControllerStyle(true); //restful api风格控制器

strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符

mpg.setStrategy(strategy);

// 6、执行

mpg.execute();

}

也在service_edu模块中

所以只需要修改对应的数据库表：

"edu_course","edu_chapter","edu_course_description","edu_video"

因为课程简介是依赖于课程的，所以删掉EduCourseDescriptionController

---

五、【添加课程信息】—后端实现

---

1、创建vo类封装表单提交数据

@ApiModel(value = “课程基本信息”, description = “编辑课程基本信息的表单对象”)

@Data

public class CourseInfoForm implements Serializable {

private static final long serialVersionUID = 1L;

@ApiModelProperty(value = “课程ID”)

private String id;

@ApiModelProperty(value = “课程讲师ID”)

private String teacherId;

@ApiModelProperty(value = “课程专业ID”)

private String subjectId;

@ApiModelProperty(value = “课程标题”)

private String title;

@ApiModelProperty(value = “课程销售价格，设置为0则可免费观看”)

private BigDecimal price;

@ApiModelProperty(value = “总课时”)

private Integer lessonNum;

@ApiModelProperty(value = “课程封面图片路径”)

private String cover;

@ApiModelProperty(value = “课程简介”)

private String description;

}

---

2、编写controller和service部分

• controller

@RestController

@RequestMapping(“/eduservice/edu-course”)

@CrossOrigin //解决跨域问题

public class EduCourseController {

@Autowired

private EduCourseService eduCourseService;

//添加课程基本信息方法

@PostMapping(“/addCourseInfo”)

public R addCourseInfo(@RequestBody CourseInfoForm courseInfoForm){

eduCourseService.saveCourseInfo(courseInfoForm);

return R.ok();

}

}

• service接口

public interface EduCourseService extends IService {

//添加课程基本信息方法

void saveCourseInfo(CourseInfoForm courseInfoForm);

}

• serviceImpl

@Service

public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {

//课程描述注入

@Autowired

private EduCourseDescriptionService eduCourseDescriptionService;

@Override

public void saveCourseInfo(CourseInfoForm courseInfoForm) {

//向课程表里面添加课程基本信息

//CourseInfoForm对象 转换成 EduCourse对象

EduCourse eduCourse = new EduCourse();

BeanUtils.copyProperties(courseInfoForm,eduCourse);

int result = baseMapper.insert(eduCourse);

if (result<=0){//表示添加失败

throw new AchangException(20001,“添加课程信息失败”);

}

//想课程简介表里面添加课程简介

EduCourseDescription eduCourseDescription = new EduCourseDescription();

eduCourseDescription.setDescription(courseInfoForm.getDescription());

eduCourseDescriptionService.save(eduCourseDescription);

}

}

3、测试

注意Entity中EduCourse和EduCourseDescription加入：不然报错

• 这里测试需要先将edu_course/subject_parent_id设置为可为null先

• 测试

启动8001，访问：http://localhost:8001/swagger-ui.html

• 上面两个表中出现一个问题，就是课程描述和课程信息没有关联

• 修改serviceImpl代码

@Service

public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {

//课程描述注入

@Autowired

private EduCourseDescriptionService eduCourseDescriptionService;

@Override

public String saveCourseInfo(CourseInfoForm courseInfoForm) {

//向课程表里面添加课程基本信息

//CourseInfoForm对象 转换成 EduCourse对象

EduCourse eduCourse = new EduCourse();

BeanUtils.copyProperties(courseInfoForm,eduCourse);

int result = baseMapper.insert(eduCourse);

if (result<=0){//表示添加失败

throw new AchangException(20001,“添加课程信息失败”);

}

//获取添加之后课程信息的id

String cid = eduCourse.getId();

//想课程简介表里面添加课程简介

EduCourseDescription eduCourseDescription = new EduCourseDescription();

eduCourseDescription.setDescription(courseInfoForm.getDescription());

//手动设置描述课程表的id，与上面的课程信息表id关联

eduCourseDescription.setId(cid);

eduCourseDescriptionService.save(eduCourseDescription);

return cid;

}

}

• 修改EduCourseDescription的id生成策略，设置为手动输入

• 修改controller，添加返回课程id

@RestController

@RequestMapping(“/eduservice/edu-course”)

@CrossOrigin //解决跨域问题

public class EduCourseController {

@Autowired

private EduCourseService eduCourseService;

//添加课程基本信息方法

@PostMapping(“/addCourseInfo”)

public R addCourseInfo(@RequestBody CourseInfoForm courseInfoForm){

//返回添加之后课程id，为了后面添加大纲使用

String id = eduCourseService.saveCourseInfo(courseInfoForm);

return R.ok().data(“courseId”,id);

}

}

• 修改service,返回String

public interface EduCourseService extends IService {

//添加课程基本信息方法

String saveCourseInfo(CourseInfoForm courseInfoForm);

}

• 重启8001，再次测试

---

六、【添加课程信息】—前端实现

---

1、配置路由

1）、添加路由

//课程信息管理

{

path: ‘/course’,

component: Layout,

redirect: ‘/course/list’,

name: ‘课程管理’,

meta: { title: ‘课程管理’, icon: ‘nested’ },

children: [

{

path: ‘list’,

name: ‘课程列表’,

component: () => import(‘@/views/edu/course/list.vue’),

meta: { title: ‘课程列表’, icon: ‘table’ }

},

{

path: ‘info’,

name: ‘添加课程’,

component: () => import(‘@/views/edu/course/info.vue’),

meta: { title: ‘添加课程’, icon: ‘nested’ }

},

{

path: ‘info/:id’,

name: ‘EduCourseInfoEdit’,

component: () => import(‘@/views/edu/course/info.vue’),

meta: { title: ‘编辑课程基本信息’, noCache: true },

hidden: true

},

{

path: ‘chapter/:id’,

name: ‘EduCourseChapterEdit’,

component: () => import(‘@/views/edu/course/chapter.vue’),

meta: { title: ‘编辑课程大纲’, noCache: true },

hidden: true

},

{

path: ‘publish/:id’,

name: ‘EduCoursePublishEdit’,

component: () => import(‘@/views/edu/course/publish.vue’),

meta: { title: ‘发布课程’, noCache: true },

hidden: true

}

]

},

---

2）、添加vue组件

---

2、整合步骤条组件–步骤导航流程

参考http://element-cn.eleme.io/#/zh-CN/component/steps

1）、课程信息页面

info.vue

.

发布新课程

<el-steps

:active=“1”

process-status=“wait”

align-center

style="margin-

bottom: 40px;"

<el-button :disabled=“saveBtnDisabled” type=“primary” @click=“next”

保 存并下一步</el-button

2）、课程大纲页面

chapter.vue

.

发布新课程

<el-steps

:active=“2”

process-status=“wait”

align-center

style="margin-

bottom: 40px;"

<el-button @click=“previous”>上一步

<el-button :disabled=“saveBtnDisabled” type=“primary” @click=“next”

下 一步</el-button

3）、课程发布页面

publish.vue

.

发布新课程

<el-steps

:active=“3”

process-status=“wait”

align-center

style="margin-

bottom: 40px;"

<el-button @click=“previous”>返回修改

<el-button :disabled=“saveBtnDisabled” type=“primary” @click=“publish”

发布课程</el-button

---

七、添加课程信息—编辑课程基本信息

---

1、前端实现

1）、定义api

import request from ‘@/utils/request’ //引入已经封装好的axios 和 拦截器

export default{

//添加课程信息功能

addCourseInfo(courseInfo){

return request({

url:“/eduservice/edu-course/addCourseInfo”,

method: ‘post’,

data: courseInfo,

})

}

}

2）、组件模板

.

发布新课程

<el-steps

:active=“1”

process-status=“wait”

align-center

style="margin-

bottom: 40px;"

<el-input

v-model=“courseInfo.title”

placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"

/>

<el-input-number

:min=“0”

v-model=“courseInfo.lessonNum”

controls-position=“right”

placeholder=“请填写课程的总课时数”

/>

<el-input-number

:min=“0”

v-model=“courseInfo.price”

controls-position=“right”

placeholder=“免费课程请设置为0元”

/>

元

<el-button

:disabled=“saveBtnDisabled”

type=“primary”

@click=“saveOrUpdate”

保存并下一步</el-button

---

2、讲师下拉列表显示

1）、组件模板

guli-admin\src\views\edu\course\info.vue

<el-option

v-for=“teacher in teacherLists”

:key=“teacher.id”

:label=“teacher.name”

:value=“teacher.id”

2）、定义api

src\api\teacher\course.js

//查询所有讲师

getAllTeacher(){

return request({

url:“/eduservice/edu-teacher/findAll”,

method: ‘get’,

})

}

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ver: “”,

price: 0,

},

};

},

methods: {

saveOrUpdate() {

course.addCourseInfo(this.courseInfo).then(resp => {

this.$message({

message: “添加课程信息成功”,

type: “success”,

})

//跳转到第二步，并带着这个课程生成的id

this.$router.push({ path: “/course/chapter/”+resp.data.courseId });

});

},

},

created() {},

};

---

2、讲师下拉列表显示

1）、组件模板

guli-admin\src\views\edu\course\info.vue

<el-option

v-for=“teacher in teacherLists”

:key=“teacher.id”

:label=“teacher.name”

:value=“teacher.id”

2）、定义api

src\api\teacher\course.js

//查询所有讲师

getAllTeacher(){

return request({

url:“/eduservice/edu-teacher/findAll”,

method: ‘get’,

})

}

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-htRHVb6Q-1714814479984)]
[外链图片转存中…(img-AlokmF3l-1714814479984)]