フロントエンド学習メモ 2 - エラー解決、インターフェイス、echart

デバッガーエラー解決

デバッガを入力した後にエラーが報告されるなど、コンパイラで奇妙な文法上の問題が発生することがありますが、このときは Ctrl+Z を押して戻ることができ、最初に戻ってから問題を解決することもできます。再開する。

クッキー利用

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:[],
      ```

要素「—el-button」用

ボタンの無効な属性。動的バインディングが必要な場合は、後で認識できるようにコロンを追加する必要があります。

<el-button
                type="text"
                size="small"
                @click="open"
                :disabled="Boolean(scope.row.isPublic)"
                >公开</el-button
              >
在这里插入代码片

あなたを追い出す

1. 例 2. ドキュメント構成項目マニュアル
ヒストグラムはシリーズのバーにあり、スタイルは itemStyle と呼ばれます。
テンプレートでは、ID を持つ div を使用するだけです。

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

マウント時に適用するメソッドを定義する

 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);
      });
    },

演算子ではありません

引用符で囲む必要があります

デバッグ

開発者ツールでは、ポイントを中断し、コードに従って特定の関数が入力されたかどうかを確認し、
開発者ツールのブレークポイントと次のステップ
問題が見つかった場合はエラー レポートを確認できます。

よくある間違い

メソッド (関数) はかっこを忘れずに追加する必要があります。
括弧ありはメソッド、括弧なしは変数です。

これをvueに書かないとメソッドが未定義というエラーが報告されます。

これを忘れずに書いてください。!!! インターフェイスが呼び出されません。理由の大部分は、これが書かれていないことです。

最初にコピーしたものの名前を変更することを忘れないでください。

おすすめ

転載: blog.csdn.net/weixin_47227105/article/details/128455116