在外部创建一个API文件夹,然后创建一个API.js  例如

const filmbanner = 'api/billboard/home?__t=1498823077473';
const filmlist = 'api/film/now-playing?page=1&count=7';
const filmlist2 = 'api/film/coming-soon?page=1&count=7';
const address = 'api/city?__t=1498876411101';
const Performance = 'schedule?__t=1499234856430&pageSize=6&pageNumber=1&sortKey=sortSalesCount&sortType=desc&isMultiSku=1';
const mall = 'ad/list';
export default {
filmbannerApi: filmbanner,
filmlistApi:filmlist,
filmlist2Api:filmlist2,
addressApi:address,
PerformanceApi:Performance,
MallApi:mall
}

  

在项目文件中引入使用

import api from '../../../common/api';

在项目文件中请求

this.$http.get(api.filmlistApi)
  .then((response)=>{
  console.log(response.data.data.films)
  this.sdata = response.data.data.films
  console.log(this.sdata)
  //成功后关闭加载
  this.$refs.loadmore.onTopLoaded();
})

  

vue 接口统一管理的更多相关文章

  1. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  2. vue axios封装以及API统一管理

    在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中.当项目越来越大的时候,接口的请求也会越来越多,怎么去管理 ...

  3. Vue + webpack 项目配置化、接口请求统一管理

    准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug ...

  4. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  5. vue项目接口管理,所有接口都在apis文件夹中统一管理

    参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...

  6. Vue项目中的http请求统一管理

    module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...

  7. 项目中angular js的接口url统一管理

    为了防止环境改变时需要修改多处接口的url,项目中用到了一个config.json文件来统一管理url: 在src下建立config文件夹,创建config.json文件,主要内容如下: { &quo ...

  8. Vue之状态管理(vuex)与接口调用

    Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...

  9. mpvue 开发小程序接口数据统一管理

    mpvue项目里做API与数据分离统一管理 小程序里请求数据接口使用wx:request,因为考虑项目比较大,最好把wx:request封装起来,统一使用管理 utils.js 配置开发环境和线上环境 ...

随机推荐

  1. RocketMQ消费者实践

    最近工作中用到了RocketMQ,现记录下,如何正确实现消费~ 消费者需要注意的问题 防止重复消费 如何快速消费 消费失败如何处理 Consumer具体实现 防止重复消费 重复消费会造成数据不一致等问 ...

  2. hdu4608 I-number

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4608 题意:给定一个数X,注意X是个大数,X的长度不超过1e5. 让你求出一个Y,满足三个条件,Y&g ...

  3. ThinkPHP3.2.3学习笔记4---统计ThinkPHP3.2.3加载的文件

    将ThinkPHP3.2.3的入口文件index.php加入一个函数getIncludeFiles,文件内容变成如下所示: <?php // +------------------------- ...

  4. bzoj 4842: [Neerc2016]Delight for a Cat【最小费用最大流】

    考试题搞了好久也没懂-- 正解应该是线性规划 https://www.cnblogs.com/CQzhangyu/p/7894559.html 可是不会写啊 如果从网络流的角度来体会大概是这样 htt ...

  5. Luogu P2158 [SDOI2008]仪仗队【数学/欧拉函数】by cellur925

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  6. _bzoj2818 Gcd【线性筛法 欧拉函数】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2818 若gcd(x, y) = 1,则gcd(x * n, y * n) = n.那么,当y ...

  7. String Mark Codeforces - 895D

    一看好像会做的样子,就去做了一下,结果 猝不及防地T掉了 赶紧查了一下,没有死循环,复杂度也是对的,无果,于是翻了题解 题解没看懂,但是找到了标程,然后发现我被卡常了... 而且好像当时还过了前10个 ...

  8. 转-AFNetwork 作用和用法详解

    来自:http://www.maxiaoguo.com/clothes/269.html AFNetworking是一个轻量级的iOS网络通信类库.它建立在NSURLConnection和NSOper ...

  9. [转]Windows Azure入门教学系列 (六):使用Table Storage

    本文转自:http://blogs.msdn.com/b/azchina/archive/2010/03/11/windows-azure-table-storage.aspx 本文是Windows ...

  10. NSoup获取网页源代码

    NSoup是JSoup的Net移植版本.使用方法基本一致. 如果项目涉及HTML的处理,强烈推荐NSoup,毕竟字符串截断太苦逼了. 下载地址:http://nsoup.codeplex.com/ # ...