zoukankan      html  css  js  c++  java
  • 【vue】 项目接口管理

    一、前言

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

      假设后端的文档分成了以下几个模块

      1、发现模块

      2、个人信息模块

      3、商品模块

      4、评论模块

      ......

      一般来说,网站的首页都是复杂的,会用到很多其他页面也会用到api,所以接口统一管理可以做到api的复用

    二、接口管理

      1、在src目录下创建api文件夹

      2、按照后台文档划分模块

        find.js

        info.js

        goods.js

        comment.js

      3、创建http.js 引入axios 配置axios

    复制代码
    import axios from "axios";
    import qs from "qs";
    
    var http = axios.create({
       // baseURL:"XXXX",
        timeout:5000
    })
    //请求拦截
    http.interceptors.request.use((config)=>{
        // if(config.method == "post"){
        //     config.data = qs.stringify(config.data);
        // }
        return config;
    },(err)=>{
        return Promise.reject(err)
    })
    //响应拦截
    http.interceptors.response.use((res)=>{
        return res.data
    },(err)=>{
        return Promise.reject(err)
    })
    
    
    export default (method,url,data = null)=>{
        if(method == "post"){
            return http.post(url,data);
        }else if(method == "get"){
            return http.get(url,{params:data})
        }else{
            return;
        }
    }
    复制代码

      4、在api文件夹下引入http.js.简单用info.js为例

      

    复制代码
    import http from "./http.js";
    
    //在这里定义了一个登陆的接口,把登陆的接口暴露出去给组件使用
    export const login = params=>http("post","/user/login",params);
    
    export const register = params=>http("get","/user/register",params);
    复制代码

      5、在组件中使用

    复制代码
    
    
    import {homeData} from "../../apis/home";

    export default {
      async handleData(){
        let data = await homeData()
        console.log(data)
      }
    }
     
    复制代码
  • 相关阅读:
    ASP.NET MVC5中的Model验证
    MVC方式显示数据(数据库)
    MVC方式显示数据(手动添加数据)
    EF数据Linq方式查询
    c# MVC方式文件上传
    调用BAPI创建病患主数据时的问题汇总[BAPI_PATIENT_CREATE]
    [代码]如何上载图片到SAP数据库并显示
    [代码]读取物料BOM行项目长文本[READ_TEXT]
    [问题解决]更新订单BOM中的Qty Var-Sz Item字段失败
    [代码]如何在ALV头中显示Logo图片-[REUSE_ALV_GRID_DISPLAY]
  • 原文地址:https://www.cnblogs.com/liuhaov/p/13503394.html
Copyright © 2011-2022 走看看