调用接口，发送网络请求并渲染数据到页面

发送axios请求

一、在src目录下的until文件夹中创建request.js文件

在request.js(封装请求文件)中引入

二、发送请求

在api文件夹的建立文件

使用qs插件，将要传递到参数序列化
在项目中使用命令行工具输入：npm install qs
安装完成后在需要用到的组件中：import qs from 'qs’

qs.parse()是将URL解析成对象的形式

qs.stringify()将对象 序列化成URL的形式以&进行拼接

引入request.js和qs

而我需要获取到的数据：

所以在发送get请求时使用qs.stringify()

import request from '../until/request'
import qs from 'qs'

// get 请求
export function showBlog(params) {
  return request({
    url: 'api/blog/searchBlog' + '?' + qs.stringify(params, {
      indices: false
    }),
    method: 'get'
  })
}

// put 请求
export function edit_blog(data) {
  return request({
    url: 'api/blog',
    method: 'put',
    data: data
  })
}

// post请求 需要 & 拼接
export function add_diary(params) {
  return request({
    url: 'api/diary',
    method: 'post',
    params
  })
}
// delete 请求
export function del_diary(diaryId) {
  let params={
    diaryId:diaryId
  }
  return request({
    url: 'api/diary',
    method: 'delete',
    params
  })
}

三、使用element组件，写出大致样式

原本的代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

表格中的数据都是固定的，现在就需要从后端获取数据并渲染到表格中了。
当然，表格的样式还需要自己改成需要的结构。

四、引入api.js中的请求方法，渲染页面

import { showBlog, edit_blog } from "../api/api";

将原本tableData中的内容清空

tableData: [],

进入页面调用的方法：

created() {
	// 调用show方法
    this.show();
  },
// 进入页面
    show() {
      let con_test = {
        // 当前页
        page: this.currentPage,
        // 每页数据条数
        size: this.size,
      };
      console.log(con_test, "返回page,size");
      showBlog(con_test)
        .then((rec) => {
          this.tableData = rec.data.articles;
          this.totalSize = rec.data.total;
          console.log(rec, "调用接口，测试成功");
        })
        .catch((err) => {
          console.log("返回错误", err);
        });
    },

控制台返回的数据：

将表格中每一列绑定相应的后端数据的内容

property=“creatTime”,冒号中换为相应的名称

<div>
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" align="center" width="50%">
        </el-table-column>
        <el-table-column
        
          property="creatTime"
          label="时间"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column
          property="title"
          label="标题"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="tags.tagName"
          label="标签"
          align="center"
        >
          <template slot-scope="scope">
            {{showTags(scope.row)}}
          </template>
        </el-table-column>
        <el-table-column
          property="visitNumber"
          label="阅读数"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column
          property="commentNumber"
          label="评论数"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column
          property="publish"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.publish == 0" type="info">草稿</el-tag>
            <el-tag v-else type="success">已发布</el-tag>
          </template>
        </el-table-column>

渲染页面

就酱. @_@