文章目錄

• 一.需求分析
• 二.API接口
• 三.后端
• • 1.Dao
  • 2.Service
  • 3.Controller
  • 4.測試
• 四.前端
• • 1.頁面原型說明
  • • 1）添加按鈕
    • 2）視圖部分
    • 3）在數據模型中添加如下變量
    • 4）定義表單提交方法和重置方法
  • 2.Api調用
  • • 1）定義 api方法
    • 2）調用 api
  • 3.測試

一.需求分析

用戶操作流程：
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 JpaRepository<Teachplan, String> { //定義方法根據課程id和父結點id查詢出結點列表，可以使用此方法實現查詢根結點 public List<Teachplan> 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);}//查詢根結點信息Optional<Teachplan> 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){Optional<CourseBase> optional = courseBaseRepository.findById(courseId);if(!optional.isPresent()){return null;}CourseBase courseBase = optional.get();//調用dao查詢teachplan表得到該課程的根結點（一級結點）List<Teachplan> 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 type="primary" @click="teachplayFormVisible = true">添加課程計劃</el-button>

2）視圖部分

添加課程計劃采用彈出窗口組件Dialog，在course_plan.vue頁面添加添加課程計劃的彈出窗口代碼

<el-dialog title="添加課程計劃" :visible.sync="teachplayFormVisible" ><el-form ref="teachplanForm" :model="teachplanActive" label-width="140px" style="width:600px;" :rules="teachplanRules" ><el-form-item label="上級結點" ><el-select v-model="teachplanActive.parentid" placeholder="不填表示根結點"><el-optionv-for="item in teachplanList":key="item.id":label="item.pname":value="item.id"></el-option></el-select></el-form-item><el-form-item label="章節/課時名稱" prop="pname"><el-input v-model="teachplanActive.pname" auto-complete="off"></el-input></el-form-item><el-form-item label="課程類型" ><el-radio-group v-model="teachplanActive.ptype"><el-radio class="radio" label='1'>視頻</el-radio><el-radio class="radio" label='2'>文檔</el-radio></el-radio-group></el-form-item><el-form-item label="學習時長（分鐘） 請輸入數字" ><el-input type="number" v-model="teachplanActive.timelength" auto-complete="off" ></el-input></el-form-item><el-form-item label="排序字段" ><el-input v-model="teachplanActive.orderby" auto-complete="off" ></el-input></el-form-item><el-form-item label="章節/課時介紹" prop="description"><el-input type="textarea" v-model="teachplanActive.description" ></el-input></el-form-item><el-form-item label="狀態" prop="status"><el-radio-group v-model="teachplanActive.status" ><el-radio class="radio" label="0" >未發布</el-radio><el-radio class="radio" label='1'>已發布</el-radio></el-radio-group></el-form-item><el-form-item ><el-button type="primary" v-on:click="addTeachplan">提交</el-button><el-button type="primary" v-on:click="resetForm">重置</el-button></el-form-item></el-form></el-dialog>

3）在數據模型中添加如下變量

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、向新建課程中添加課程計劃
添加一級結點
添加二級結點

總結

以上是生活随笔為你收集整理的学成在线--16.添加课程计划的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。