gpt4 book ai didi

vue实现把接口单独存放在一个文件方式

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue实现把接口单独存放在一个文件方式由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

第一步:在src/router目录下,建立一个js文件(文件名:httpConfig.js); 。

第二步:在httpConfig.js文件里面写上 。

?
1
2
3
4
5
6
7
const aa = 'http://192.168.1.123' ;//本地测试
const config = {
  bb: aa+ '/article/articleListPage' , //所需的接口
 
}
//需要让外部拿到
export default config;

第三步:掉接口 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
_this.$http({
  url: _this.$httpConfig.bb,    //接口地址
  method: 'POST' ,      //请求方式
  contentType: "application/json;" //内容类型
  headers: {
   'Content-Type' : 'application/json' //请求头
  },
  dataType: "json" ,      //数据格式
  async: false ,       //设置同步/异步
  data: {
            //所需参数
  },
}).then( function (response) {
  console.log(response.data);   //打印成功信息
}, function (error) {
  console.log(error);     //打印错误信息
});

补充知识:Vue项目整合接口到同一个配置文件 。

首先创建一个js文件,我的命名是用api.js.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//数据接口的ip和端口
const ip = 'http://192.168.101.127:8080' ;
 
 
 
const zymllist = ip+ '/hg6000/dsjjm/zymllist.do' ;
const wsqk = ip+ '/hg6000/dsjjm/wssj.do' ;
const fdcqk1 = ip+ '/hg6000/dsjjm/fdcqkZ.do' ;
const fdcqk2 = ip+ '/hg6000/dsjjm/fdcqkB.do?sbno=2018-09&xzqhbm=420000&xzqhjb=2' ;
const sq = ip+ '/hg6000/dsjjm/hbssq.do'
 
//一定要注册才可以使用
export default {
   zymllist: zymllist,
   wsqk: wsqk,
   fdcqk1:fdcqk1,
   fdcqk2:fdcqk2,
   sq:sq,
}

在其他 .vue 文件内,如需调用api.js内的接口,需要先引用:

import api from "common/js/api",

引用完成后,使用如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
this .axios
     .get(api.sq, {  //api.sq 为 api.js 文件夹中,名称为 sq 的接口路径
      params: {  //传入的参数
       a:a
      }
     })
     .then(res => { //此处要使用箭头函数,this指向才正确
       console.log(res)
     })
     . catch ( function (error) {
      alert(error);
     });

以上这篇vue实现把接口单独存放在一个文件方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我.

原文链接:https://blog.csdn.net/ruanxinjie/article/details/82691752 。

最后此篇关于vue实现把接口单独存放在一个文件方式的文章就讲到这里了,如果你想了解更多关于vue实现把接口单独存放在一个文件方式的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com