对中小企业而言，vue应用越来越多，学习vue的成本比react低，入门相对简单。换句话说，如果你想学好，你仍然需要花很多事件来研究。你可以注意Web前端之家，一起学习。
今日我们一起学习：vuejsAPI接口的处理及包装方法的应用。
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方法的第一个参数是我们的接口地址
* 第二个参数是topicsparams参数
* 即请求接口时携带的参数对象
* 最后，topics通过export导出。
*/
// 用户相关接口
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, // 本地包编译不需要SourceMapp
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接口的方法和应用程序，这些内容可能不够详细。如果基础不好或者看不懂，可以加群咨询或者留言。
评论0