vue项目中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关。

1. 在axiosconfig目录下的axiosConfig.js

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui'
// 响应时间
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 静态资源
Vue.prototype.$static = ''

// 配置接口地址
axios.defaults.baseURL = ''
var loadingInstance
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
 config => {
  loadingInstance = Loading.service({
   lock: true,
   text: '数据加载中,请稍后...',
   spinner: 'el-icon-loading',
   background: 'rgba(0, 0, 0, 0.7)'
  })
  if (config.method === 'post') {
   config.data = qs.stringify(config.data)
  }
  return config
 },
 err => {
  loadingInstance.close()
  Message.error('请求错误')
  return Promise.reject(err)
 }
)
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
 res => {
  if (res.data.code === 200) {
   loadingInstance.close()
   return res
  } else {
   loadingInstance.close()
   Message.error(res.data.msg)
  }
 },
 err => {
  loadingInstance.close()
  Message.error('请求失败,请稍后再试')
  return Promise.reject(err)
 }
)
// 发送请求
export function post (url, params) {
 return new Promise((resolve, reject) => {
  axios
   .post(url, params)
   .then(
    res => {
     resolve(res.data)
    },
    err => {
     reject(err.data)
    }
   )
   .catch(err => {
    reject(err.data)
   })
 })
}
export function get (url, params) {
 return new Promise((resolve, reject) => {
  axios
   .get(url, {
    params: params
   })
   .then(res => {
    resolve(res.data)
   })
   .catch(err => {
    reject(err.data)
   })
 })
}

2. 在api目录下的index.js,api1.js,api2.js

api1.js
import { post } from '../axiosconfig/'
export default {
  login(params) {
    return post('/users/api/login', params)
  }
}
api2.js
import { post } from '../axiosconfig/'
export default {
  regist(params) {
    return post('/users/api/regist', params)
  }
}
index.js
import user from './api1.js'
import active from './api2.js'
export default {
 api1,
 api2
}

3. main.js 配置

import api from './api/'
Vue.prototype.$api = api

4. 在组件中使用

登录组件中
doLongin() {
 let params={}
 this.$api.api1.login(params).then(res => {
  console.log(res)
 })
}
注册组件中
doRegist() {
 let params={}
 this.$api.api2.regist(params).then(res => {
  console.log(res)
 })
}

您可能感兴趣的文章:

  • 使用FileReader API创建Vue文件阅读器组件
  • 详解Vue.js项目API、Router配置拆分实践
  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题
  • 深入理解Vue官方文档梳理之全局API
  • 详解Vue2 SSR 缓存 Api 数据
  • Vue2 配置 Axios api 接口调用文件的方法
  • 详解vue-cli本地环境API代理设置和解决跨域
  • vue.js全局API之nextTick全面解析
  • Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
  • Vue 2.x教程之基础API
时间: 2018-04-18

Vue 2.x教程之基础API

