4.7 添加Study组件

接下来添加Study组件。这个页面比较复杂。它包括左边章节导航，和右边的内容。这两部分本身又是组件。所以Study组件的模板可能是这样的：
<template>
    <div id="main">
        <Sidebar/>
        <StudyContent/>
    </div>
</template>
Study.vue的javascript部分：
import Sidebar from "@/components/Sidebar.vue";
import StudyContent from '@/components/StudyContent.vue';
export default{
    name:"Study",
    components:{
        StudyContent,
        Sidebar
    },
}

这里使用了Sidebar组件（左侧章节菜单栏）和StudyContent组件（右侧内容），这两个组件要先建，否则Study无法测试。
为了简单起见，Sidebar部分我们只建立一个空的文件，如下所示：
<template>
    <div>
    </div>
</template>
<script>
export default{name:"Sidebar",};
</script>
然后我们可以先写好路由：
1.添加study到src/router/index.js的路由，一定注意导入Stduy组件，否则编译无错误，运行不出来
2.修改header的学习链接

然后是StudyContent，创建StudyContent.vue文件。
html模板部分：
<template>
    <div id="content" class="col-sm-9 col-xs-12">
        <div id="content_aside">
            <div id="box1">
                <block v-if="chapter">
                    <h2 id="chapterTitle">{{chapter.name}}</h2>
                    <div id="chapterContent">
                        <div v-html="chapter.content">
                        </div>
                    </div>
                </block>
            </div>
            <div id="box2">
                <h3 id="childNodesOrQuizesTitle"></h3>
                <ul id="childNodesOrQuizes" class="imageList">
                    <li class="last" v-if="course"><span class="chapterIntro" v-html="course"></span>
                    </li>
                </ul>
            </div>
            <br class="clear"/>
        </div>
    </div>
</template>
2.JavaScript部分
import axios from "axios";
export default{
    name:"StudyContent",
    data(){
        return{
            chapter:"",
            course:"",
        }
        ;
    },
    created:function(){
        console.log("studyContent created");
        this.getChapterContent();
    },
    methods:{
        getChapterContent:function(){
            let url="https://www                                                                                                
                .codessp.cn/wxCodessp.jsp?type=content&code=010100&courseId=1";
            axios({
                headers:{
                    "Content-Type":"application/x-www-form-urlencoded",
                },
                method:"get",
                url:url,
            })
            .then((response)=>{
                if(response.status=="200"){
                    let t=response.data;
                    this.chapter=t;
                }
            });
        },
    },
}
;
axios是一个发起http请求的插件，只需要提供好url和参数，就可以向后台请求数据，这类http请求的返回和普通网页的http请求不同，是JSON格式，所谓JSON格式，就是类似vue里面data的格式形式:
{名称：值，名称2：值……}
普通http请求得到的html代码，然后浏览器解析。
我们可以在浏览器请求这个url，我们可以看到返回的数据。
这部分编译的时候，会无法找到axios。需要通过命令行安装：
npm install --save axios

这部分代码，还有一个created方法，这是vue内置的钩子函数，created会在页面html准备好后执行，所以这里执行getChapterContent，就发起请求，获得章节的内容，第30行代码赋值给了组件的变量chapter，而html模板用了chapter变量显示章节的标题、内容。