Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus

npm ich element-ui -S

importiere ElementUI von „element-ui“
importiere 'element-ui/lib/theme-chalk/index.css'; //Style-Dateien müssen in Vue.use(ElementUI) eingeführt werden

<Vorlage>
<div>
  <el-Tabelle
  :data="Tabellendaten"
  Stil="Breite: 100%">
  <el-table-column
   Bezeichnung="Datum"
   Breite="180">
   <template slot-scope="Umfang">
    <i Klasse="el-icon-time"></i>
    <span style="margin-left: 10px">{{ Umfang.row.date }}</span>
   </Vorlage>
  </el-Tabellenspalte>
  <el-table-column
   Bezeichnung="Name"
   Breite="180">
   <template slot-scope="Umfang">
    <el-popover trigger="hover" placement="oben">
     <p>Name: {{ Umfang.Zeile.Name }}</p>
     <p>Adresse: {{ scope.row.address }}</p>
     <div Slot="Referenz" Klasse="Name-Wrapper">
      <el-tag size="medium">{{ Umfang.Zeile.Name }}</el-tag>
     </div>
    </el-popover>
   </Vorlage>
  </el-Tabellenspalte>
  <el-table-column label="Vorgang">
   <template slot-scope="Umfang">
    <el-Schaltfläche
     Größe="mini"
     @click="handleEdit(scope.$index, scope.row)">Bearbeiten</el-button>
    <el-Schaltfläche
     Größe="mini"
     Typ="Gefahr"
     @click="handleDelete(scope.$index, scope.row)">Löschen</el-button>
   </Vorlage>
  </el-Tabellenspalte>
 </el-Tabelle>
</div>
</Vorlage>

<Skript>
 Standard exportieren {
  Daten() {
   zurückkehren {
    Tabellendaten: [{
     Datum: '2016-05-02',
     Name: 'Wang Xiaohu',
     Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
    }, {
     Datum: '2016-05-04',
     Name: 'Wang Xiaohu',
     Adresse: „Nr. 1517, Jinshajiang Road, Bezirk Putuo, Shanghai“
    }, {
     Datum: '2016-05-01',
     Name: 'Wang Xiaohu',
     Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“
    }, {
     Datum: '2016-05-03',
     Name: 'Wang Xiaohu',
     Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
    }]
   }
  },
  Methoden: {
   handleEdit(index, zeile) {
    Konsole.log(Index, Zeile);
   },
   handleDelete(index, zeile) {
    Konsole.log(Index, Zeile);
   }
  }
 }
</Skript>

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
//Komponenten importierenListe aus '../views/main/List.vue' importieren

Vue.use(VueRouter)

const Routen = [
 {
  Weg: '/',
  Namensliste',
  Komponente: Liste
 },

]

const router = neuer VueRouter({
 Routen
})

Standardrouter exportieren

npm install --save-dev mockjs
npm install --save axios

Axios von „Axios“ importieren
const service = axios.create({
  Basis-URL: "http://localhost:8080",
})
Standarddienst exportieren

Axios aus „../request“ importieren
//Datenlistenschnittstelle exportieren const getList = () => axios.get("/list")

Mock von „mockjs“ importieren
//Daten aus „./data.json“ importieren

Mock.mock('http://localhost:8080/list', {
  Code: 0, Daten:
  {
    'Daten|1000': [
      {  
        id: '@id', //zufällige ID
        name: '@name', //Zufälliger Name nickName: '@last', //Zufälliger Spitzname phone: /^1[34578]\d{9}$/, //Zufällige Telefonnummer 'age|11-99': 1, //Alter address: '@county(true)', //Zufällige Adresse email: '@email', //Zufällige E-Mail isMale: '@boolean', //Zufälliges Geschlecht createTime: '@datetime', //Erstellungszeit avatar() {
          //Benutzeravatar gibt Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName) zurück
        }
      }
    ]
  }

})

importiere './mock/mockServer'

<Vorlage>
 <div>
  <el-table :data="tableData" style="width: 600px;margin: 0 auto">
   <el-table-column label="Zufällige ID" width="200">
    <template slot-scope="Umfang">
     <i Klasse="el-icon-time"></i>
     <span style="margin-left: 10px">{{ scope.row.id }}</span>
    </Vorlage>
   </el-Tabellenspalte>
   <el-table-column label="Name" width="180">
    <template slot-scope="Umfang">
     <el-popover trigger="hover" placement="oben">
      <p>Name: {{ Umfang.Zeile.Name }}</p>
      <p>Adresse: {{ scope.row.address }}</p>
      <div Slot="Referenz" Klasse="Name-Wrapper">
       <el-tag size="medium">{{ Umfang.Zeile.Name }}</el-tag>
      </div>
      <p>E-Mail: {{ scope.row.email }}</p>
      <p>Geschlecht: {{ scope.row.isMale }}</p>
      <p>Spitzname: {{ scope.row.nickName }}</p>
      <p>Telefonnummer: {{ scope.row.phone }}</p>
      <p>Avatar:</p>
     </el-popover>
    </Vorlage>
   </el-Tabellenspalte>
   <el-table-column label="Vorgang">
    <template slot-scope="Umfang">
     <el-button Größe="mini" @click="handleEdit(Bereich.$index, Bereich.row)"
      >Bearbeiten</el-Schaltfläche
     >
     <el-Schaltfläche
      Größe="mini"
      Typ="Gefahr"
      @click="handleDelete(Umfang.$index, Umfang.row)"
      >Löschen</el-Button
     >
    </Vorlage>
   </el-Tabellenspalte>
  </el-Tabelle>
 </div>
</Vorlage>

<Skript>
importiere { getList } von "../../api/getData";
Standard exportieren {
 Daten() {
  zurückkehren {
   Tabellendaten: [
    // {
    // Datum: "02.05.2016",
    // Name: "Wang Xiaohu",
    // Adresse: „1518 Jinshajiang Road, Putuo District, Shanghai“,
    // },
    // {
    // Datum: "04.05.2016",
    // Name: "Wang Xiaohu",
    // Adresse: „1517 Jinshajiang Road, Putuo District, Shanghai“,
    // },
    // {
    // Datum: "01.05.2016",
    // Name: "Wang Xiaohu",
    // Adresse: „1519 Jinshajiang Road, Putuo District, Shanghai“,
    // },
    // {
    // Datum: "03.05.2016",
    // Name: "Wang Xiaohu",
    // Adresse: „1516 Jinshajiang Road, Putuo District, Shanghai“,
    // },
   ],
  };
 },
 Methoden: {
  handleEdit(index, zeile) {
   Konsole.log(Index, Zeile);
  },
  handleDelete(index, zeile) {
   Konsole.log(Index, Zeile);
  },

  asynchron getMockList() {
   versuchen {
    const Ergebnis = warte auf getList();
    //console.log(Ergebnis);
    wenn (Ergebnis.Daten.Code == 0) {
     diese.tableData = Ergebnis.Daten.Daten.Daten;
    }
    //Konsole.log(Ergebnis.Daten.Daten.Daten);
   } Fehler abfangen {
    konsole.log(Fehler);
   }
  },
 },

 montiert() {
  dies.getMockList();
 },

};
</Skript>