ランダムに生成されたデータVUE +偽の前端と後端とを分離

EDITORIAL言葉：

　　自己ヴュー、手書きJSONデータは、突然、私の同僚を参照してくださいあなたが嘲笑していないどのように私に依頼することです私はあまりにも遠くの背後に感じました

　　学習を停止することはありません

　　ああああああ

　　すぐには本当に便利な、モックを学び始めました

　　プロセスを学ぶか、多くの問題が発生し、最終的には忘れて自分自身を防ぐために、このレコードでは、考え出し

-------------------------------------------------- --------

まず、モックをインストール

　　NPM mockjsをインストール--save-devの

第二に、実施例（小栗を与えます）

　　1、index.jsに作成される新しいモックフォルダ、table.js

　　次のように内容は以下のとおりです。

　　2、main.jsにモックの導入

インポート '@ /モック/ index.js';

　　図3の模擬/ index.jsに書き込まれた次のコード　　

インポート「mockjs」からmockjs ; 

インポートTableApiから組み込ま」./table.js' @は、データJS生成

CONSTモックを =（ 『mockjs』）必要// モック関数を
// ルールインターセプト要求をブロック使用がヒット


Mock.mockを（ 'API / getTableData'、 'GET' 、TableApi.getTableData）;ここ要求されたデータのURLを使用するURLと一致//コンポーネント

の書き出しデフォルト mockjsを

　　図4に示すように、次のコードがでモック/ table.jsで記述されています　　

import { Random } from 'mockjs'

const code = 200 // 状态码 项目同一

export default{
  getTableData () {
    let data = []
    Array.apply(null, { length: 10 }).forEach(_ => {
      data.push({
        name: Random.cname(), // 随机汉语名
        title: Random.csentence(8, 16), // 随机中文字符串
        date: Random.date() // 随机日期
      })
    })
    return {
      code,
      data
    }
  }
}

　　5、在需要引入数据的组件内写如下代码（此处html使用了element）

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    },
    mounted(){
      this.createTable();
    },
    created(){
      //组件实例创建完成，此时dom还未生成
    },
    methods:{
      createTable(){
        let $this = this;
//        getTableData(data)
        this.$axios.get('api/getTableData') //此处地址为mock/index.js文件中.mock函数中的路径
          .then(response => {
            let $data = response.data.data;
            $this.tableData = $data;
          })
      }
    }
  }
</script>

　　6、npm run dev运行，效果如下图

ランダムに生成されたデータVUE +偽の前端と後端とを分離

おすすめ