本文主要介绍的是关于Vue 2.x之基础API的相关内容,主要内容如下 模板语法(文本插值.属性绑定.JS表达式.过滤器.指令) Vue实例(viewModal(属性+函数).生命周期) 计算属性和监听器 (computed(get,set) 与 watch) 样式绑定(对象绑定.数组绑定.内联绑定) 条件绑定(v-if v-show) 列表渲染 (v-for.:key.数组监测.过滤/排序) 事件处理 (监听.修饰符.key修饰符) 表单输入绑定(text.checkbox.radio.sel

深入理解Vue官方文档梳理之全局API

Vue.extend 配置项data必须为function,否则配置无效.data的合并规则(可以看<Vue官方文档梳理-全局配置>)源码如下: 传入非function类型的data(上图中data配置为{a:1}),在合并options时,如果data不是function类型,开发版会发出警告,然后直接返回了parentVal,这意味着extend传入的data选项被无视了. 我们知道实例化Vue的时候,data可以是对象,这里的合并规则不是通用的吗?注意上面有个if(!vm)的判断,实例化

Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

vue.js全局API之nextTick全面解析

官方介绍:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 就是DOM更新完成之后执行的方法,并且超级方便的事情是回调函数中的this会绑定到最新的vue实例上. 代码示例如下: <p ref="mgs">{{mgs}}</p> <button @click="updateDom">点击更新DOM</button> data:function () { return

详解Vue.js项目API、Router配置拆分实践

前后端分离开发方式前端拥有更高的控制权 随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分): 前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面. 前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端

使用FileReader API创建Vue文件阅读器组件

有时候我们需要从文件中读取数据.在以前,你需要将其发送到服务器,然后返回所需的数据.问题是,现在我们还可以使用 FileReader API 直接访问浏览器中的文件. 如果我们只是想读取一个文本文件,以便在UI级别上做一些无关紧要的事情,那么就不需要将文件发送到服务器.下面的示例将实现从一个文件中读取相关的数据填充到一个 textarea 中. FileReader API FileReader API提供了一个很好的接口,可以使用文本或Blob对象类型以不同的方式读取数据. FileReade

详解vue-cli本地环境API代理设置和解决跨域

前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de

Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用. 这个应用始终遗留了一个问题,Web App在访问REST API时,没有经过任何认证,这使得服务端的REST API是不安全的,只要有人知道api地址,就可以调用API对服务端的资源进行修改和删除. 今天我们就来探讨一下如何结合Web API来限制资源的访问. 本文的主要内容如下: 介绍传统的Web应用和基于REST服务的Web应用 介绍OAuth认证流程和

Vue2 配置 Axios api 接口调用文件的方法

前情回顾 在上一篇中,我们通过配置基本的信息,已经让我们的项目能够正常的跑起来了.但是,这里还没有涉及到 AJAX 请求接口的内容. vue 本身是不支持 ajax 接口请求的,所以我们需要安装一个接口请求的 npm 包,来使我们的项目拥有这个功能. 这其实是一个重要的 unix 思想,就是一个工具只做好一件事情,你需要额外的功能的时候,则需要安装对应的软件来执行.如果你以前是一个 jquery 重度用户,那么可能理解这个思想一定要深入的理解. 支持 ajax 的工具有很多.一开始,我使用的是

详解Vue2 SSR 缓存 Api 数据

本文介绍了Vue2 SSR 缓存 Api 数据,分享给大家,具体如下: 1. 安装缓存依赖: lru-cache npm install lru-cache --dev 2. api 配置文件 config-server.js var LRU = require('lru-cache') let api if (process.__API__) { api = process.__API__ } else { api = process.__API__ = { api: 'http://loca

详解VUE2.X过滤器的使用方法

VUE2.X过滤器的使用方法有几种,今天讲一种,以cnode社区API为示例,转换tab类型为中文汉字. 首先我们在assets文件夹中新建个js的文件夹,并新建common.js,然后将过滤器写在这个文件中.当然你也可以写在单个组件中,这个等下后面说. /** * 将tab类型转换成汉字 * @param {String} tab 待转换前的tab值 * @return {String} 转换后的tab中文 */ export function change (tab) { switch (t

详解python实现读取邮件数据并下载附件的实例

详解python实现读取邮件数据并下载附件的实例 实现结果图: 实现代码: #!/usr/bin/python2.7 # _*_ coding: utf-8 _*_ """ @Author: MarkLiu """ import poplib import email from email.parser import Parser from email.header import decode_header from email.utils im

详解复制备份docker容器数据的方法

这里以jenkins容器为例,介绍三种方法. 方法一 将容器打包成镜像,这时数据就在镜像中了,im:1.0为容器名,可以随便取 docker commit <container id> im:1.0 重新运行镜像,-v将容器内tmp目录映射到宿主机上的tmp目录 docker run -itd -v /tmp:/tmp im:1.0 // 第一个tmp是宿主机目录,第二个是容器内目录 把 /var/jenkins_home的文件复制到tmp下,注意这里的container name是随机生成的

详解vue2.0模拟后台json数据

最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server这个插件和express,由于之前的配置都是在build/dev-server.js文件夹下,在vue2.0都没有了,全部整合到了build/webpack.dev.conf.js文件里,通过不断查阅资料后终于模拟成功. 1.首先 npm install vue-resource  --save安装vue-resourse,并且在页面上引用(--save 会把依赖包名称添加到 p

详解Javascript获取缓存和清除缓存API

JavaScript ServiceWorker API的好处就是让web开发人员轻松的控制缓存.虽然使用ETags等技术也是一种控制缓存的技术,按使用JavaScript让程序来控制缓存功能更强大,更自由.当然,强大有强大的好处,也有弊处--你需要做善后处理,所谓的善后处理,就是要清理缓存. 下面我们来看看如何创建缓存对象.在缓存里添加请求缓存数据,从缓存里删除请求缓存的数据,最后是如何完全的删除缓存. 判断浏览器对缓存对象cache API的支持 检查浏览器是否支持Cache API- if

详解vue2.0+vue-video-player实现hls播放全过程

起因 最近公司想做一套视频点播服务,因为考虑到成本问题,领导希望一切都用开源系统来完成.基于这个出发点,那就肯定排除了各大云视频平台(腾讯云 音视频点播VOD.网易云视频.七牛云.阿里云 视频服务等).其实这里我还是建议购买云视频平台,因为自己造轮子肯定没有别人造的好(专门研发团队除外.以此业务为生的公司除外),再说,云视频平台服务商提供的都是一整套解决方案:收集.存储.转码.播放器等,并且在cdn和弹性扩容上都能得到最大保障. 准备 视频点播最少需要两样东西:流媒体服务.视频播放器. 因为这是

详解Spring Cloud 跨服务数据聚合框架

AG-Merge Spring Cloud 跨服务数据聚合框架 解决问题 解决Spring Cloud服务拆分后分页数据的属性或单个对象的属性拆分之痛, 支持对静态数据属性(数据字典).动态主键数据进行自动注入和转化, 其中聚合的静态数据会进行 一级混存 (guava). 举个栗子: 两个服务,A服务的某张表用到了B服务的某张表的值,我们在对A服务那张表查询的时候,把B服务某张表的值聚合在A服务的那次查询过程中 示例 具体示例代码可以看 ace-merge-demo 模块 |------- ac

详解Vue2.0配置mint-ui踩过的那些坑

最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑.. vue.js介绍 Vue.js 是一个用于创建 web 交互界面的.其特点是 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动 自动追踪依赖的模板表达式和计算属性. 组件化 用解耦.可复用的组件来构造界面. 轻量 ~2