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 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
JS数据类型STRING使用实例解析
Dec 18 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中使用灵巧的体系结构
2006/10/09 PHP
php日历[测试通过]
2008/03/27 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
网页自动跳转代码收集
2009/09/27 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
JS实现吸顶特效
2020/01/08 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
python处理按钮消息的实例详解
2017/07/11 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
基于python中theano库的线性回归
2018/08/31 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
大学毕业感言
2014/01/10 职场文书
2014年教研工作总结
2014/12/06 职场文书
股权转让协议范本
2014/12/07 职场文书
2015年父亲节寄语
2015/03/23 职场文书