バックエンドを構築するための vue スキャフォールディング

近年、フロントエンド開発の人気が高まっており、その中でも Vue フレームワークが最も人気があります。エンタープライズレベルのアプリケーションの場合、一般にバックエンド管理システムが必要となるため、この記事では Vue スキャフォールディングを使用してバックエンド管理システムを構築する方法を紹介します。

1. 前提条件

最初に必要なのは、コンポーネント、ルーティング、状態管理などを含む、Vue の基本的な知識です。さらに、Node.js と npm をインストールする必要がありますが、ここでは説明しません。

2. プロジェクトの作成

Vue スキャフォールディングを使用すると、プロジェクト構造を迅速かつ簡単に構築できます。まず、コマンド ライン インターフェイスを開き、次のコマンドを入力します。

vue create my-project

このうち、my-project はプロジェクト名で、任意の名前に置き換えることができます。次に、以下の図に示すように、いくつかの構成オプションがあります。

デフォルトの構成を選択します。次に、プロジェクトの作成が完了するまでしばらく待ちます。

3. 必要なプラグインとライブラリをインストールする

Vue スキャフォールディングを使用して作成されたプロジェクトには、すでにいくつかの必要なプラグインとライブラリが含まれていますが、バックグラウンド管理システムをより完全なものにするために、いくつかのプラグインが必要です。 -ins とライブラリをインストールする必要があります。プロジェクトのルート ディレクトリで、次のコマンドを使用してインストールします:

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

ここでは、これらのプラグインとライブラリの機能について簡単に紹介します:

• vue-router: usedフロントエンドルーティング用
• vuex: 状態管理に使用
#element-ui: 豊富なコンポーネントを提供できる Vue ベースの UI コンポーネント ライブラリ
• ##axios: ajax に使用request
• #4. ページ レイアウトの作成

#まず、ページが切り替わったときにページ ヘッダーとサイドバーを固定するための外部フレームを作成する必要があります。 Element-UI によって提供されるレイアウト コンポーネントがここで使用されます:

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

これは最も基本的なレイアウトであり、必要に応じてヘッダーとサイドバーに独自のコンテンツを追加できます。 Vue-Router が提供する router-view コンポーネントは、el-main 部分でさまざまなルートに対応するページを表示するために使用されることに注意してください。

5. ルーティングの設定

ルーティングはフロントエンド開発の不可欠な部分であり、ルーティング機能を実装するために Vue-Router が Vue に提供されています。 src ディレクトリで、router ディレクトリを見つけ、index.js ファイルを編集し、次のコードを追加します。

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

Dashboard という名前のルートがここに作成され、Layout がルート ルートとして使用されます。 Layout コンポーネントには、ヘッダーやサイドバーなどのコンテンツと、サブページを表示するためのルータービューが含まれます。ページの読み込み速度を向上させるにはサブページを非同期で読み込む必要があるため、オンデマンド読み込みを実現するために Vue が提供する import() 関数が使用されることに注意してください。

6. 状態管理

グローバルな状態管理の観点から、Vue は実装用に Vuex を提供します。 src ディレクトリで、store.js ファイルを作成し、次のコードを追加します。

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

これは、サイドバーの表示と非表示を制御するために使用されるサイドバーと呼ばれる状態を定義し、 toggleSideBar メソッドを提供します。サイドバーの状態を変更するために使用されます。

7. Element-UI コンポーネントを使用する

Element-UI には、開発効率を大幅に向上させる、一般的に使用される UI コンポーネントが多数用意されています。一般的に使用されるコンポーネントの紹介は次のとおりです。

el-button: ボタン コンポーネント

el-table: テーブル コンポーネント
• el-form: フォーム コンポーネント
• el-input: 入力ボックスコンポーネント
• el-select: ドロップダウンボックスコンポーネント
• el-pagination: ページングコンポーネント
• etc.
• ここでは、el-table コンポーネントを例として使用方法を紹介します。

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

ここでは、tableData という名前の配列をテーブル データ ソースとして使用し、3 つの列を定義します: date、名前と住所です。

8. axios を使用してリクエストを送信する

最後に、axios を使用してバックグラウンド データを取得するリクエストを送信する必要があります。 src ディレクトリで、api ディレクトリを作成し、その中に 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
  })
}

これは、ユーザー リストの取得とユーザーの追加の 2 つのメソッドをカプセル化し、以前にインストールした axios プラグインを使用します。リクエストを送信します。

この時点で、シンプルなバックエンド管理システムがセットアップされました。もちろん、実際のニーズに応じて特定の機能を拡張する必要はありますが、ルーティング、ステータス管理、UI コンポーネントなど、多くの基本的な操作は完了しています。この記事は、プロセス全体を簡単に紹介するものです。

以上がバックエンドを構築するための vue スキャフォールディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。