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 相关文章推荐
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
Html5生成验证码的示例代码
May 10 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采集相关教程之一 CURL函数库
2010/02/15 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
浅谈Python中的私有变量
2018/02/28 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python自动抢红包教程详解
2019/06/11 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python类中super() 的使用解析
2019/12/19 Python
什么是Python变量作用域
2020/06/03 Python
python开发前景如何
2020/06/11 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
大学生军训感想
2014/02/16 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
公司人力资源管理制度
2015/08/05 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang