vue调用接口获取后台数据_使用Vue实现调用接口加载页面初始数据

最新推荐文章于 2024-06-16 11:10:00 发布
最新推荐文章于 2024-06-16 11:10:00 发布
阅读量5.6k 收藏 3
点赞数
文章标签： vue调用接口获取后台数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29816241/article/details/112964671
版权
本文介绍如何在Vue应用中通过axios调用接口获取后台数据，并在页面加载时填充初始信息。示例中详细说明了Vue的mounted生命周期钩子、axios的使用以及数据绑定的过程，强调了在异步操作中正确处理this的重要性。
摘要由CSDN通过智能技术生成

使用Vue实现调用接口加载页面初始数据

闲着没事写了一个电影推荐的网页，很简单，使用的是Vue的实现.

let vm = new Vue({

el:'#content',

data:{

name:'',

pic:'',

actor:'',

detail:'',

link:''

},

mounted:function () {

this.getMovie();

},

methods:{

getMovie:function () {

var _this = this;

let url = '/niuren/getRecommendFilm';

axios.get(url).then(function (res) {

_this.name = res.data.data.name;

_this.pic = res.data.data.pic;

_this.actor = res.data.data.actor;

_this.detail = res.data.data.detail;

_this.link =res.data.data.link;

})

},

goLink:function () {

var _this = this;

window.location.href = _

最低0.47元/天 解锁文章
IC实验室馆长
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qt实现web服务器加载vue应用进行C++和html混合编程-连载【6】-企业级系统开发实战连载系列 -技术栈(vue、element-ui、qt、c++、sqlite)
m0_49654513的博客
09-02 3531
qt实现web服务器加载vue应用进行C++和html混合编程-连载【6】-企业级系统开发实战连载系列 -技术栈vue、element-ui、qt、c++、sqlite标题作者背景描述：为什么写此系列文章？解决方案：预览Demo应用程序的架构下面是实操步骤：添加全局静态对象文件global.h文件main.cpp 添加静态资源文件支持：修改 requestmapper.cpp 文件修改配置文件BitPos.ini 标题作者背景描述： 本人就职于外资IT企业，担任电商订单处理产品开发经理一职，领导过非常多次大
vue请求数据接口
u014748857的博客
06-08 529
请求接口： getList() { member_input(this.page, this.per_page).then((res) => { this.tableData = res.data this.total = res.meta.pagination.total }).catch(() => { this.$message.error("获取数据失败"); }); }
axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据
最新发布
2401_84434086的博客
06-16 1116
关于这个Vue + axios 获取接口数据的小demo，实现效果很简单，就是在Vue语法中，通过axios来获取接口的数据，然后打印出来，这里我们使用的是一个笑话的接口，其中重点关注的是如何使用axios、通过axios获取接口数据，因此这里就不介绍Vue的代码了，接下来先了解学习一下axios概要和使用方法（学过的可以直接看案例）。**背景：**以前关于get、post、put等请求，我们第一时间都想到就是jQuery。
前端VUE模拟调用后台接口数据
kk7521的博客
01-26 5144
文章目录前言一、安装axios二、调用后台接口三、主页面四、后台接口第一种方法第二种方法第三种方法五、出现的问题总结 前言 学习并练习前端调用后台返回的接口数据，通过postman模拟返回后台接口 一、安装axios 先安装： npm install axios 然后： npm install --save axios vue-axios 配置模板： import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-a
微信小程序小结(三)
benlalagang的博客
07-09 624
小程序的网络请求、页面事件（上拉刷新、下拉加载更多）加载更多案例
vue两data参数等于res.detail,更新一参数另一参数跟着改变
易函123
10-29 478
问题 vue两data参数等于res.detail,更新一参数另一参数跟着改变 import serviceSkill from "@service/skill" export default{ data(){ return{ datalist:{}, dataOldlist:{}, } }, created(){ this.changeSomething() }, methods(){ changeSomething(){
使用Vue实现调用接口加载页面初始数据
10-16
今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue如何从接口请求数据
08-30
在上面的代码中，我们使用了created钩子函数来调用getImg方法，该方法将发送GET请求到指定的接口以获取数据。 methods 在Vue.js中，我们可以使用methods来定义一些可以被调用的函数。在上面的代码中，我们定义了...
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
10-15
在Vue.js开发过程中，经常会遇到页面初始化时由于数据还未加载完成而导致访问数据字段时出现`undefined`的错误。这个问题通常是由于Vue组件的生命周期导致的，因为Vue组件在数据请求完成前就已经进行了初次渲染。...
vue使用ajax获取后台数据进行显示的示例
10-18
在本示例中，我们将探讨如何使用 Vue.js 和 AJAX（通常指的是 XMLHttpRequest 或者 Fetch API）来从后台获取数据并将其显示在页面上。AJAX 是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。 ...
vue 发送 axios 请求后台接口 并绑定数据,动态加载
weixin_44818729的博客
11-29 4204
1.先在template标签里面命名{{ msg }} 变量名(模板语法) <template> <div> <div class="t3">1111{{ msg }} <p> <input type="text" v-model="detail"> </p>...
vue返回数据取出方式 res.data.data
u012497072的博客
12-22 6745
Vue异步执行接口请求，解决数据获取不到就去加载的问题
qq_43512769的博客
05-28 7365
通过vue的异步请求数据的方法，去解决页面加载但是没有数据的问题 在main.js中引入全局异步请求的方法。代码如下 //全局引用异步执行请求方法 这里的可以通过传入在某个页面想要请求的接口 Vue.prototype.$visitStore = async (option) => { //如果是ajax，注意要加同步等待 await http.get({ url: '/s***e/ch****ys', // url: option，直接这样引用即可，我这里是写死了 }).t
vue根据后端返回的数据动态判断加载不同的模板，可以根据后端返回的数据顺序加载模块页面。
qq_45269026的博客
06-23 859
根据后端返回的数据顺序动态加载模板模块
vue 父子组件通信（props） ：子组件获取父组件页面初始化时接口返回的值
znavdn的博客
08-24 451
vue 父子组件通信
vue中使用axios以及mock进行ajax请求数据模拟
izwell的博客
08-27 1501
使用axios以及mock进行ajax请求数据模拟 需要安装axios以及mock npm install --save axios mockjs 在文件中引入axios以及mockjs import Mock from 'mockjs' import axios from 'axios' 配置mock模拟假数据 Mock.mock('/a.php', { 'yewe|4': ...
vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-10 2760
一、本地存储： localStorage.setItem('uqid','REgaI2eAT9yDfpdc'); //存储本地（传死参） var uqid = localStorage.getItem('uqid'); // 获取存储本地值 或者 var orderSn = 20; localStorage.setItem('orderSn',orderSn); var...
vue 打开页面自动获取数据_关于vue的页面跳转后，如何每次进入页面时都能获取后台数据...
weixin_42166623的博客
01-17 4391
关于vue的页面跳转后，如何每次进入页面时都能获取后台数据watch+mouted首先说问题。一.页面的数据来自后台，即会发起请求从后台取值。二.子组件的数据刷新的问题，即每次进入父组件的时候，其相关子组件的数据需要重新从后台取值。1.答：关于第一个问题。一般来讲我们会在vue的created的生命周期中实现，向后台发起请求获取数据。但是这样会带来一个问题。1.1.我需要每次进入页面的时候都从后台...
使用vue实现调用接口加载页面初始数据
08-30
使用Vue实现调用接口加载页面初始数据可以通过以下步骤进行: 1. 首先，在Vue的组件中定义一个数据对象，用于存储接口返回的数据。 2. 在组件的created或mounted钩子函数中，使用Vue的内置资源库axios发起网络请求调用接口。 3. 在成功返回数据的回调函数中，将接口返回的数据赋值给组件的数据对象。 下面是一个简单的示例： ```html <template> <div> <h1>{{ title }}</h1> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { title: '', items: [] }; }, created() { axios.get('api-url') .then(response => { this.title = response.data.title; this.items = response.data.items; }) .catch(error => { console.error(error); }); } }; </script> ``` 在上述示例中，我们在组件的created钩子函数中使用axios库发起了一个GET请求，然后将接口返回的数据赋值给组件的data属性中的title和items变量。 这样，在组件渲染时，页面就会加载接口返回的数据，并展示在页面上。 注意：需要安装axios库，并确保接口返回的数据格式正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值