黑马程序员技术交流社区

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

---

作者: 谷粒姐姐    时间: 2019-6-3 11:36
标题: 【郑州校区】Java的新项目学成在线笔记-day15（二）
1.4前端开发
1.4.1 配置虚拟主机
学习中心的二级域名为ucenter.xuecheng.com，我们在nginx中配置ucenter虚拟主机。
#学成网用户中心 server { listen
      80;     
server_name ucenter.xuecheng.com;     
      #个人中心
    location / {   
     proxy_pass http://ucenter_server_pool;   
         }     
  } #前端ucenter upstream ucenter_server_pool{
  #server 127.0.0.1:7081 weight=10;
  server 127.0.0.1:13000 weight=10;
}
在学习中心要调用搜索的API，使用Nginx解决代理，如下图：


1.4.3 API调用
在learning_video.vue页面中调用课程信息查询接口，得到课程计划，将课程计划json串转成对象。 1、定义视图 a、课程计划

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

<div class="nav nav‐stacked" v‐for="(teachplan_first, index) in teachplanList">            

       <div class="tit nav‐justified text‐center"><i class="pull‐left glyphicon  glyphicon‐th‐list"></i>{{teachplan_first.pname}}<i class="pull‐right"></i></div>     

              <li   v‐if="teachplan_first.children!=null" v‐for="(teachplan_second, index)  in teachplan_first.children"><i class="glyphicon glyphicon‐check"></i>                     <a :href="url" @click="study(teachplan_second.id)">                

       {{teachplan_second.pname}}            

         </a>  

                 </li>

b、课程名称

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

<div class="top text‐center">        

      {{coursename}}  

</div>

2、定义数据对象

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

data() {   

    return {      

   url:'',//当前url 

        courseId:'',//课程id 

       chapter:'',//章节Id     

    coursename:'',//课程名称    

     coursepic:'',//课程图片  

       teachplanList:[],//课程计划    

     playerOptions: {//播放参数      

     autoplay: false,      

     controls: true,    

       sources: [{       

      type: "application/x‐mpegURL",    

         src: ''      

    }]     

    },  

       } 

    }

3、在created钩子方法中获取课程信息

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

created(){   

      //当前请求的url  

     this.url = window.location  

     //课程id     

  this.courseId = this.$route.params.courseId 

      //章节id     

  this.chapter = this.$route.params.chapter     

  //查询课程信息   

    systemApi.course_view(this.courseId).then((view_course)=>{  

          if(!view_course || !view_course[this.courseId]){

this.$message.error("获取课程信息失败，请重新进入此页面！")     

        return ;       

    }         

    let courseInfo = view_course[this.courseId]   

        console.log(courseInfo)     

      this.coursename = courseInfo.name     

      if(courseInfo.teachplan){        

     let teachplan = JSON.parse(courseInfo.teachplan);       

      this.teachplanList = teachplan.children;      

       }

       }) 

    },

1.4.4 测试
在浏览器请求：http://ucenter.xuecheng.com/#/le ... f01617f9dabc40000/0 4028e581617f945f01617f9dabc40000：第一个参数为课程id，测试时从ES索引库找一个课程id 0：第二个参数为课程计划id，此参数用于点击课程计划播放视频。

---

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

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