Vue.js 项目接口管理

在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢?

本文使用vue-cli生成的项目举例。

第一步.在src目录下新建一个文件夹http,在http目录下建文件夹moudules,后台提供的所有接口都在这里定义.

第二步.在moudules目录下划分模块新建js文件,比如:

a.会员中心模块: member.js

b.登录注册模块: login.js

c.合伙人模块: partner.js

目录大概是这个样子:

 第三步,需要引入axios做相应的配置。

1.首先安装vuex

npm install axios

2.在http目录下新建axios.js:

/* jshint esversion: 6 */

import axios from ‘axios‘;
import Cookies from "js-cookie";
import config from ‘./config‘;
import router from ‘@/router‘;
import { Toast} from ‘vant‘;

export default function $axios(options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: config.baseUrl,
      headers: config.headers,
      timeout: config.timeout,
      withCredentials: config.withCredentials,
    });

    // request 拦截器
    instance.interceptors.request.use(
      config => {
        //在发送之前做点什么
        let auth_token = Cookies.get(‘auth_token‘);
        if (auth_token) {
          config.headers.auth_token = auth_token;
        } else {
          let loginpage = Cookies.get(‘loginpage‘);
          if (loginpage) {
            router.push(‘/login‘);
          }
        }
        if (config.method === ‘post‘) {}
        return config;
      },
      error => {
        // 判断请求超时
        if (error.code === ‘ECONNABORTED‘ && error.message.indexOf(‘timeout‘) !== -1) {
          Toast("信号不好,请求超时")
        }
      }

    );

    // response 拦截器
    instance.interceptors.response.use(
      response => {
        //对响应数据做点什么
        let data;
        if (response.data == undefined) {
          data = JSON.parse(response.request.responseText);
        } else {
          data = response.data;
        }
        return data;
      },
      err => {
        if (err && err.response) {
          switch (err.response.status) {
            case 400:
              err.message = ‘请求错误‘;
              break
            case 401:
              err.message = ‘未授权,请登录‘;
              break
            case 403:
              err.message = ‘拒绝访问‘;
              break
            case 404:
              err.message = `请求地址出错: ${err.response.config.url}`;
              break
            default:
          }
        }
        if (/10000ms/gi.test(err)) {
          Toast("信号不好,请求超时")
        }
        // 返回接口返回的错误信息
        return Promise.reject(err);
      }
    );

    // 请求处理
    instance(options).then(res => {
      resolve(res);
      return false;
    }).catch(error => {
      reject(error);
    });
  });
}

3.在http目录下新建config.js:

export default {
  method: ‘get‘,
  // 基础url前缀
  baseUrl: baseUrl,//请求的域名地址
  // 请求头信息
  headers: {
    ‘Content-Type‘: ‘application/json;charset=UTF-8‘
  },
  // 参数
  data: {},
  // 设置超时时间
  timeout: 10000,
  // 携带凭证
  withCredentials: false,
  // 返回数据类型
  responseType: ‘json‘
}

第四步,在http下面的js文件中引入api.js导出的函数,拿其中一个文件login.js说明:

1.api.js:

 /* jshint esversion: 6 */

import * as login from ‘./moudules/login‘;
// 默认导出
export default {
    login,
}

2.login.js

import axios from ‘../axios‘

/*
 * 系统登录模块
 */

// 登录
export const login = (data) => {
    return axios({
        url: ‘/app/api/v1/user/phonelogin‘,
        method: ‘post‘,
        data
    });
};

第五步:将api挂载在 Vue 原型的 $api 对象上

1.在http文件下新建index.js文件:

import api from ‘./api‘;

const install = Vue => {
    if (install.installed)
        return;
    install.installed = true;
    Object.defineProperties(Vue.prototype, {
        // 注意,此处挂载在 Vue 原型的 $api 对象上
        $api: {
            get() {
                return api
            }
        }
    });
};

export default install

2.在项目的main.js文件下导入api:

import api from ‘./http‘;

Vue.use(api);

第六步步,在组件中使用接口,比如在登陆页面中使用login的接口:

        let loginInfo = {
          phone: this.field.phone,
          code: this.field.sms,
          cityname: this.field.city
        };
        this.$api.login.login(loginInfo).then(res => {
          if (res.ret == 0) {
            Cookies.set("auth_token", res.data.authToken);
              this.$toast.success({message:"登录成功",duration:2000});
            setTimeout(() => {
              this.loading = false;
              this.$router.go(-1);
            }, 2000);
          }
        })

最终http目录为:

以上方法定义接口虽然看起来麻烦点,但有却有其好处:

  • 代码看起来规范,所有的接口都在一个文件夹定义,不用分散的各个组件,方便维护管理。
  • 可以做到接口一次定义,多处使用。

原文地址:https://www.cnblogs.com/lwming/p/10987176.html

时间: 2024-10-11 12:22:11

Vue.js 项目接口管理的相关文章

vue.js项目构建基础

这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJs安装是否成功? nodeJs安装完成,自带npm,可以检查npm是否已经安装 安装webpack. webpack是一个模块加载器兼打包工具,在vue项目中,为了更好的管理代码使用模块系统,使用webpack打包. 安装webpack  查看webpack是否安装成功? 安装 vue-cli 脚手

vue.js项目构建之vue-router2.0的使用

vue-router2.0官方文档地址:http://router.vuejs.org/zh-cn/index.html 单页应用? 单页应用程序(SPA,single page web application). SPA其实就是整个网站只有一个页面,只改变页面的显示内容,不需要改变整个网页. vue.js 的单页面应用是基于路由和组件的.路由用于设定访问路径,并将路径和组件映射起来.页面内容切换这里就是组件的切换. vue-router是vue.js官方的路由插件,适合构建单页面应用. vue

Vue.js项目的开发环境搭建与运行

写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装node.js(JavaScript运行环境runtime) 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以完成. 完成之后,开发命令行工具,输入 node -v 如果出现相应的版本号,则说明安装成功. 另外,npm是node.js下的包管理器,npm能很好的和诸如webp

vue.js的状态管理vuex中store的使用

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

如何把vue.js项目部署到服务器上

如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSourceMap: false 2-运行npm run build 然后在项目路径中找到打包后的文件,在项目文件的dist文件夹下面的static和index.html就是打包后的文件.然后我自己创建了cccBlog文件夹,把static和index.html拷贝到cccBlog下面,然后向服务器上传这个

如何创建vue.js项目和node.js项目?

一.搭建vue.js项目     1.先下载node.js  2.通过node.js的npm命令下载node.js的vue-cli(是一个基于 Vue.js 进行快速开发的完整系统) 1.使用阿里镜像下载vue-cli ( 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 再全局安装vue-cli npm install --global vue-cli ) 3.用vue-cli创建项目 1

vue 项目接口管理

在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理. 本文使用vue-cli生成的项目举例. 举例 拿segmentfault的官网简单举个例子,先看一下官网: 看下网站,脑补一下后台给出的文档,如果后台不傻的话给出的文档肯定分模块的,假设后台给出的文档分为了以下几个模块(假设的,不要较真哈): 资讯模块 (我的订阅.热门资讯) 问答模块 专栏模块 讲堂模块 圈子模块 发现

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

ASP.NET MVC+Vue.js实现联系人管理

接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么样的功能. 上面截图可以看出,这是一个很简单的表格管理功能.我们先分析一下,上述有哪些功能需要实现: 1.默认先加载出所有的联系人信息,有信息的行后面的操作那一栏,显示"修改"."删除",没有信息的行后面的操作那一栏,显示"添加"(默认只添加一行需要