黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day6（十一） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-2-27 15:41
标题: 【郑州校区】Java的新项目学成在线笔记-day6（十一）
3.2.4 前端页面 3.2.4.1Api方法
定义课程计划查询的api方法：

[AppleScript] 纯文本查看 复制代码

/*查询课程计划*/ export const findTeachplanList = courseid => {   return http.requestQuickGet(apiUrl+'/course/teachplan/list/'+courseid) }

3.2.4.2Api调用
1、在mounted钩子方法 中查询 课程计划 定义查询课程计划的方法，赋值给数据对象teachplanList

[AppleScript] 纯文本查看 复制代码

findTeachplan(){         courseApi.findTeachplanList(this.courseid).then((res) => {           this.teachplanList = [];//清空树           if(res.children){             this.teachplanList = res.children;           }         });

2）在mounted钩子中查询课程计划

[AppleScript] 纯文本查看 复制代码

mounted(){    //课程id    this.courseid = this.$route.params.courseid;    //课程计划    this.findTeachplan();  }  

3）修改树结点的标签属性
课程计划信息中pname为结点的名称，需要修改树结点的标签属性方可正常显示课程计划名称，如下：

[AppleScript] 纯文本查看 复制代码

defaultProps: {    children: 'children',    label: 'pname'  }   

3.2.4.3 测试

3.3 添加课程计划 3.3.1 需求分析
用户操作流程：

1、进入课程计划页面，点击“添加课程计划” 2、打开添加课程计划页面，输入课程计划信息


上级结点说明：
不选择上级结点表示当前课程计划为该课程的一级结点。
当添加该课程在课程计划中还没有节点时要自动添加课程的根结点。

3、点击提交。   3.3.1.1 页面原型说明
添加课程计划采用弹出窗口组件Dialog。 1、视图部分
在course_plan.vue页面添加添加课程计划的弹出窗口代码：

[AppleScript] 纯文本查看 复制代码

<el‐dialog title="添加课程计划" :visible.sync="teachplayFormVisible" >    

    <el‐form ref="teachplayForm"  :model="teachplanActive" label‐width="140px"  style="width:600px;" :rules="teachplanRules" >     

     <el‐form‐item label="上级结点" >   

         <el‐select v‐model="teachplanActive.parentid" placeholder="不填表示根结点">    

          <el‐option              

  v‐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"> 

[AppleScript] 纯文本查看 复制代码

 <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" ></elinput>     

     </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>  

2、数据模型
在数据模型中添加如下变量：

[AppleScript] 纯文本查看 复制代码

在数据对象中添加：     

 teachplayFormVisible:false,    

  teachplanRules: { 

       pname: [      

    {required: true, message: '请输入课程计划名称', trigger: 'blur'}   

     ],     

   status: [  

        {required: true, message: '请选择状态', trigger: 'blur'}   

     ] 

     },    

  teachplanActive:{},  

3、 添加按钮

通过变量teachplayFormVisible控制弹出窗口是否显示。

[AppleScript] 纯文本查看 复制代码

<el‐button type="primary" @click="teachplayFormVisible = true">添加课程计划</el‐button>  

4、定义表单提交方法和重置方法

[AppleScript] 纯文本查看 复制代码

//提交课程计划  addTeachplan(){    

  alert()  }, 

 //重置表单  resetForm(){  

  this.teachplanActive = {}  },  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2