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

相关文章
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
222 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
166 1
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
715 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
208 0
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
3月前
|
vue使用iconfont图标
vue使用iconfont图标
162 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
83 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。

热门文章

最新文章

  • 1
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    161
  • 2
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    600
  • 3
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    268
  • 4
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    59
  • 5
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    60
  • 6
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    137
  • 7
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    176
  • 8
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    70
  • 9
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    45
  • 10
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    62
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等