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 相关文章推荐
js的Boolean对象初始值示例
Mar 04 Javascript
js获取 type=radio 值的方法
May 09 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
vue2单元测试环境搭建
May 24 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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 array_filter除去数组中的空字符元素
2020/06/21 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
python搜索包的路径的实现方法
2019/07/19 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
财务管理职业生涯规划书
2014/02/26 职场文书
五好关工委申报材料
2014/05/31 职场文书
农业生产宣传标语
2014/10/08 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
机动车交通事故协议书
2015/01/29 职场文书
奖励通知
2015/04/22 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
一文搞懂Java中的注解和反射
2022/06/21 Java/Android
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers