×

聊聊vuejs里对于API接口的处理、封装以及跨域方法应用

作者:Web前端之家2020.05.18来源:Web前端之家浏览:185评论:2
微信公众号

微信公众号

500.jpg

对于中小型企业,vue应用越来越多,学习vue相对于react的成本要低点,入门相对简单。话说来,你想学精,还是得花很多事件得研究的。您可以关注Web前端之家,一起学习。

今天我们一起来学下:vuejs里对于API接口的处理以及封装方法应用。

API接口基础应用

在原生javascript和JQ里,我们前端处理接口,一般都是使用get和post方法。在vueJs里,也是如此,只不过我们多了一个axios。

在vue里面处理接口,首先我们得装下axios。操作方法如下:

npm install vue-axios --save
npm install qs.js --save  //这一步可以先忽略,它的作用是能把json格式的直接转成data所需的格式

安装完之后,我们在vue配置文件里应用它,看代码:

import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios    //全局注册,使用方法为:this.$axios
Vue.prototype.qs = qs           //全局注册,使用方法为:this.qs

然后在项目里应用它:

<script>
    export default{
        data(){
            return{
                userId:666,
          token:'',
            }
        },
        created(){
            this.$axios({
                method:'post',
                url:'api',
                data:this.qs.stringify({    //这里是发送给后台的数据
                      userId:this.userId,
                      token:this.token,
                })
            }).then((response) =>{          //这里使用了ES6的语法
                console.log(response)       //请求成功返回的数据
            }).catch((error) =>
                console.log(error)       //请求失败返回的数据
            })
        }
    }</script>

这是个最简单的处理api接口的应用。

如果项目中有很多个接口呢?那么我们就不能这样去做了,利用原生js处理方法,封装起来。

封装

我们拿一个很简单的例子来说明下:

/** 
 * api接口统一管理
 */
import { get, post } from './axios';
/**
 * @param {string} params 
 * 我们定义了一个topics方法
 * 这个方法有一个参数params
 * params是我们请求接口时携带的参数对象
 * 而后调用了我们封装的post方法
 * post方法的第一个参数是我们的接口地址
 * 第二个参数是topics的params参数
 * 即请求接口时携带的参数对象
 * 最后通过export导出topics。
 */
// 用户相关接口
export const login = params => post('/users/login', params);//登录
export const logout = params => post('/users/logout', params);//登出
export const uplodHead = params => post('/users/uploadHead', params);//修改头像
export const bannerTextList = params => post('/query/bannerTextList', params);//查询轮播内容
export const getArticle = params => post('/query/getArticle', params);//普通文章详情
export const uploadBgImg = params => post('/upload/uploadBgImg', params);//普通文章页面背景
export const getBannerBg = params => post('/query/getBannerBg', params);//查询普通文章页面背景
....

从上面的的代码可以看出,我们把每个功能api都封装起来了,并且放在api.js里,这样处理,便于我们在其他页面应用它。

现在我们要应用它,先在公用index.js里配置下,

import * as api from './api'
export default api

接下来我们可以在其他页面里应用它了。

 //先引入
import { getArticle } from '..tp/api.js' 

//使用
getArticle(这里是参数).then((res)=>{        
	console.log(res);
})

跨域

众所周知,处理API接口,经常会遇到跨域问题,在vueJS里,我们处理跨域的方法比较简单。这里也直接拿代码来说;

在vue.config.js进行如下配置:

module.exports = {
    publicPath: buidLocal ? '' : '/',
    outputDir: buidLocal ? 'public/static/YhIndex_app' : 'dist',
    assetsDir: 'static',
    lintOnSave: false,
    productionSourceMap: !buidLocal, // 本地包编译不需要SourceMap
    filenameHashing: !buidLocal, // 本地包编译不需要给文件名添加hash
    devServer: {
        host: '0.0.0.0',
        port: '8086',
        proxy: {
            '/static/trade.html': {
              target: 'http://localhost:8086',
              pathRewrite: {
                  '/static/trade.html': '/trade.html',
              }
            },
            '/bo/call': {
                target: `http://192.168.35.88:10576`, 
                changeOrigin: true,
            },
            '/login': {
                target: `http://192.168.35.88:10576`, 
                changeOrigin: true,
            },
            '/upload_image': {
                target: `http://192.168.35.88:10576`, 
                changeOrigin: true,
            },
            '/task': {
                target: `http://192.168.35.88:8920`, 
                changeOrigin: true,
            }
          },
    }
};

这样就可以了,当然这是项目里的DEMO代码,大家如果要应用,可以根据自己项目的配置进行修改即可。

总结

关于在vuejs里处理api接口的方法和应用,大概就这些内容了,分析得不够详细,如果您基础不好或者看不懂,可以加群咨询或者留言都可以。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/vuejs20200518.html

网友评论文明上网理性发言 已有2人参与

发表评论:

评论列表

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.0 Valyria

时时彩平台哪个好 河北快3走势图彩经网 山西11选5分布走势图 湖北快三专家推荐号码推荐 天津11选五5开奖电脑版走势图 上海十一选五前三直选走势图 手机上炸金花技巧规律 上海时时乐是正规彩票吗 福彩陕西快乐10分 江苏11选5基本走势图 2019年辽宁快乐12开奖结果 黑龙江36选7玩法中奖规则 辽宁快乐12前二直选走势图 贵州快三推荐号码今天 北京十一选五走势图表 快乐十分选五任选规则 甘肃快3开奖果