Vue-Gerüst zum Aufbau des Backends

In den letzten Jahren ist die Front-End-Entwicklung immer beliebter geworden, wobei das Vue-Framework das beliebteste ist. Für Anwendungen auf Unternehmensebene ist im Allgemeinen ein Backend-Verwaltungssystem erforderlich. In diesem Artikel wird daher erläutert, wie Sie mit Vue-Gerüst ein Backend-Verwaltungssystem erstellen.

1. Voraussetzungen

Das erste, was Sie benötigen, sind Grundkenntnisse von Vue, einschließlich Komponenten, Routing, Zustandsverwaltung usw. Darüber hinaus müssen Node.js und npm installiert werden, was hier nicht beschrieben wird.

2. Erstellen Sie ein Projekt

Mit Vue-Gerüst kann die Projektstruktur schnell und einfach aufgebaut werden. Öffnen Sie zunächst die Befehlszeilenschnittstelle und geben Sie den folgenden Befehl ein:

vue create my-project

wobei my-project der Projektname ist, der durch den gewünschten Namen ersetzt werden kann. Als nächstes gibt es einige Konfigurationsoptionen, wie in der folgenden Abbildung dargestellt:

Wählen Sie einfach die Standardkonfiguration aus. Warten Sie anschließend einige Zeit, bis die Projekterstellung abgeschlossen ist.

3. Installieren Sie die erforderlichen Plug-Ins und Bibliotheken.

Projekte, die mit Vue-Scaffolding erstellt wurden, enthalten bereits einige erforderliche Plug-Ins und Bibliotheken, um das Hintergrundverwaltungssystem jedoch zu verbessern Wenn wir fertig sind, müssen wir auch einige Plug-Ins und Bibliotheken installieren. Verwenden Sie im Projektstammverzeichnis den folgenden Befehl zur Installation:

npm install --save vue-router vuex element-ui axios

Hier finden Sie eine kurze Einführung in die Funktionen dieser Plug-Ins und Bibliotheken:

• vue-router: wird für Front-End-Routing verwendet
• vuex: wird für die Zustandsverwaltung verwendet
• element-ui: UI-Komponentenbibliothek basierend auf Vue, die umfangreiche Komponenten #🎜 bereitstellen kann 🎜#
Axios: In Ajax-Anfrage verwenden

4. Seitenlayout erstellen

Zuerst müssen wir einen externen Frame erstellen, um das immer beizubehalten Seitenkopf und Seiten, wenn die Seite wechselt. Spaltenfixierung. Hier wird die von Element-UI bereitgestellte Layoutkomponente verwendet:

<template>
  <el-container>
    <el-header>
      <!-- 头部内容 -->
    </el-header>
    <el-container>
      <el-aside>
        <!-- 侧边栏内容 -->
      </el-aside>
      <el-main>
        <!-- 主体内容，用于显示页面 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

Dies ist das einfachste Layout. Wir können bei Bedarf eigene Inhalte in der Kopfzeile und Seitenleiste hinzufügen. Es ist zu beachten, dass die von Vue-Router bereitgestellte Router-View-Komponente im el-main-Teil verwendet wird, um Seiten anzuzeigen, die verschiedenen Routen entsprechen.

5. Routing konfigurieren

Routing ist ein integraler Bestandteil der Front-End-Entwicklung, und Vue-Router wird in Vue bereitgestellt, um Routing-Funktionen zu implementieren. Suchen Sie im src-Verzeichnis das Router-Verzeichnis, bearbeiten Sie die Datei index.js und fügen Sie den folgenden Code hinzu:

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/dashboard',
      component: Layout,
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: () => import('@/views/dashboard/index')
        }
      ]
    }
  ]
})

export default router

Hier wird eine Route mit dem Namen Dashboard erstellt und Layout wird als Stammroute verwendet. Die Layout-Komponente umfasst Inhalte wie die Kopfzeile und die Seitenleiste sowie die Router-Ansicht zur Anzeige von Unterseiten. Es ist zu beachten, dass Unterseiten asynchron geladen werden müssen, um die Ladegeschwindigkeit der Seite zu verbessern. Daher wird die von Vue bereitgestellte Funktion import () verwendet, um das Laden bei Bedarf zu erreichen.

6. Zustandsverwaltung

Im Hinblick auf die globale Zustandsverwaltung stellt Vue Vuex zur Implementierung bereit. Erstellen Sie im src-Verzeichnis die Datei store.js und fügen Sie den folgenden Code hinzu:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    sidebar: {
      opened: true
    }
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {
      state.sidebar.opened = !state.sidebar.opened
    }
  },
  actions: {
    toggleSideBar ({ commit }) {
      commit('TOGGLE_SIDEBAR')
    }
  }
})

export default store

Hier wird ein Status namens „Sidebar“ definiert, um das Anzeigen und Ausblenden der Seitenleiste zu steuern, und stellt eine Methode „toggleSideBar“ bereit Wird verwendet, um den Status der Seitenleiste zu ändern.

7. Verwenden Sie Element-UI-Komponenten

Element-UI bietet viele häufig verwendete UI-Komponenten, die die Entwicklungseffizienz erheblich verbessern können. Hier ist eine Einführung in häufig verwendete Komponenten:

el-button: Schaltflächenkomponente
el-table: Tabellenkomponente
el -form: Formularkomponente
el-input: Eingabefeldkomponente
el-select: Dropdown-Feldkomponente
el-pagination: Paginierung Komponente #🎜🎜 #
• Warten
Hier nehmen wir die el-table-Komponente als Beispiel, um deren Verwendung vorzustellen:

<el-table :data="tableData">
  <el-table-column
    prop="date"
    label="日期">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址">
  </el-table-column>
</el-table>

Hier Als Datenquelle für die Tabelle verwenden wir eine Datei mit dem Namen „Array of tableData“, in der drei Spalten definiert sind: Datum, Name und Adresse.

8. Verwenden Sie Axios, um Anfragen zu senden.

Am Ende müssen wir Axios verwenden, um Anfragen zu senden, um Hintergrunddaten zu erhalten. Erstellen Sie im src-Verzeichnis das API-Verzeichnis und erstellen Sie darin eine Datei mit dem Namen user.js:

import request from '@/utils/request'

export function getUserList (params) {
  return request({
    url: '/user/list',
    method: 'get',
    params
  })
}

export function addUser (data) {
  return request({
    url: '/user/add',
    method: 'post',
    data
  })
}

Dies kapselt zwei Methoden zum Abrufen der Benutzerliste und zum Hinzufügen von Benutzern und verwendet das zuvor installierte axios-Plugin dazu Anfragen senden.

Zu diesem Zeitpunkt wurde ein einfaches Backend-Managementsystem eingerichtet. Natürlich müssen bestimmte Funktionen noch entsprechend den tatsächlichen Anforderungen erweitert werden, aber viele grundlegende Vorgänge wurden abgeschlossen, wie z. B. Routing, Statusverwaltung, UI-Komponenten usw. Dieser Artikel ist nur eine kurze Einführung in den gesamten Prozess.

Das obige ist der detaillierte Inhalt vonVue-Gerüst zum Aufbau des Backends. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!