vue调用api接口（vue点击tab时调用接口）

本文目录

• vue点击tab时调用接口
• vue 结合h5+调用手机API该怎么用
• vue组件二次封装后怎么调用自带的api
• vue 项目中如何动态配合API请求地址
• 在vue中 echarts 柱状图调后台接口

vue点击tab时调用接口

2.多个tabs标签页请求多个接口
需求描述：
有三个可切换的tabs页签，红色的两个框里的tabs页签请求的是同一个接口，但是两个页签传递的参数值不一样，橙色的框里请求的是另一个接口。通过点击不同的tabs页签去跳转页面并请求不同的接口返回的数据。默认显示最新知识页签的数据。
html页面：
最新知识和热门知识调的是同一个接口，排行榜是一个接口。
接口：
最新知识和热门知识的接口给后端传的参数rankingType（直接传汉字 ）："最新知识" or "热门知识"。排行榜的接口给后端传的参数rankingListType ："下载排行"。
实现：
在api文件里新建相关文件存储接口代码
【get请求用拼接】【get请求传参用param、post请求传参用data】
/**
* 最新知识、热门知识
*/
export function knowledgeListDetail(param) {
return request({
url: ’/api/knowledge/ranking/listDetail?’ + ’rankingType=’ + param.rankingType,
headers: {
isToken: true,
’Access-Control-Allow-Origin’:’*’,
},
method: ’get’,
})
}
/**
* 排行榜
*/
export function rankingListDetail(param) {
return request({
url: ’/api/knowledge/rankingList/listDetail?’ + ’rankingListType=’ + param.rankingListType,
headers: {
isToken: true,
’Access-Control-Allow-Origin’:’*’,
},
method: ’get’,
})
}
登录后复制

在html引入element组件里tabs页签的代码，根据具体需求更改代码。
《template》
《!-- 最新知识 S --》
《div
class="text-bar know"
style="display: flex; justify-content: space-between"
》
《div class="tabs" style="width: 95%"》
《el-tabs
v-model="activeNameLatestKnowledge"
@tab-click="handleLatestKnowledge"
》
《el-tab-pane label="最新知识" name="latestKnowledgeFirst"》
《div class="list"》
《div
class="flex list-item"
v-for="(item, index) in latestKnowledgeRows"
:key="index"
》
《div class="title"》
《div
@click="jump(’/special/detailed’)"
style="vertical-align: middle"
》
《img
style="vertical-align: middle"
src="../../assets/file.png"
alt=""
/》
{{ item.title }}
《/div》
《div class="msg"》{{ item.releaseTime }}《/div》
《/div》
《/div》
《/div》
《/el-tab-pane》
《el-tab-pane label="热门知识" name="latestKnowledgeSecond"》
《div class="list"》
《div
class="list-item flex"
v-for="(item, index) in popularKnowledgeRows"
:key="index"
》
《div class="flex title"》
《div
@click="jump(’/special/detailed’)"
style="vertical-align: middle"
》
《img
style="vertical-align: middle"
src="../../assets/file.png"
alt=""
/》
{{ item.title }}
《/div》
《div class="msg"》{{ item.releaseTime }}《/div》
《/div》
《/div》
《/div》
《/el-tab-pane》
《el-tab-pane label="排行榜" name="latestKnowledgeSecondThird"》
《div class="list"》
《div
class="list-item flex"
v-for="(item, index) in rankingListRows"
:key="index"
》
《div class="flex title"》
《div
@click="jump(’/special/detailed’)"
style="vertical-align: middle"
》
《img
style="vertical-align: middle"
src="../../assets/file.png"
alt=""
/》
{{ item.title }}
《/div》
《div class="msg"》{{ item.releaseTime }}《/div》
《/div》
《/div》
《/div》
《/el-tab-pane》
《/el-tabs》
《/div》
《div style="margin-top: 30px"》
《el-link
class="title-msg"
:underline="false"
@click="jump(’/strategyThinkManage’)"
》更多 《i class="el-icon-arrow-right"》《/i
》《/el-link》
《/div》
《/div》
《!-- 最新知识 E --》
《/template》
《script》
export default {
data() {
return {
activeNameLatestKnowledge: "latestKnowledgeFirst", // 默认显示最新知识数据页面
latestKnowledgeRows: , // 最新知识数据
popularKnowledgeRows: , //热门知识数据
rankingListRows: , //排行榜数据
};
},
}
《/script》
登录后复制

