前端学习笔记2——错误解决，接口，echart

debugger报错解决

编译器中有时会出现奇怪的语法问题，例如打完debugger就报错，这时候可以ctrl+z回退，退到最开始重新打可能就没事了。

CookieUtils

CookieUtils.get是通过键获取值，所以全局搜索cookieUtils.set查看键值对设置

接口

如果接口返回1001等错误，首先在接口文档调试，很可能接口写错了。

  methods:{
    
    
    //获取课程管理
    getClassInfoList(){
    
    
      admin.getClassInfoList(this.$store.state.schoolId).then(
          res=>{
    
    
            if(res.code==1000){
    
    
              this.tableData=res.data;
            }
            else{
    
    
              this.$message.error("获取课程列表失败！")
            }
          }
      )
    },

<el-table
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            border
            style="width: 100%;overflow: auto"
            height="calc(100vh - 260px)"
            ref="table">

t

 return{
    
    
      tableData:[],
      ```

elementui`——el-button

button的disabled属性，如果需要动态绑定，就要加冒号，后面才能识别到。

<el-button
                type="text"
                size="small"
                @click="open"
                :disabled="Boolean(scope.row.isPublic)"
                >公开</el-button
              >

在这里插入代码片

echart

主要看两个地方：1.示例 2.文档-配置项手册
柱状图在series里的bar，style叫itemStyle
template里用div配一个id就行。

<el-card style="margin-top: 4vh">
          <div style="height: 35vh" id="questionChart"></div>
        </el-card>

定义一个方法，在mounted应用

 created() {
    
    
    this.$nextTick(() => {
    
    
      this.questionChartInit();
    });
  },

基础的是这样，通过id获取元素赋给变量

showBars() {
    
    
      var chartDom = document.getElementById("questionSchool");
      var myChart = echarts.init(chartDom);
      let option = {
    
    
        title: {
    
    
          text: "各学校对应题目统计",
          // subtext: 'Fake Data',
          left: "left",
        },
        xAxis: {
    
    
          type: "category",
          data: ["1016系统演示", "东北大学", "管理员专属", "虚拟教研室"],
        },
        yAxis: {
    
    
          type: "value",
        },
        grid: {
    
    
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
    
    
            barWidth: 30,
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };

定义的复杂方法（应该是接完接口的长这样）

  questionChartInit() {
    
    
      this.$api.dev.getSchoolList().then(async (res) => {
    
    
        var x_data = [];
        var y_data = [];
        for (var j = 0; j < res.data.length; j++) {
    
    
          var r = await this.$api.dev.getSchoolClassQuestionNum(res.data[j].id);
          for (var i = 0; i < r.data.classData.length; i++) {
    
    
            x_data.push(r.data.classData[i]);
            y_data.push(r.data.questionData[i]);
          }
        }
        var chartDom = document.getElementById("questionChart");
        var myChart = echarts.init(chartDom);
        let option = {
    
    
          title: {
    
    
            text: "各教师对应课程统计",
          },
          tooltip: {
    
    
            trigger: "axis",
            axisPointer: {
    
    
              type: "shadow",
              // label:{
    
    
              //     formatter:(param)=>{
    
    
              //         console.log(param)
              //         return param.value
              //     }
              // }
            },
          },
          xAxis: {
    
    
            type: "category",
            data: ["张胜军", "王植", "郭甲腾", "兰天"],
            axisLabel: {
    
    
              rotate: 50,
            },
          },
          yAxis: {
    
    
            type: "value",
          },
          series: [
            {
    
    
              barWidth: 30,
              data: [10, 20, 30, 43],
              type: "bar",
              itemStyle: {
    
    
                color: "#9FE080",
              },
            },
          ],
        };
        myChart.setOption(option);
      });
    },

！非运算符

应该加在引号里

debug

开发者工具里可以打断点，跟代码看他有没有进入到某一个函数，

发现问题看报错

常见错误

方法（函数）一定记得加括号！！！
有括号是方法，没括号是变量！！！

在vue里this.没有写的话是会报错方法undefined的。

记得写this.!!!接口未调用，有很大一部分原因都是this没写。。

记得复制来的东西先改名。。。