“This is the 22nd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

In the previous article, I showed how to simulate login by canceling the simulated data configuration environment variables. Today, I will try to access the back-end interface directly.

Change the language

After entering the frame, I found that it was a very English interface, so the first thing I wanted to do was to convert it into Chinese. In the SRC/main. Js

import locale from 'element-ui/lib/locale/lang/en' // lang i18n
Copy the code

Instead of

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
Copy the code

The SRC /router/index list contains the third, fourth, and fifth JSON data named constantRoutes. The first and second json data are the 404 page and login routes. Each JSON represents a route. Represents which component to load on a single page. These routes are triggered by the click of an element on the page. There are other ways to trigger these routes.

{ path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: {title: 'tugui 墝 ', icon: 'dashboard'}}]}, {path: '/example', Component: Redirect: '/example/table', Name: 'example', meta: {title:' navigation data ', icon: 'el-icon-s-help' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: {title: 'category management ', icon: 'table'}}, {path: 'tree', name: 'tree', Component: () => import('@/views/tree/index'), meta: {title: 'domain management ', icon: 'tree'}}]},Copy the code

Change these three to see the effect:

The new interface

Go to the SRC/API folder and create url.js and type:

import request from '@/utils/request'

export function getTypeList() {
  return request({
    url: '/admin/getTypeList',
    method: 'get'
  })
}

Copy the code

Import, modify interfaces and fields

Modify SRC /view/table/index.vue modify imported interface methods:

import { getTypeList } from '@/api/url'
Copy the code

Method of replacing an interface:

  methods: {
    fetchData() {
      this.listLoading = true
      getTypeList().then(response => {
        this.list = response.data
        this.listLoading = false
      })
    }
  }
Copy the code

Modify template content:

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.ID }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.Name }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
Copy the code

Look at the results:

conclusion

Although the change of things is not much, but as a beginner I saw a lot of things that have never been in touch with, here is a summary of what things:

slot

VUE stands for slot, this list uses slot slot-scope to bind data. El-table uses V-bind. The slot can be thought of as an HTML template. The index.vue has three components. The two components that use the slot use values passed from the parent component. The parent component is a table component that binds a list of data, scope.row being the data object of the current row. You can access object detail data using.

v-loading

Use the built-in Element UI component to control page loading effects using true and False, as well as customizing colors, alternative styles, and sizes. Elemental-loading-text =” loading”

The table component

Highlight-current-row: Turns on list selection and whether to highlight the current row. Fit: Specifies whether the width of the column is self-spread. Does the border have a vertical border? The next section continues to access other add, delete, change, check interface ~