Vue3+ElementPlus+Axios 实现从后端请求数据并渲染

作者：Python研究所

2022 年 6 月 27 日
本文字数：1737 字
阅读完需：约 6 分钟

项目创建

我们启动vue ui并创建自定义项目。

点击创建项目，输入项目名称，选择包管理器为npm，点击下一步

勾选这几个我们需要的插件，点击下一步

我们去掉了EsLint插件的选项，避免一些额外的错误提示。

选择vue版本为3.x，点击创建项目

项目创建完成后自动进入我们创建的demodemo项目中，我们点击依赖，点击右上角安装依赖，分别搜索axios、element-plus并安装。安装后让如图所示

然后我们点击任务，启动serve

然后我们访问：localhost:8080 就可以看到 router 模式的首页

后端接口准备

我们使用 FastApi 开发了一个后端接口：localhost:2345/test/info

前端代码开发

main.js 配置

最基础的，最重要的配置，在这里我们创建vue实例，同时对全局进行配置。

我们这个项目需要在main.js中导入我们需要的axios，element-plus模块，以供在视图（组件）中使用，同时配置axios和启用它。

import { createApp } from 'vue'import App from './App.vue'import router from './router'// 导入插件import 'element-plus/dist/index.css'import ElementPlus from 'element-plus'// 导入axios，设置默认baseURLimport axios from 'axios'axios.defaults.baseURL='http://localhost:2345'
// 创建vue实例appconst app = createApp(App)// 启动我们需要的插件app.use(router)app.use(ElementPlus)// 配置vue启用axiosapp.config.globalProperties.$axios = axios// 挂载appapp.mount('#app')

复制代码

App.vue 添加新的 router-link

这样一来首页就多了一个链接，供我们跳转。

准备视图（组件）

当点击首页的Demo链接，通过路由就会将我们写好的视图页面加载到首页router-view中。

<template>    <h1>这里是Demo！</h1>    <el-row>        <el-button>Default</el-button>        <el-button type="primary">Primary</el-button>        <el-button type="success">Success</el-button>        <el-button type="info">Info</el-button>        <el-button type="warning">Warning</el-button>        <el-button type="danger">Danger</el-button>        <el-button @click='showinfo'>更新infos</el-button>      </el-row>      <p>{{info}}</p>      <p>{{infos}}</p>       <el-table :data="infos" border style="width: 100%">          <el-table-column prop="id" label="Date" width="180" />          <el-table-column prop="name" label="Name" />        </el-table></template>
<script>  export default{      name: "demo",      data() {          return {              infos: [{id: 1,name: 'phyger'}],              info: "hello vue...",          }      },      methods: {          showinfo(){              this.$axios.get('/test/info')              .then(response=>{                  this.infos = response.data;                  console.log(response.data);              })              .catch(error=>{                  console.log(error);              });          },      },  }</script>
<style></style>