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演示结束。

相关文章
|
5月前
|
监控 Java 应用服务中间件
低并发编程|如何用720个请求让后端服务器瘫痪
本次故障因应用启动时未有效校验核心依赖模块初始化异常,导致后续请求处理中抛出无法捕获的错误,引发线程阻塞,最终耗尽HSF线程池,服务不可用。排查发现类初始化失败且异常未被正确处理,结合线程无限等待问题,确认为依赖初始化异常与流处理中断所致。修复措施包括加强启动校验、捕获Throwable及设置合理超时。总结指出,系统稳定性需从细节入手,防微杜渐,避免连锁故障。
低并发编程|如何用720个请求让后端服务器瘫痪
|
11月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
653 1
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
245 2
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `&quot;repeat&quot;`,以符合 Django 的解析要求。
548 2
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
191 0
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
929 0
|
3月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
155 1
|
资源调度 JavaScript
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?