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

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

Verwenden von mock.js im Vue-Projekt

  • Auswahl des Entwicklungstools: Vscode

1. Erstellen Sie ein Vue-Projekt über die Befehlszeile (wählen Sie manuell Babel, Router, Vuex aus).

2. Importieren Sie element-ui (für einen besseren Anzeigeeffekt) und geben Sie es in die Befehlszeile ein

npm ich element-ui -S

3. Im Wesentlichen. Referenz in js

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

4. Erstellen Sie ein neues src/views/main/List.vue, um die benutzerdefinierte Spaltenvorlage in elememnt-ui zu verwenden

<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>

5.router/index.js ist wie folgt konfiguriert

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

Der aktuelle Anzeigeeffekt der Webseite ist wie folgt

5. Installieren Sie Mockjs und Axios

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

6. Erstellen Sie api/getData.js und request.js

Anfrage.js

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

getData.js

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

7.Erstellen Sie mock/mockServer.js unter src

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
        }
      }
    ]
  }

})

8. Importieren Sie mockServer in main.js

importiere './mock/mockServer'

9. Ändern Sie src/views/main/List.vue (Datenerfassung und -bindung, stellen Sie die Tabelle in die Mitte)

<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>

10. Erneut laufen

Wenn Sie mit der Maus über einen Namen fahren, werden weitere Informationen angezeigt.

Anzeige von 1000 Testdaten

Ich bin zu faul zum Blättern. . . .

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von mock.js in Vue-Projekten. Weitere verwandte Projekte mit mock.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Die Verwendung und grundlegende Nutzung von mock.js im Vue-Projekt
  • Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?
  • Detaillierte Erklärung zur Verwendung von Mock-Daten bei der lokalen Entwicklung von vue-cli
  • So steuern Sie Mock in der Entwicklungsumgebung und deaktivieren es in der Produktionsumgebung in Vue

<<:  So implementieren Sie Vue Page Jump

>>:  Detaillierte Schritte zur Entwicklung von WeChat-Miniprogrammen mit Typescript

Artikel empfehlen

Zusammenfassung einiger Tipps zum Umgehen der Node.js-Codeausführung

Inhaltsverzeichnis 1. untergeordneter Prozess 2. ...

Tiefgreifendes Verständnis der Matching-Logik von Server und Standort in Nginx

Server-Abgleichlogik Wenn Nginx entscheidet, in w...

Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts

Welche Produkte möchten Sie erwähnen? Vor kurzem ...

Kurze Analyse der geplanten MySQL-Sicherungsaufgaben

Einführung Um Datenverlust in einer Produktionsum...

Implementierung der Funktion zum Speichern von Screenshots aus HTML in PDF

Technologie nutzen itext.jar: Konvertiert den Byt...

Detaillierte Erläuterung der Ideen zur Leistungsoptimierung für funktionale React-Komponenten

Optimierungsideen Es gibt zwei Hauptoptimierungsr...

Ausführliche Erklärung der Closure in JavaScript

Einführung Closure ist eine sehr leistungsstarke ...

Vue-Kapselungskomponententool $attrs, $listeners-Verwendung

Inhaltsverzeichnis Vorwort $attrs Beispiel: $list...

Detaillierte Erklärung, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird

In diesem Artikel wird hauptsächlich erläutert, w...

Detailliertes Tutorial zur Verwendung des Prettier Code-Plugins in vscode

Warum prettier verwenden? In großen Unternehmen k...

Trash-Cli: Befehlszeilen-Papierkorb-Tool unter Linux

Ich glaube, jeder kennt den Papierkorb, da er bei...

Sehr praktische Methode zur Implementierung des Tomcat-Startskripts

Vorwort Es gibt ein Szenario, in dem das Unterneh...

CSS implementiert den Texteingabefeldstil von Google Material Design (empfohlen)

Hallo zusammen, heute möchte ich Ihnen zeigen, wi...

Lösung zum Verlassen von Lücken zwischen BootStrap-Rastern

Inhaltsverzeichnis [Siehe ein Beispiel]: [Der urs...

Eine detaillierte Einführung in Linux-Dateiberechtigungen

Die Stärke von Linux liegt in seinem Mehrbenutzer...