vue-Element-axios architecture calls api for data display

1 Global Installation vue-cli

Enter command: NPM install vue-cli-g

2 Create project framework

Input command: vue init webpack vueapi

Enter the project name, project description, project author and so on according to the prompt in turn.

4. Enter the vueapi directory

Enter command: cd vueapi

5. Install element-ui

Input command: NPM I element-ui-S

Because project development is based on Vue.js and elementUI, of course, import Vue.j packages and elementUI packages:

npm install --save vue element-ui

6. Install vue-router

To jump pages, use vue-router:

Input command: npm install --save vue-router

7. Install axios

To retrieve data from the back end, ajax requests are made using axios officially recommended by vue:

Input command: npm install --save axios

Startup project

Input: npm run dev

The directory of the vue project is constructed as follows:

buid: Building script directories
config: Building configuration directory
node_modules: rely on node Toolkit catalogue
src: Source directory
assets: Resource directory
components: Component directory
router: 
App.vue page vue assembly
main.js: Page entry js file
static: Static File Directory
test: Test File Directory
.eslintrc.js: es Syntax Check Configuration
index.html: Entry page
package.json : Project Description File

Calling back-end interfaces: axios needs to be introduced

Introducing in main.js

import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.$http.defaults.baseURL = '' // `baseURL` Automatically append to the ____________ `url` In front, unless `url` It's an absolute URL

The following figure (edit the front page)

<template>
  <el-container style="height: 680px; border: 10px solid #eee">
    <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>Navigation one</template
          >
          <el-menu-item-group>
            <template slot="title"
              >Group one</template
            >
            <el-menu-item index="1-1">Option 1</el-menu-item>
            <el-menu-item index="1-2">Option 2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group 2">
            <el-menu-item index="1-3">Option 3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title"
              >Option 4</template
            >
            <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"
            ><i class="el-icon-menu"></i>Navigation two</template
          >
          <el-menu-item-group>
            <template slot="title"
              >Group one</template
            >
            <el-menu-item index="2-1">Option 1</el-menu-item>
            <el-menu-item index="2-2">Option 2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group 2">
            <el-menu-item index="2-3">Option 3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title"
              >Option 4</template
            >
            <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><i class="el-icon-setting"></i>Navigation three</template
          >
          <el-menu-item-group>
            <template slot="title"
              >Group one</template
            >
            <el-menu-item index="3-1">Option 1</el-menu-item>
            <el-menu-item index="3-2">Option 2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group 2">
            <el-menu-item index="3-3">Option 3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title"
              >Option 4</template
            >
            <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>See</el-dropdown-item>
            <el-dropdown-item>Newly added</el-dropdown-item>
            <el-dropdown-item>delete</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>Xiao Hu Wang</span>
      </el-header>

      <el-main>
        <el-table :data="list">
          <el-table-column prop="datatext" label="date" width="140">
          </el-table-column>
          <el-table-column prop="version" label="Full name" width="120">
          </el-table-column>
          <el-table-column prop="id" label="address"> </el-table-column>
          <el-table-column prop="text" label="describe"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

template

css js:

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>

export default {

  data () {
    const item = {
      date: '2016-05-02',
      name: 'Xiao Hu Wang',
      address: '1518 lane, Jinsha River Road, Putuo District, Shanghai'

    }

    return {
      list: [],
      tableData: Array(20).fill(item)
    }
  },

  created () {
    this.getlist()
  },
  methods: {
    getlist () {
      let _this = this
      _this.$http.get('https://localhost:44314/api/Values').then(res => {
        _this.list = res.data
      })
    }
  }
}
</script>

Data Fill Page

Page:
  <el-main>
        <el-table :data="list">
          <el-table-column prop= "datatext" label= "date" width= "140">
          </el-table-column>
          <el-table-column prop= "version" label= "name" width= "120" >
          </el-table-column>
          <el-table-column prop= "id" label= "address"> </el-table-column>
          <el-table-column prop= "text" label= "description"> </el-table-column>
        </el-table>
      </el-main>

Run as follows

Programming VIP

vue-Element-axios architecture calls api for data display

Popular Keywords