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

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

  

在项目文件中引入使用

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

在项目文件中请求

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

  

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. Linux系统挂载NTFS文件系统(转载)

    转自:http://hermesbox.blogbus.com/logs/47386987.html 今天尝试并成功的将一块500G的移动硬盘挂载到了RHEL5的系统上,甚感欣慰.想到也许以后自己或其 ...

  2. Linux环境下ZooKeeper集群环境搭建关键步骤

    ZooKeeper版本:zookeeper-3.4.9 ZooKeeper节点:3个节点 以下为Linux环境下ZooKeeper集群环境搭建关键步骤: 前提条件:已完成在Linux环境中安装JDK并 ...

  3. angular2+typescript在asp.net MVC Web项目上的实现

    网上现在还没有关于angular2+typescript在asp.net mvc web项目上的实现的系统介绍,这里我也只是探索到了一个简单的方式,还有很多问题没能解决.但是能有个好的开头也值得记录一 ...

  4. synchronized(4)修饰语句块之:synchronized(this)

    synchronized(this) 此时,线程获得的是对象锁.例如: public class Thread8 extends Thread { public void sync_fun() { s ...

  5. mac下 netbeans 8.02中文版设置代码自动补齐 + eclipse自动补齐

    netbeans自带的自动补齐快捷键是commad+\ 我想要的是在输入的时候,有自动提示,找了半天也没找到怎么搞. 因为我是用的mac系统 后来参考其他的设置,找到了设置的方法,把这个方法记录一下. ...

  6. SpringCloud开发学习总结(七)—— 声明式服务调用Feign(一)

    在实践的过程中,我们会发现在微服务架构中实现客户端负载均衡的服务调用技术Spring Cloud Ribbon<SpringCloud开发学习总结(四)—— 客户端负载均衡Ribbon> ...

  7. TC 609DIV2(950)

    Problem Statement      Vocaloids Gumi, Ia, and Mayu love singing. They decided to make an album comp ...

  8. xshell常用命令大全

    xshell常用命令大全 (1)命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *. ...

  9. Heart Beat

    实现关键: 1.纯css实现心形图(如果使用图片则无需) html代码: <!DOCTYPE html> <html> <head> <meta charse ...

  10. R Programming week1-Reading Data

    Reading Data There are a few principal functions reading data into R. read.table, read.csv, for read ...