vue scaffolding to build the backend

In recent years, front-end development has become more and more popular, among which the Vue framework is the most popular. For enterprise-level applications, a backend management system is generally required, so this article will introduce how to use Vue scaffolding to build a backend management system.

1. Prerequisites

The first thing you need to have is the basic knowledge of Vue, including components, routing, state management, etc. In addition, Node.js and npm need to be installed, which will not be described here.

2. Create a project

Using Vue scaffolding can quickly and easily build the project structure. First, open the command line interface and enter the following command:

vue create my-project

Among them, my-project is the project name, which can be replaced with the name you want. Next, there will be some configuration options, as shown in the figure below:

Select the default configuration. Next, wait for some time for the project creation to be completed.

3. Install necessary plug-ins and libraries

Projects created using Vue scaffolding already contain some necessary plug-ins and libraries, but in order to make the background management system more complete, some plug-ins need to be installed. and library. In the project root directory, use the following command to install:

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

Here is a brief introduction to the functions of these plug-ins and libraries:

• vue-router: used for front-end routing
• vuex: used for state management
• element-ui: UI component library based on Vue, which can provide rich components
• axios: used for ajax requests

4. Create page layout

First, we need to create an external frame to keep the page header and sidebar fixed when the page switches. The layout component provided by Element-UI is used here:

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

This is the most basic layout. We can add our own content in the header and sidebar as needed. It should be noted that the router-view component provided by Vue-Router is used in the el-main part to display pages corresponding to different routes.

5. Configure routing

Routing is an integral part of front-end development. Vue-Router is provided in Vue to implement routing functions. In the src directory, find the router directory, edit the index.js file, and add the following code:

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

A route named Dashboard is created here, and Layout is used as the root route. The Layout component includes content such as the header and sidebar, and router-view for displaying subpages. It should be noted that subpages need to be loaded asynchronously to improve the loading speed of the page, so the import() function provided by Vue is used to achieve on-demand loading.

6. State management

In terms of global state management, Vue provides Vuex for implementation. In the src directory, create the store.js file and add the following code:

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

This defines a state called sidebar, which is used to control the display and hiding of the sidebar, and provides a toggleSideBar method , used to change the state of the sidebar.

7. Use Element-UI components

Element-UI provides many commonly used UI components, which can greatly improve development efficiency. Here is an introduction to commonly used components:

• el-button: button component
• el-table: table component
• el-form: form component
• el-input: input box component
• el-select: drop-down box component
• el-pagination: paging component
• etc.

Here we take the el-table component as an example to introduce how to use it:

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

Here, we use an array named tableData as the table data source and define three columns: date, name and address. .

8. Use axios to send a request

At the end, we need to use axios to send a request to obtain background data. In the src directory, create the api directory and create a file named user.js in it:

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

This encapsulates two methods of obtaining the user list and adding users, and uses the axios plug-in installed previously. send request.

At this point, a simple backend management system has been set up. Of course, specific functions still need to be expanded according to actual needs, but many basic operations have been completed, such as routing, status management, UI components, etc. This article is just a brief introduction to the entire process.

The above is the detailed content of vue scaffolding to build the backend. For more information, please follow other related articles on the PHP Chinese website!