vue.js中怎么带参数请求接口

在vue.js项目里我想用一个js文件存放接口的公共部分和加解密的方法,然后我第一次用vue+webpack不太会用,所以请问一下该怎么写

4个回答

可以创建一个公共方法文件common.js

module.exports = {
encrypt (){
console.log();
},
decrypt (){
console.log();
}
}

在入口文件中,或vue中引用
import common from './common.js'

有完整的调用接口的实例最好

?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 <!doctype html>

获取图片列表
var demo=new Vue({ el:&#39;#app&#39;, data: { imgList:[], getImgUrl: &#39;&#39; //存数据接口 }, created: function(){ this.getImg() //定义方法 }, methods: { getImg: function(){ var that = this; that.$http({ //调用接口 method:&#39;GET&#39;, url:this.getImgUrl //this指data }).then(function(response){ //接口返回数据 this.imgList=response.data; },function(error){ }) } } })
Causalloop
Causalloop 发错。。。
大约 2 年之前 回复

我自己解决了,不过,还是谢谢你们

u014328243
走马看黄花 怎么解决的???
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue.js 请求方法设置同步问题

使用vue.js对后台进行请求发送。 现在问题描述。 定义一个vue中,有6个方法,其中有一个方法请求成功后会调用另外两个方法, 调用时候,必须等第一个方法成功返回之后对页面渲染后再掉第二个方法。 目前vue 默认为异步请求,调用的第一个方法还没有渲染完页面, 第二个方法就已经请求了,造成页面获取值为未更新之前的数据。 现在想完成的形式: 定义一个vue,6个方法中,不设置就使用异步, 有一个方法需要单独设置为执行同步。 请大神说说vue的思路。就是需要vue实现部分方法同步 【ps:想说使用ajax的或者把第二个参数写在第一个参数里边的就不用说了】

vue.js2 关于post请求后端获取数据的问题

vue.js2发送post请求,在后端为什么获取不到,jquery却能获取

请求地址参数的问题,在请求地址栏有个参数怎么获取?

请求地址参数的问题,就是我在一个解析网站上解析B站的视频,他是向一个借口以post方式请求的数据但是请求地址里面有个callback参数,这个参数不知道怎么获取的,查过不是从服务器上面获取的,应该是从本地JS生成的,但是找不到具体的JS代码??? ![图片说明](https://img-ask.csdn.net/upload/201910/24/1571909776_695438.png) 解析网站网址:https://pv.vlogdownloader.com<br> 接口请求地址:https://pv.vlogdownloader.com/api.php?callback=jQuery112403211666080804736_1571907483200

vue.js关于跨域问题,请教各位

我在本地运行vue.js前端请求接口,get,post,put,delete这四种请求都可以访问 ,但是把vue项目打包发布,用nginx做代理转发,再访问vue.js项目,put和delete请求都不可以访问。错误:has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

vue 里面 fetch的delete方法请求参数不成功,但是用get可以成功

## 这个是我的js文件 ``` const express = require('express') const app = express() const bodyParser = require('body-parser') app.use(express.static('public')) app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended:false})) app.all('*',function (req,res,next) { res.header("Access-Control-Allow-Origin","*"); res.header("Access-Control-Allow-Methods","PUT, GET, POST, DELETE, OPTIONS"); res.header("Access-Control-Allow-Methods","X-Requested-With"); res.header("Access-Control-Allow-Methods","Content-Type"); next(); }); //fetch传统方式 app.get('/fetchdata',(req,res)=>{ res.send('传统方法获取参数'+req.query.id) }) // fetch第二种方式 app.get('/fetchdata/:id',(req,res)=>{ res.send('2方法获取参数'+req.params.id) }) app.delete('/fetchdata/:id',(req,res)=>{ res.send('delete方法获取参数'+req.params.id) }) app.post('/fetchdata',(req,res)=>{ res.send('dpost方法获取参数'+req.body.username+'----------'+req.body.password) }) app.get('/a1',(req,res)=>{ setTimeout(function(){ res.send('a1') },1000); }) app.get('/a2',(req,res)=>{ setTimeout(function(){ res.send('a2') },2000); }) app.get('/a3',(req,res)=>{ setTimeout(function(){ res.send('a3') },3000); }) app.get('/data',(req,res)=>{ res.send('Hello World') }) app.get('/data1',(req,res)=>{ res.send('Hello tom') }) app.get('/data2',(req,res)=>{ res.send('Hello jerry') }) app.listen('3000',()=>{ console.log("running") }) ``` ## 这个是我的html文件,用来请求js数据,用get方法可以成功 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> <title>Document</title> </head> <body> <script> // fetch('http://localhost:3000/a1').then(function (data) { // //这个必须的,用于获取后台对象 // return data.text(); // }).then(function (data) { // console.log(data); // }) // fetch传参 // fetch('http://localhost:3000/fetchdata?id=156', { // method:'get' // }).then(function (data) { // return data.text(); // }) // .then(function (data) { // console.log(data); // }) //第二种方式(这里用get方法可以成功的) // fetch('http://localhost:3000/fetchdata/456', { // method:'get' // }).then(function (data) { // return data.text(); // }) // .then(function (data) { // console.log(data); // }) //这里用delete方法就失败了 fetch('http://localhost:3000/fetchdata/741', { method: 'delete' }).then(function (data) { return data.text(); }) .then(function (data) { console.log(data); }) </script> </body> </html> ``` 这个是报错的信息 Failed to load http://localhost:3000/fetchdata/741: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

vue中interceptors拦截器中添加的请求头被参数替换怎么办

![图片说明](https://img-ask.csdn.net/upload/202001/03/1578021699_746043.png) 本来是这样的,一开始的请求头 ![图片说明](https://img-ask.csdn.net/upload/202001/03/1578021736_737554.png) 这个是浏览器url地址的的请求参数 ![图片说明](https://img-ask.csdn.net/upload/202001/03/1578021841_269753.png) 然后token就被替换了!

vue如何将api请求收到的数据动态的显示到模板上呢?

我使用的是uniapp的框架,与vue差不多。我在请求服务端的数据后会返回给我一段数据,我想将这段数据动态的显示在模板上,请问该如何实现呢?网络请求的数据已经拿到了,但是是在请求的回调函数中。 ``` onLoad() { uni.request({ url: 'http://hd215.api.okayapi.com/?s=App.Main_Meta.Get&', method: 'GET', data: { key: 'usermeta', app_key: --- }, success: (res) => { // res.data.data.data; console.log(res.data.data.data) uni.showToast({ title: '查询成功!', mask: true, duration: 1500 }); }, }); }, ``` onload下为页面加载时执行的方法,uni.request为发起请求的方法。控制台输出为 ``` add_time:"2019-01-19 00:53:17" data:{content: "哈哈哈哈哈"} err_code:0 err_msg:"" key:"usermeta" update_time:"" ```

求大神帮忙解决:vue-cli3 axios请求本地数据问题

引入axios ``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$axios = axios ``` vue.config.js ``` module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, hotOnly: false, proxy: { // 配置跨域 '/api': { target: 'http://localhost:8080', ws: true, changOrigin: true, pathRewrite: { '^/api': '' } } }, before: app => {} } }; ``` json目录 ![图片说明](https://img-ask.csdn.net/upload/201908/22/1566447518_763675.png) axios请求 ``` getData() { this.$axios('api/data/profile/shopping.json') .then( res => { console.log(res.data) }) } ``` 错误提示 ![图片说明](https://img-ask.csdn.net/upload/201908/22/1566447555_906674.png)

vue cli3搭建的项目里使用axios引入本地json一直404

json文件我存在在public文件夹下,我记得不错的话,cli3之后public才是存放静态资源的地方,而不是之前的static了吧,但是不知道为什么还是报404,是我还得在vue.config.js中配置什么吗![图片说明](https://img-ask.csdn.net/upload/201904/07/1554616386_296732.png) ``` methods:{ send(){ axios.get('/public/student.json',{}).then(res=>{console.log(res.data)}) } }, mounted(){ this.send() } ```

Vue前端请求接口问题?

在forEach循环里调了五次接口,目前自己测试没啥问题,想问问这样会不会有弊端?

Vue.js登录问题,密码写死,参数写死直接访问二级网页

APP本身是靠密码账号登录,然后经过两个页面,到达报表页面,现在在每个页面有对应的后台接口,现在需要直接访问报表页面,呈现出表格, 登录传参什么写死,这个怎么完成

这样写怎么会得不到参数

代码是这样写的 main.js里面: ``` import axios from 'axios' Vue.prototype.$http = axios axios.defaults.timeout = 5000 // 响应时间 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 配置请求头 axios.defaults.baseURL = 'http://127.0.0.1:8081/admin/' // 配置接口地址 ``` ``` /* 登录表单 */ loginForm: { username: 'admin', password: '123456' }, ``` ``` /* 登录的的点击事件 */ valLoginFrom () { this.$refs.loginRef.validate(async valid => { if (valid) { console.log(this.loginForm) const {data: res} = await this.$http.post('login', this.loginForm) console.log(res) } }) } ``` 浏览器响应结果: ![图片说明](https://img-ask.csdn.net/upload/201911/29/1574992550_568330.png)

vue axios get向后台穿的中文乱码

## 1.修改(单位)发送请求之前 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571562388_606308.png) ## 2.修改成功后 乱码 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571562375_11332.png) ## 3.Network的Headers ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571562406_984282.png) ## 4.get请求 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571562466_245512.png)

怎么用 vue的axios中的get请求向后台发送json格式的数据

axios的get请求时发送这样格式的数据给后台{"key":"value","key2":'value2"}, 需要怎么处理呢,post请求我把发送的数据对象json.stringify()转一下格式就可以了,get就不行 我需要发送这种格式的数据如图![图片说明](https://img-ask.csdn.net/upload/201909/02/1567408117_550075.png)

vue axios设置请求头参数 失败 ,后台没问题用postman测试正常

![图片说明](https://img-ask.csdn.net/upload/201910/29/1572349878_31623.jpg) ![图片说明](https://img-ask.csdn.net/upload/201910/29/1572349888_132377.jpg)![图片说明](https://img-ask.csdn.net/upload/201910/29/1572349897_504860.jpg)![图片说明](https://img-ask.csdn.net/upload/201910/29/1572349912_131589.jpg)

【axios 请求问题】Vue 项目需要多个后台请求路径,怎么实现呢?

前后台分离的项目,但是后台由多个服务组成,所以前端使用 axios 发送时需要跟多个后台通信,在 axios 中设置了 baseURL 了后请求总报错,该怎么办呢?

一个服务器的接口,新增删除查询的接口都可以调,唯独每一个修改调了都会报401,修改的请求方式是跟新增一样的

一个服务器的接口,新增可以调,删除可以调,查询可以调,只有修改回报401,并且修改和新增的请求方式是一样的都是post,就是每个修改的接口就是调不了,就是报401,并且在swagger和postman上都可以调,请求的值是我从页面network上复制过去的(所以肯定也不是我请求参数的原因啊),后端说我调的接口没进去,他说没有日志可看![图片说明](https://img-ask.csdn.net/upload/202003/06/1583483018_570916.png)![图片说明](https://img-ask.csdn.net/upload/202003/06/1583483028_906387.png)![图片说明](https://img-ask.csdn.net/upload/202003/06/1583483033_442779.png)![图片说明](https://img-ask.csdn.net/upload/202003/06/1583485756_319922.png) ![图片说明](https://img-ask.csdn.net/upload/202003/06/1583483061_287259.png)

其他非vue页面传给vue页面隐式post参数,似乎行不通,怎么解决呢

其他非vue页面传给vue页面隐式post参数,似乎行不通,怎么解决呢

Nuxt.js 在动态路由_id.vue里使用asyncData,为什么会执行2次?

## # Nuxt.js 在动态路由_id.vue里使用asyncData,为什么会执行2次?而且2次是同时执行的 ![图片说明](https://img-ask.csdn.net/upload/201910/22/1571709823_67753.png) ``` async asyncData(context) { console.log("asyncData runing"); let categoryListData = await axios({ method: "POST", url: api.categoryList, headers: { authorization: api.authCode, "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" }, transformRequest: [data => Qs.stringify(data)], data: {} }).then(response => { let data = response.data; return data.data.rows; }).catch(error => { console.log("error:", error); }); context.store.commit('getCategoryList', categoryListData) return; }, ``` ![图片说明](https://img-ask.csdn.net/upload/201910/22/1571709511_280465.png) ![图片说明](https://img-ask.csdn.net/upload/201910/22/1571709532_229426.png)

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

深入剖析Springboot启动原理的底层源码,再也不怕面试官问了!

大家现在应该都对Springboot很熟悉,但是你对他的启动原理了解吗?

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

你期望月薪4万,出门右拐,不送,这几个点,你也就是个初级的水平

先来看几个问题通过注解的方式注入依赖对象,介绍一下你知道的几种方式@Autowired和@Resource有何区别说一下@Autowired查找候选者的...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《经典算法案例》01-08:如何使用质数设计扫雷(Minesweeper)游戏

我们都玩过Windows操作系统中的经典游戏扫雷(Minesweeper),如果把质数当作一颗雷,那么,表格中红色的数字哪些是雷(质数)?您能找出多少个呢?文中用列表的方式罗列了10000以内的自然数、质数(素数),6的倍数等,方便大家观察质数的分布规律及特性,以便对算法求解有指导意义。另外,判断质数是初学算法,理解算法重要性的一个非常好的案例。

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

立即提问
相关内容推荐