vue perancah untuk membina bahagian belakang

Dalam beberapa tahun kebelakangan ini, pembangunan bahagian hadapan telah menjadi semakin popular, antaranya rangka kerja Vue adalah yang paling popular. Untuk aplikasi peringkat perusahaan, sistem pengurusan bahagian belakang biasanya diperlukan, jadi artikel ini akan memperkenalkan cara menggunakan perancah Vue untuk membina sistem pengurusan bahagian belakang.

1. Prasyarat

Perkara pertama yang anda perlu tahu ialah pengetahuan asas Vue, termasuk komponen, penghalaan, pengurusan negeri, dll. Selain itu, Node.js dan npm perlu dipasang, yang tidak akan diterangkan di sini.

2. Buat projek

Menggunakan perancah Vue boleh membina struktur projek dengan cepat dan mudah. Mula-mula, buka antara muka baris arahan dan masukkan arahan berikut:

vue create my-project

Antaranya, my-project ialah nama projek, yang boleh digantikan dengan nama yang anda mahukan. Seterusnya, akan terdapat beberapa pilihan konfigurasi, seperti yang ditunjukkan dalam rajah di bawah:

Pilih konfigurasi lalai. Seterusnya, tunggu beberapa ketika untuk penciptaan projek selesai.

3. Pasang pemalam dan perpustakaan yang diperlukan

Projek yang dibuat menggunakan perancah Vue sudah mengandungi beberapa pemalam dan perpustakaan yang diperlukan, tetapi untuk menjadikan sistem pengurusan latar belakang lebih lengkap, beberapa palam -in perlu dipasang dan perpustakaan. Dalam direktori akar projek, gunakan arahan berikut untuk memasang:

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

Berikut ialah pengenalan ringkas kepada fungsi pemalam dan perpustakaan ini:

• vue-router: digunakan untuk penghalaan bahagian hadapan
• vuex: digunakan untuk pengurusan negeri
• elemen-ui: Pustaka komponen UI berdasarkan Vue, yang boleh menyediakan komponen kaya
• aksios: digunakan untuk ajax permintaan

4. Buat reka letak halaman

Pertama, kita perlu mencipta bingkai luaran untuk memastikan pengepala halaman dan bar sisi tetap apabila halaman bertukar. Komponen reka letak yang disediakan oleh Element-UI digunakan di sini:

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

Ini adalah reka letak paling asas Kami boleh menambah kandungan kami sendiri dalam pengepala dan bar sisi seperti yang diperlukan. Perlu diingat bahawa komponen paparan penghala yang disediakan oleh Vue-Router digunakan di bahagian el-utama untuk memaparkan halaman yang sepadan dengan laluan yang berbeza.

5. Konfigurasikan penghalaan

Penghalaan adalah bahagian penting dalam pembangunan bahagian hadapan disediakan dalam Vue untuk melaksanakan fungsi penghalaan. Dalam direktori src, cari direktori penghala, edit fail index.js dan tambah kod berikut:

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

Di sini, laluan bernama Papan Pemuka dicipta dan Reka Letak digunakan sebagai laluan akar. Komponen Reka Letak termasuk kandungan seperti pengepala dan bar sisi, dan paparan penghala untuk memaparkan subhalaman. Perlu diingatkan bahawa subhalaman perlu dimuatkan secara tidak segerak untuk meningkatkan kelajuan pemuatan halaman, jadi fungsi import() yang disediakan oleh Vue digunakan untuk mencapai pemuatan atas permintaan.

6. Pengurusan negeri

Dari segi pengurusan negeri global, Vue menyediakan Vuex untuk pelaksanaan. Dalam direktori src, cipta fail store.js dan tambah kod berikut:

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

Ini mentakrifkan keadaan yang dipanggil bar sisi, yang digunakan untuk mengawal paparan dan penyembunyian bar sisi dan menyediakan kaedah toggleSideBar , digunakan untuk menukar keadaan bar sisi.

7. Gunakan komponen Element-UI

Element-UI menyediakan banyak komponen UI yang biasa digunakan, yang boleh meningkatkan kecekapan pembangunan. Berikut ialah pengenalan kepada komponen yang biasa digunakan:

• el-button: button component
• el-table: table component
• el-form: form component
• el-input: komponen kotak input
• el-select: komponen kotak lungsur
• el-pagination: komponen paging
• dsb.

Di sini kami mengambil komponen el-table sebagai contoh untuk memperkenalkan cara menggunakannya:

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

Di sini, kami menggunakan tatasusunan bernama tableData sebagai sumber data jadual dan mentakrifkan tiga lajur: tarikh, nama dan alamat.

8. Gunakan axios untuk menghantar permintaan

Pada akhirnya, kita perlu menggunakan axios untuk menghantar permintaan untuk mendapatkan data latar belakang. Dalam direktori src, cipta direktori api dan cipta fail bernama user.js di dalamnya:

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

Ini merangkumi dua kaedah untuk mendapatkan senarai pengguna dan menambah pengguna, dan menggunakan pemalam axios yang dipasang sebelum ini. Hantar permintaan.

Pada ketika ini, sistem pengurusan bahagian belakang yang ringkas telah disediakan. Sudah tentu, fungsi tertentu masih perlu dikembangkan mengikut keperluan sebenar, tetapi banyak operasi asas telah diselesaikan, seperti penghalaan, pengurusan status, komponen UI, dll. Artikel ini hanyalah pengenalan ringkas kepada keseluruhan proses.

Atas ialah kandungan terperinci vue perancah untuk membina bahagian belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!