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

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

项目创建


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

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


网络异常,图片无法展示
|


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


网络异常,图片无法展示
|


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


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


网络异常,图片无法展示
|


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


网络异常,图片无法展示
|


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


网络异常,图片无法展示
|


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


网络异常,图片无法展示
|


后端接口准备


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

网络异常,图片无法展示
|



前端代码开发


main.js配置


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

我们这个项目需要在main.js中导入我们需要的axioselement-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,设置默认baseURL
import axios from 'axios'
axios.defaults.baseURL='http://localhost:2345'
// 创建vue实例app
const app = createApp(App)
// 启动我们需要的插件
app.use(router)
app.use(ElementPlus)
// 配置vue启用axios
app.config.globalProperties.$axios = axios
// 挂载app
app.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>
复制代码


这个页面主要是加载了element-plus的基础按钮组件,以确认element-plus加载成功,最主要的showinfo方法,它是通过axios对后端进行请求,将获取到数据更新到infos这个响应式变量中,实现对页面的动态渲染。


router/index.js中添加路由


router/index.js中,我们要到导入上面我们定义好的视图,同时定义一个路由/demo,当我们请求这个路由/demo的时候,视图将会被加载到router-view中。


网络异常,图片无法展示
|


路由分析


当我们点击首页的Demo连接,会跳转到我们在router-link中定义的to="/demo"这个URI上,这时候,通过我们定义的路由就能发现这个路由是指向名为Demo的视图,然后将名为Demo的视图渲染到router-view中。


项目测试


访问/demo


点击主页的Demo链接,不出意外我们能够看到的页面中的router-view部分被Demo视图渲染


网络异常,图片无法展示
|


我们看到,页面已经成功加载,并且表格已经被默认的数据所渲染。


测试Demo的Script功能


Demo视图的Script中的逻辑为,当点击更新infos按钮时,出发showinfo方法的执行,对infos的数据进行更新,同时页面的el-table也会进行响应式的更新


网络异常,图片无法展示
|


到此,我们的前后端分离Demo演示结束。

相关文章
|
23天前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
17天前
|
Python
axios的get请求传入数组参数
axios的get请求传入数组参数
|
3天前
|
小程序 安全
Fiddler抓取小程序后端请求导入AppScan扫描快捷方法
【8月更文挑战第26天】这是一种利用 Fiddler 捕获小程序后端请求并导入 AppScan 进行安全扫描的方法。首先安装配置 Fiddler 并设置手机代理,通过 Fiddler 捕获请求;接着导出这些请求为 .saz 文件,并在 AppScan 中导入此文件,配置扫描参数后启动扫描以检测安全漏洞。操作时需确保有合法授权并遵循相关法规。尽管不同版本软件操作细节可能有所不同,但整体流程类似。
|
8天前
|
存储 缓存 移动开发
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
|
16天前
|
JavaScript C++
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
本文详细介绍了如何使用Vite创建Vue3+TypeScript项目,并整合ElementPlus、Axios、Pinia、Less、Vue-router等组件或插件的步骤和配置方法。
144 1
|
7天前
|
API
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
|
11天前
|
移动开发 JavaScript 前端开发
"解锁axios GET请求新姿势!揭秘如何将数组参数华丽变身,让你的HTTP请求在云端翩翩起舞,挑战技术极限!"
【8月更文挑战第20天】二维码在移动应用中无处不在。本文详述了在UniApp H5项目中实现二维码生成与扫描的方法。通过对比插件`uni-app-qrcode`和库`qrcode-generator`生成二维码,以及使用插件和HTML5 API进行扫描,帮助开发者挑选最佳方案。无论是即插即用的插件还是灵活的JavaScript实现,都能满足不同需求。
21 0
|
16天前
|
JavaScript 前端开发 C++
使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件
本文详细记录了如何使用Vue-Cli工具创建一个Vue3+TypeScript项目,并整合ElementPlus组件库和Axios等插件,包括项目的创建、配置、启动和插件封装使用等步骤。
23 0
|
11天前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
11天前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
下一篇
云函数