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

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

赞 (0)

相关推荐

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • vue之封装多个组件调用同一接口的案例

    背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all = res.data.value || []; }, fail: err => { tipInfo(err.data.desc, '提示', false, 'warnin

  • vue中Axios的封装与API接口的管理详解

    vue中Axios的封装与API接口的管理详解

    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso

  • vue项目总结之文件夹结构配置详解

    vue项目总结之文件夹结构配置详解

    前言 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化.规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助. 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.下面随着小编来一起学习学习吧. 项目配置 首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉.本次开发使用到的有: vue , vuex , axios , elementUI .

  • vue项目接口管理,所有接口都在apis文件夹中统一管理操作

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="areaTree"> <!-- 标题 --> <div

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

    第一步:在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.$httpCon

  • vue 如何打开接口返回的HTML文件

    vue 如何打开接口返回的HTML文件

    目录 一.后端接口 二.前端 前言:接口测试平台,后端使用django,前端使用vue+element.项目接口平台测试完成,需要把后台产生的测试报告返回给前端展示. 一.后端接口     1.配置下django的template的参数,templates文件夹是放在project的目录下面的,是项目中或者说项目中所有的应用公用的一些模板 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', '

  • Vue + Axios 请求接口方法与传参方式详解

    目录 一.Get请求: 二.Post请求: 三.拓展补充 使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法. 一.Get请求: Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式: this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this

  • Vue 前端导出后端返回的excel文件方式

    Vue 前端导出后端返回的excel文件方式

    目录 前端导出后端返回的excel文件 处理文件的下载(后端Excel导出) 后端文件流 通过 Blob 下载 拼接 URL 下载 前端导出后端返回的excel文件 在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 页面: 先筛选,向后端请求接口返回excel文件,代码如下: const apiUrl = this.Global.httpUrl + '/laima/export/new/exportTackOutOrder' console.log(this

  • Vue单页应用引用单独的样式文件的两种方式

    Vue单页应用引用单独的样式文件的两种方式

    问题描述 对于.vue的文件来说,也是由结构.行为.样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式.下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分 引入单独的样式文件 方式一 在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享 // The Vue build version to loa

  • 基于Python的接口自动化读写excel文件的方法

    基于Python的接口自动化读写excel文件的方法

    引言 使用python进行接口测试时常常需要接口用例测试数据.断言接口功能.验证接口响应状态等,如果大量的接口测试用例脚本都将接口测试用例数据写在脚本文件中,这样写出来整个接口测试用例脚本代码将看起来很冗余和难以清晰的阅读以及维护,试想如果所有的接口测试数据都写在代码中,接口参数或者测试数据需要修改,那不得每个代码文件都要一一改动?.因此,这种不高效的模式不是我们想要的.所以,在自动化测试中就有个重要的思想:测试数据和测试脚本分离,也就是测试脚本只有一份,其中需要输入数据的地方会用变量来代替,然

  • springboot vue测试平台接口定义前后端新增功能实现

    springboot vue测试平台接口定义前后端新增功能实现

    目录 开发继续更新 一.后端部分 二.前端部分 1. rest参数 2. 请求体 3. 请求参数 4. 请求接口 基于 springboot+vue 的测试平台 开发继续更新 上节画了大概的前端页面,今天主要来实现后端接口,然后调通前后端实现接口新增功能.先预览下效果: 老规矩,分为前后端讲解. 一.后端部分 在 ApiDefinitionController 类中新增一个处理方法,处理接口的新增请求: @PostMapping("/add") public Result add(@R

  • vue框架编辑接口页面下拉级联选择并绑定接口所属模块

    vue框架编辑接口页面下拉级联选择并绑定接口所属模块

    目录 基于 springboot+vue 的测试平台开发 一.级联选择器组件 二.后端返回组件需要的数据 三.前端使用级联组件 四.新增.编辑里保存选择的模块 五.编辑回显模块节点 基于 springboot+vue 的测试平台开发 继续更新 停更得有半年,最近待业家中没有理由不继续更新了.本来是打算做别的功能,但是我的重新调试环境的时候发现了bug,搞半天原来是因为没实现接口与模块的绑定,导致点击左侧模块树之后列表页就没数据.气死我了,那先来把这个坑填上. 先看一下最后的功能效果动图. 因为完

  • Vue如何调用接口请求头增加参数

    目录 Vue调用接口请求头增加参数 Vue取消接口请求 接口js文件 页面中引用 总结 Vue调用接口请求头增加参数 import axios from 'axios' import qs from 'qs' let api_secret = '935bda53552e49cd56fc' // 基础配置 if (process.env.NODE_ENV === 'production') { // axios.defaults.baseURL = 'https://' //线上版本域名 // a

随机推荐