4.8 添加sidebar

本节需要做手动写更多的代码，要求完成左侧菜单，但不要求点击更新右侧内容，只展示就可以。
html部分：
<template>
    <div id="sidebar" class="hidden-xs col-xs-12 col-sm-3">
        <ul class="linkedList">
            <block v-for="(chapter, i) in chapters" v-bind:key="chapter.id">
                <li v-bind:id="'li_' + chapter.code" class="first"><a href="javascript:void(0)" v-bind:data-code="chapter.code" v-on:click="chapterClick($event)"><span class="chapterSerial">第{{i+1}}章</span>
                <span class="chapterName">{{" "+chapter.name}}</span>
                </a>
                <ul v-if="chapter.subChapters">
                    <block v-for="(sub, j) in chapter.subChapters" v-bind:key="sub.id">
                        <li v-bind:id="'li_' + sub.code" class="first"><a href="javascript:void(0)" v-bind:data-code="sub.code" v-on:click="chapterClick($event)"><span class="chapterName">{{sub.chapterTitle}}</span>
                        </a>
                        </li>
                    </block>
                </ul>
                </li>
            </block>
        </ul>
    </div>
</template>
js部分：
import axios from "axios";
export default{
    name:"Sidebar",
    components:{
    },
    data(){
        return{
            chapters:[],
        }
        ;
    },
    created:function(){
    },
    mounted:function(){
        this.getChapters();
    },
    methods:{
        getChapters:function(){
            这里是你要完成的部分
        },
    },
}

getChapters获取章节数据，然后赋值给chapters变量。
getChapters需要用到的请求地址：

style部分：
#sidebar {
  float: left;
  padding: 40px;

  color: #000;
  font-weight: bold;

  background: #dfdee5;
  border-right: 5px solid #95142a;
  margin-right: -5px;
}

#sidebar,
#sidebar a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

#sidebar h2,
#sidebar h3,
#sidebar h4 {
  color: #fff;
}

#sidebar ul {
  list-style: none;
  padding-left: 0;
}

#sidebar ul li {
  border-top: dotted 1px #70665f;
  padding-bottom: 0;
  padding-top: 15px;
  padding-left: 15px;
  margin-bottom: 15px;
}

#sidebar ul li:first {
  padding-top: 0;
  border-top: none;
}

#sidebar ul li ul {
  list-style: none;
  margin: 20px;
  display: block;
}

#sidebar ul li ul li {
  border: none;
}

.selected {
  font-weight: bold;
  background: #cc6633;
}

#sidebar,
#sidebar a {
  color: #000;
  font-weight: bold;
}

#sidebar a:hover {
  color: orange;
}

progress::-moz-progress-bar {
  background: #55a0ff;
  color: #fff;
}