vue-Element-axios搭建調用api進行數據展示

1全局安裝vue-cli

輸入命令：npm install vue-cli -g

2創建項目框架

輸入命令：vue init webpack vueapi

3依次按照提示輸入，項目名、項目描述、項目作者等等，

4.進入vueapi目錄

輸入命令： cd vueapi

5.安裝element-ui

輸入命令：npm i element-ui -S

因為是基於Vue.js和elementUI進行的項目開發，所以當然要導入Vue.j包和elementUI包：

npm install --save vue element-ui

6.安裝vue-router

要進行頁面跳轉，所以要用到vue-router：

輸入命令：npm install --save vue-router

7.安裝axios

要從后端獲取數據，所以要ajax請求，用vue官方推薦的axios：

輸入命令：npm install --save axios

啟動項目

輸入：npm run dev

構建vue項目目錄大致如下：

buid：構建腳本目錄
config：構建配置目錄
node_modules：依賴node工具包目錄
src：源碼目錄
assets：資源目錄
components：組件目錄
router：
App.vue 頁面vue組件
main.js：頁面入口js文件
static：靜態文件目錄
test：測試文件目錄
.eslintrc.js：es語法檢查配置
index.html：入口頁面
package.json ：項目描述文件

 

 調用后台接口：需要引入axios

在main.js 引入

import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.$http.defaults.baseURL = '' // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL

 

如下圖（編輯前端頁面）

<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>導航一</template
          >
          <el-menu-item-group>
            <template slot="title"
              >分組一</template
            >
            <el-menu-item index="1-1">選項1</el-menu-item>
            <el-menu-item index="1-2">選項2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分組2">
            <el-menu-item index="1-3">選項3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title"
              >選項4</template
            >
            <el-menu-item index="1-4-1">選項4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"
            ><i class="el-icon-menu"></i>導航二</template
          >
          <el-menu-item-group>
            <template slot="title"
              >分組一</template
            >
            <el-menu-item index="2-1">選項1</el-menu-item>
            <el-menu-item index="2-2">選項2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分組2">
            <el-menu-item index="2-3">選項3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title"
              >選項4</template
            >
            <el-menu-item index="2-4-1">選項4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><i class="el-icon-setting"></i>導航三</template
          >
          <el-menu-item-group>
            <template slot="title"
              >分組一</template
            >
            <el-menu-item index="3-1">選項1</el-menu-item>
            <el-menu-item index="3-2">選項2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分組2">
            <el-menu-item index="3-3">選項3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title"
              >選項4</template
            >
            <el-menu-item index="3-4-1">選項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>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>刪除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <el-table :data="list">
          <el-table-column prop="datatext" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="version" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="id" label="地址"> </el-table-column>
          <el-table-column prop="text" label="描述"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</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: '王小虎',
      address: '上海市普陀區金沙江路 1518 弄'

    }

    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>

數據填充頁面

頁面：
  <el-main>
        <el-table :data="list">
          <el-table-column prop="datatext" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="version" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="id" label="地址"> </el-table-column>
          <el-table-column prop="text" label="描述"> </el-table-column>
        </el-table>
      </el-main>

 

運行如下