引入api
import { knowledgeListDetail, rankingListDetail } from "@/api/home.js";
登录后复制
在methods通过if判断（if...else语句）去进行接口调试。
在created里调用接口（一点击直接出现此页签的数据）
《script》
export default {
methods: {
/***
* 最新知识、热门知识、排行榜
*/
handleLatestKnowledge(tab) {
if (tab.name != "latestKnowledgeSecondThird") {
if (tab.name == "latestKnowledgeFirst") {
let rows = {
rankingType: "最新知识",
};
knowledgeListDetail(rows).then((res) =》 {
if (res.rows) {
// 渲染数据
this.latestKnowledgeRows = res.rows;
}
});
} else {
let rows = {
rankingType: "热门知识",
};
knowledgeListDetail(rows).then((res) =》 {
if (res.rows) {
this.popularKnowledgeRows = res.rows;
}
});
}
} else {
let rows = {
rankingListType: "下载排行",
};
rankingListDetail(rows).then((res) =》 {
if (res.rows) {
this.rankingListRows = res.rows;
}
});
}
},
created() {
this.handleLatestKnowledge({ name: "latestKnowledgeFirst" });
},
};
《/script》
登录后复制

vue.js
ui
javascript
红警单机版手游下载
精选推荐
广告

基于vueelementui的后台管理系统动态tabs实践
19下载·0评论
2019年8月10日
使用vue实现tab操作
165阅读·0评论·0点赞
2017年7月3日
vue不同组件之间接口先后调用的顺序
1681阅读·0评论·0点赞
2021年2月4日
el-tabs 实现多个 el-table表格 分页操作
1215阅读·0评论·0点赞
2022年5月27日
使用element中el-table动态增减表头列的时候出现抖动闪动的问题
4889阅读·1评论·4点赞
2020年7月6日
vue3使用Element-plus Tabs 标签页的点击事件
4976阅读·5评论

vue 结合h5+调用手机API该怎么用

LZ搞反了 一般是在MAYA里面导入VUE的场景的，安装VUE xStream，这可以是个独立的VUE软件，安装的时候和MAYA是有接口程序安装的，安装完成之后打开MAYA--载入VUE插件，就可以ZAI maya中导入VUE场景了，很方便，是用MR渲染，你可以在 VUE xStream中做好场景，在MAYA中导入就可以了，最新版本还可以直接在MAYA中调节灯光，摄像机等一些VUE的参数。

vue组件二次封装后怎么调用自带的api

封装api 新建一个js文件.test.js 引入Vue和test.vue,并使用extend方法创建一个vue的子类HelloConstructor

vue 项目中如何动态配合API请求地址

前后端分离项目，前端是由vue搭建，打包后交给运维人员进行部署，所以IP地址不固定，需要运维人员自己配置，前端项目中不能写固定api地址。

实现步骤：

1，在项目的静态文件中，我的写在pulic文件中了，新建一个 config.js
2，config.js 写入可配置的api地址
3，在index.html中引入刚刚定义的js
4，在封装axios的request.js中使用
5，项目运行打包后，dist文件夹会多一个文件
6，这个可以进行动态配置。

在vue中 echarts 柱状图调后台接口

1.安装echarts依赖
npm install echarts -S 或cnpm install echarts -S

2.全局引用
// main.js引入echarts
import echarts from ’echarts’ //有时语法报错 或使用 import * as echarts from ’echarts’
Vue.prototype.$echarts = echarts

3.创建组件
《template》
《div id="echarts"》
《div 》
《div》
《div id="myChart" :style="{ width: ’600px’, height: ’300px’ }"》《/div》
《/div》
《/div》
《/div》
《/template》
《script》
import * as echarts from ’echarts’
import { getarrival } from ’@/api/product’ //调用后台接口
export default {
name: ’Echarts’,
data() {
return {
dataList: ,
obj:{
id:1
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
getarrival(this.obj).then((res) =》 {
this.dataList = res.data.data.arrivel_later_result.bar //接口返回数据赋值this.dataList
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById(’myChart’))
// 绘制图表
myChart.setOption({
title: {
text: this.dataList.title.text,
subtext: this.dataList.title.subtext,
left: this.dataList.title.left
},
grid: {
left: ’3%’,
right: ’4%’,
bottom: ’3%’,
containLabel: true
},
tooltip: {
trigger: ’axis’,
axisPointer: {
type: ’shadow’
}
},
xAxis: {
type: ’category’,
data: this.dataList.xAxis.data
},
yAxis: {
type: ’value’
// boundaryGap:
},
series: [
{
name: ’迟到占比’,
type: ’bar’,
barWidth: 30, //柱图宽度
data: this.dataList.series.data
}
]
})
})
},

}
}
《/script》
《style scoped》
《/style》
4.效果实现