南阳网站排名优化公司,网站安全建设方案总结,天津市建设工程质量协会网站,怎样建个人网站文章目录一.需求分析二.API接口三.后端1.Dao2.Service3.Controller4.测试四.前端1.页面原型说明1#xff09;添加按钮2#xff09;视图部分3#xff09;在数据模型中添加如下变量4#xff09;定义表单提交方法和重置方法2.Api调用1#xff09;定义 api方法2#xff09;调…
文章目录一.需求分析二.API接口三.后端1.Dao2.Service3.Controller4.测试四.前端1.页面原型说明1添加按钮2视图部分3在数据模型中添加如下变量4定义表单提交方法和重置方法2.Api调用1定义 api方法2调用 api3.测试一.需求分析
用户操作流程 1、进入课程计划页面点击“添加课程计划” 2、打开添加课程计划页面输入课程计划信息
一级二级三级跟节点大章节小章节
上级结点 不填写的情况下 不选择上级结点表示当前添加的课程计划的父节点为课程的根结点此时使用当前课程的courseid去查询根节点具体信息当然包括根节点的id。 若此时找不到根节点则要自动添加课程的根结点。 点击提交。
二.API接口
文件位置xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java
ApiOperation(添加课程计划)
public ResponseResult addTeachplan(Teachplan teachplan);三.后端
1.Dao
文件位置EduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\TeachplanRepository.java
public interface TeachplanRepository extends JpaRepositoryTeachplan, String {
//定义方法根据课程id和父结点id查询出结点列表可以使用此方法实现查询根结点
public ListTeachplan findByCourseidAndParentid(String courseId,String parentId);
}2.Service
文件位置xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\CourseService.java
Transactional
public ResponseResult addTeachplan(Teachplan teachplan) {if(teachplan null ||StringUtils.isEmpty(teachplan.getPname()) ||StringUtils.isEmpty(teachplan.getCourseid())){ExceptionCast.cast(CommonCode.INVALID_PARAM);}//课程idString courseid teachplan.getCourseid();//父结点的idString parentid teachplan.getParentid();if(StringUtils.isEmpty(parentid)){//获取课程的根结点parentid getTeachplanRoot(courseid);}//查询根结点信息OptionalTeachplan optional teachplanRepository.findById(parentid);Teachplan teachplan1 optional.get();//父结点的级别String parent_grade teachplan1.getGrade();//创建一个新结点准备添加Teachplan teachplanNew new Teachplan();//将teachplan的属性拷贝到teachplanNew中BeanUtils.copyProperties(teachplan,teachplanNew);//要设置必要的属性teachplanNew.setParentid(parentid);if(parent_grade.equals(1)){teachplanNew.setGrade(2);}else{teachplanNew.setGrade(3);}teachplanNew.setStatus(0);//未发布teachplanRepository.save(teachplanNew);return new ResponseResult(CommonCode.SUCCESS);
}//获取课程的根结点
public String getTeachplanRoot(String courseId){OptionalCourseBase optional courseBaseRepository.findById(courseId);if(!optional.isPresent()){return null;}CourseBase courseBase optional.get();//调用dao查询teachplan表得到该课程的根结点一级结点ListTeachplan teachplanList teachplanRepository.findByCourseidAndParentid(courseId, 0);if(teachplanList null || teachplanList.size()0){//新添加一个课程的根结点Teachplan teachplan new Teachplan();teachplan.setCourseid(courseId);teachplan.setParentid(0);teachplan.setGrade(1);//一级结点teachplan.setStatus(0);teachplan.setPname(courseBase.getName());teachplanRepository.save(teachplan);return teachplan.getId();}//返回根结点的idreturn teachplanList.get(0).getId();}3.Controller
文件位置xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\CourseController.java
Override
PostMapping(/teachplan/add)
public ResponseResult addTeachplan(RequestBody Teachplan teachplan) {return courseService.addTeachplan(teachplan);
}4.测试
复杂一些的业务逻辑建议写完服务端代码就进行单元测试。
使用swagger-ui或postman测试上边的课程计划添加接口。
四.前端
1.页面原型说明
文件位置xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\page\course_manage\course_plan.vue
1添加按钮
el-button typeprimary clickteachplayFormVisible true添加课程计划/el-button2视图部分
添加课程计划采用弹出窗口组件Dialog在course_plan.vue页面添加添加课程计划的弹出窗口代码 el-dialog title添加课程计划 :visible.syncteachplayFormVisible el-form refteachplanForm :modelteachplanActive label-width140px stylewidth:600px; :rulesteachplanRules el-form-item label上级结点 el-select v-modelteachplanActive.parentid placeholder不填表示根结点el-optionv-foritem in teachplanList:keyitem.id:labelitem.pname:valueitem.id/el-option/el-select/el-form-itemel-form-item label章节/课时名称 proppnameel-input v-modelteachplanActive.pname auto-completeoff/el-input/el-form-itemel-form-item label课程类型 el-radio-group v-modelteachplanActive.ptypeel-radio classradio label1视频/el-radioel-radio classradio label2文档/el-radio/el-radio-group/el-form-itemel-form-item label学习时长分钟 请输入数字 el-input typenumber v-modelteachplanActive.timelength auto-completeoff /el-input/el-form-itemel-form-item label排序字段 el-input v-modelteachplanActive.orderby auto-completeoff /el-input/el-form-itemel-form-item label章节/课时介绍 propdescriptionel-input typetextarea v-modelteachplanActive.description /el-input/el-form-itemel-form-item label状态 propstatusel-radio-group v-modelteachplanActive.status el-radio classradio label0 未发布/el-radioel-radio classradio label1已发布/el-radio/el-radio-group/el-form-itemel-form-item el-button typeprimary v-on:clickaddTeachplan提交/el-buttonel-button typeprimary v-on:clickresetForm重置/el-button/el-form-item/el-form/el-dialog3在数据模型中添加如下变量
data() {return {mediaFormVisible:false,teachplayFormVisible:false,//控制添加窗口是否显示teachplanList : [{id: 1,pname: 一级 1,children: [{id: 4,pname: 二级 1-1,children: [{id: 9,pname: 三级 1-1-1}, {id: 10,pname: 三级 1-1-2}]}]}],defaultProps:{children: children,label: pname},teachplanRules: {pname: [{required: true, message: 请输入课程计划名称, trigger: blur}],status: [{required: true, message: 请选择状态, trigger: blur}]},teachplanActive:{},teachplanId:}
},4定义表单提交方法和重置方法
methods: {
//提交课程计划addTeachplan(){//校验表单this.$refs.teachplanForm.validate((valid) {if (valid) {//调用api方法//将课程id设置到teachplanActivethis.teachplanActive.courseid this.courseidcourseApi.addTeachplan(this.teachplanActive).then(res{if(res.success){this.$message.success(添加成功)//刷新树this.findTeachplan()}else{this.$message.error(res.message)}})}})},//重置表单resetForm(){this.teachplanActive {}},//查询课程计划courseApi.findTeachplanList(this.courseid).then(res{if(res res.children){this.teachplanList res.children;}})}},2.Api调用
1定义 api方法
文件位置xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\api\course.js
/*添加课程计划*/
export const addTeachplan teachplah {return http.requestPost(apiUrl/course/teachplan/add,teachplah)
}2调用 api
文件位置xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\page\course_manage\course_plan.vue addTeachplan(){//校验表单this.$refs.teachplanForm.validate((valid) {if (valid) {//调用api方法//将课程id设置到teachplanActivethis.teachplanActive.courseid this.courseidcourseApi.addTeachplan(this.teachplanActive).then(res{if(res.success){this.$message.success(添加成功)//刷新树this.findTeachplan()}else{this.$message.error(res.message)}})}})},3.测试
测试流程 1、新建一个课程 2、向新建课程中添加课程计划 添加一级结点 添加二级结点
