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:
<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>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 routerimport 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<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!
