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


Posted in Javascript onAugust 13, 2020

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

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

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

第三步:掉接口

_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。

//数据接口的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";

引用完成后,使用如下:

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实现把接口单独存放在一个文件方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
动态加载jQuery的方法
Jun 16 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
React中的render何时执行过程
Apr 13 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
js实现幻灯片轮播图
Aug 14 #Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 #Javascript
修改Vue打包后的默认文件名操作
Aug 12 #Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 #Javascript
vue设置默认首页的操作
Aug 12 #Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 #Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 #Javascript
You might like
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php遍历CSV类实例
2015/04/14 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python实现带百分比的进度条
2016/06/28 Python
python入门教程之识别验证码
2017/03/04 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
python实现机器人卡牌
2019/10/06 Python
python实现淘宝购物系统
2019/10/25 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python中rc1什么意思
2020/06/19 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
培训讲师邀请函
2014/01/10 职场文书
优秀教师先进事迹
2014/01/22 职场文书
趣味游戏活动方案
2014/02/07 职场文书
幼儿园新年寄语
2014/04/03 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA