JavaWeb——Vue组件库Element（6/6）：Axios异步加载数据（安装、导入并使用axios，查看效果，性别、图像数据处理，最终效果，完整代码）

最新推荐文章于 2024-11-10 15:10:09 发布

qiyi.sky

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量352

点赞数 4

分类专栏： JavaWeb 文章标签： vue.js javascript ecmascript 前端前端框架

本文链接：https://blog.csdn.net/li13437542099/article/details/141287989

版权

JavaWeb 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

目前我们已经完成了页面的布局以及页面中各个组件的制作，剩下最后一步是将列表页面渲染展示出来。

要完成列表数据的异步加载，需要用到之前讲到的技术 Axios 来发送异步请求。

Vue项目中使用Axios：

在项目目录下安装axios：npm install axios；
需要使用axios时，导入axios：import axios from 'axios';

安装axios

在 Vue 项目中使用 Axios 需先安装，在当前项目目录下执行 “npm install axios” 指令。安装完成后需重启项目。

导入并使用

项目启动后，在需要使用 Axios 的页面通过 import 导入。在 vs code 中，在 script 顶部通过 import 关键字从 Axios 组件导入。

在view中的钩子方法中发送异步请求加载数据，比如在 mounted 中，通过 get 请求并附上 URL 地址，加上成功和失败的回调函数。在成功的回调中，将响应回来的数据 result.data 赋值给数据模型 this.data.data，从而实现数据渲染。

查看效果

再次打开浏览器查看效果，已展示所查询返回的四条数据：

但有两块信息需处理，即性别和图像。

性别数据处理

对于性别，参照 Element 中复杂表格的写法，通过插槽对数据进行转换。

声明插槽，使用插槽获取字段值通过 scope. row，再通过三元运算符判断，若值为 1 展示 “男”，否则展示 “女”。

图像数据处理

对于图像字段，同样添加插槽，使用<img>标签，

通过动态绑定 src 属性为 scope.row.image 展示图片，并设置尺寸 width 为 80x，height 为 90x。

左侧侧边栏

最后解决左侧侧边栏边框线问题，

通过 CSS 样式中的 border 为 el-aside 添加边框线，出现滚动条是因为宽度设置较小，

调整为 230px 后边框线正常。

最终效果

完整代码

文件：EmpView.vue

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tlias 智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside width="230px" style="border: 2px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1" style="background-color: rgb(215, 215, 215)">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理 &nbsp;&nbsp; >></template>

              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.entryDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="80px" height="90px">
              </template>
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entryDate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updateTime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br />
          <!-- 分页条 -->
          <el-pagination
            background
            layout="total,sizes,prev, pager, next,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entryDate: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      alert("查询数据");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    //发送异步请求，获取数据
    axios.get("https://yapi.pro/mock/401965/user/getById").then((result) => {
      this.tableData = result.data.data;
    });
  },
};
</script>

<style>
</style>

END

学习自：黑马程序员——JavaWeb课程