vue échafaudage pour construire le backend

Ces dernières années, le développement front-end est devenu de plus en plus populaire, parmi lesquels le framework Vue est le plus populaire. Pour les applications de niveau entreprise, un système de gestion back-end est généralement requis. Cet article explique donc comment utiliser l'échafaudage Vue pour créer un système de gestion back-end.

1. Prérequis

La première chose que vous devez savoir est la connaissance de base de Vue, y compris les composants, le routage, la gestion des états, etc. De plus, Node.js et npm doivent être installés, ce qui ne sera pas décrit ici.

2. Créer un projet

L'utilisation de l'échafaudage Vue peut créer rapidement et facilement la structure du projet. Tout d'abord, ouvrez l'interface de ligne de commande et entrez la commande suivante :

vue create my-project

Parmi elles, mon-projet est le nom du projet, qui peut être remplacé par le nom de votre choix. Ensuite, il y aura quelques options de configuration, comme le montre la figure ci-dessous :

Sélectionnez simplement la configuration par défaut. Ensuite, attendez un peu que la création du projet soit terminée.

3. Installez les plug-ins et les bibliothèques nécessaires

Les projets créés à l'aide de l'échafaudage Vue contiennent déjà certains plug-ins et bibliothèques nécessaires, mais afin de rendre le système de gestion en arrière-plan plus complet, certains plug-ins et bibliothèques doivent être installés. . Dans le répertoire racine du projet, utilisez la commande suivante pour installer :

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

Voici une brève introduction aux fonctions de ces plug-ins et bibliothèques :

• vue-router : pour le routage front-end
• vuex : pour l'état gestion
• element-ui : basé sur la bibliothèque de composants d'interface utilisateur de Vue, il peut fournir des composants riches
• axios : utilisé pour les requêtes ajax

4 Créer une mise en page

Tout d'abord, nous devons créer un cadre externe pour toujours maintenir le. en-tête de page et barre latérale fixe. Le composant de mise en page fourni par Element-UI est utilisé ici :

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

Il s'agit de la mise en page la plus basique. Nous pouvons ajouter notre propre contenu dans l'en-tête et la barre latérale selon nos besoins. A noter que le composant router-view fourni par Vue-Router est utilisé dans la partie el-main pour afficher les pages correspondant aux différents itinéraires.

5. Configurer le routage

Le routage fait partie intégrante du développement front-end et est fourni dans Vue pour implémenter les fonctions de routage. Dans le répertoire src, recherchez le répertoire du routeur, modifiez le fichier index.js et ajoutez le code suivant :

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

Une route nommée Dashboard est créée ici et Layout est utilisée comme route racine. Le composant Layout comprend du contenu tel que l'en-tête et la barre latérale, ainsi qu'une vue du routeur pour afficher les sous-pages. Il convient de noter que les sous-pages doivent être chargées de manière asynchrone pour améliorer la vitesse de chargement de la page, donc la fonction import() fournie par Vue est utilisée pour réaliser un chargement à la demande.

6. Gestion de l'état

En termes de gestion globale de l'état, Vue fournit Vuex pour la mise en œuvre. Dans le répertoire src, créez le fichier store.js et ajoutez le code suivant :

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

Un état appelé sidebar est défini ici pour contrôler l'affichage et le masquage de la barre latérale, et une méthode toggleSideBar est fournie pour changer l'état de la barre latérale .

7. Utiliser les composants Element-UI

Element-UI fournit de nombreux composants d'interface utilisateur couramment utilisés, qui peuvent considérablement améliorer l'efficacité du développement. Voici une introduction aux composants couramment utilisés :

• el-button : composant bouton
• el-table : composant table
• el-form : composant de formulaire
• el-input : composant de zone de saisie
• el-select : drop -down box composant
• el-pagination : composant de pagination
• et ainsi de suite

Ici, nous prenons le composant el-table comme exemple pour présenter comment l'utiliser :

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

Ici, nous utilisons un tableau nommé tableData comme la source de données de la table, et respectivement Trois colonnes sont définies : date, nom et adresse.

8. Utilisez axios pour envoyer une demande

À la fin, nous devons utiliser axios pour envoyer une demande afin d'obtenir des données de base. Dans le répertoire src, créez le répertoire api et créez-y un fichier nommé 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
  })
}

Cela encapsule deux méthodes pour obtenir la liste des utilisateurs et ajouter des utilisateurs, et utilise le plug-in axios précédemment installé pour envoyer des requêtes.

À ce stade, un simple système de gestion backend a été mis en place. Bien entendu, des fonctions spécifiques doivent encore être étendues en fonction des besoins réels, mais de nombreuses opérations de base ont été réalisées, telles que le routage, la gestion des statuts, les composants de l'interface utilisateur, etc. Cet article n'est qu'une brève introduction à l'ensemble du processus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!