vue简单接口封装
没有特别的幸运，那么就特别的努力！！！
既然没有优人的天赋，那就拼吧！
先看下效果：
接口封装：
第一步：解决跨域
接口请求，一般都会碰到跨域问题，在vue项目中，我们采用页面代理的方法解决跨域问题：
文件config——index.js文件
index.js
//版本1---简洁版 vue-cli3,4 vue.config.js文件
module.exports = {
assetsDir: 'static', //放置静态文件目录
devServer: {
// 设置主机地址
host: 'localhost',
// 设置默认端口
port: 8080,
// 设置代理
proxy: {
'/api': {
target:'https://www.baidu.com/api', // 请求的第三方接口 或 后端，线上接口
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
secure: true, //true是https false是http
pathRewrite:{
// 路径重写，
'^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
},
}
}
}
//版本2 vue2.0 config----index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
// const ipLoc = 'http://192.168.14.20:8085' //本地
// const ipLoc = 'http://192.168.14.56:8197/test' //测试地址
const ipLoc = 'https://www.baidu.com/jcrh' //线上
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target:ipLoc, // 请求的第三方接口 或 后端，线上接口
// target:'http://localhost:8081/api', // 本地
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
secure: true, //true是https false是http
pathRewrite:{
// 路径重写，
'^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
},
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
第二步：接口封装
我们约定俗成 一般会在src文件下建立一个api文件
这个api文件，就相当于一个管理接口的仓库
api——index.js
安装
npm install vue-axios --save
npm install qs.js --save
import axios from 'axios'
import qs from 'qs'
//立即支付
export const paycode = params => {
return axios.post('recharge/payCode.do',qs.stringify(params)).then(res=>res.data)
}
//地区接口
export const list = params => {
return axios.get('/api/wechat/club/list.json',qs.stringify(params)).then(res => res.data).catch((response)=>{
console.log(response);
})
}
第三步：接口运用
index.vue
<template>
<div class="container">div>
template>
<script>
import {
list } from '../../../src/api';
export default {
data() {
return {
value1: 0,
}
},
created() {
this.test()
},
methods: {
//接口测试
test(){
var param = {
"areaCodeParent":"331081000000"}
list(param).then(res => {
console.log(res)
})
}
},
}
script>
希望能帮助到大家，同时祝愿大家在开发旅途中愉快！！！