1.ajax请求模块src/api/ajax.js
/*
ajax请求函数模块
返回值: promise对象(异步返回的数据是: response.data)
*/
import Axios from 'axios'
export default function ajax(url='',data={},type='GET'){
return new Promise(function(resolve,reject){
let promise
if(type==='GET'){
let dataStr=''
/*遍历data¸拼接形如:name=xiaoming&pwd=123&sex=Female...&
Object.keys()说明:
https://www.cnblogs.com/wangshengli520/p/10044952.html*/
Object.keys(data).forEach(key=>{
dataStr+= key+'='+data[key]+'&'
})
if(dataStr!==''){
/*取出dataStr字符串从下标0到&下标之间所有字符串,形如:
name=xiaoming&pwd=123&sex=female
subString(start,end)说明:
https://www.w3school.com.cn/js/jsref_substring.asp
*/
dataStr=dataStr.subString(0,lastIndexOf('&'))
/* 拼接出真正url,形如:
http://baidu.com?name=xiaoming&pwd=123&sex=Female */
url=url+'?'+dataStr
}
// 发送请get求到服务器
promise=Axios.get(url)
}else{
//发Post请求到服务器
promise=Axios.post(url,data)
}
// 成功则调用resolve,提供数据
promise.then(response=>{
resolve(response.data)
})
// 失败则调用reject,提供原因
.catch(error=>{
reject(error)
})
})
}
2.所有接口请求模块src/api/index.js
/*
包含n个接口请求函数的模块
函数的返回值: promise对象
*/
import ajax from './ajax.js'
const BASE_URL='/api'
// 1、根据经纬度获取位置详情 参数geohash--经纬度
export const reqAddress = geohash => ajax(`${BASE_URL}/position/${geohash}`)
// 2、获取食品分类列表
export const reqFoodCategorys= ()=>ajax(BASE_URL+'/index_category')
// 3、根据经纬度获取商铺列表longitude经,latitude纬,也可写:(a,b)=>ajax(...,{longitude:a,latitude:b})
export const reqShops=(longitude,latitude)=>ajax(BASE_URL+'/shops',{longitude,latitude})
// 4、根据经纬度和关键字搜索商铺列表
export const reqSearchShop = (geohash, keyword) => ajax(BASE_URL+'/search_shops', {geohash, keyword})
// 6、用户名密码登陆
export const reqPwdLogin = ({name, pwd, captcha}) => ajax(BASE_URL+'/login_pwd', {name, pwd, captcha}, 'POST')
// 7、发送短信验证码
export const reqSendCode = (phone) => ajax(BASE_URL+'/sendcode', {phone})
// 8、手机号验证码登陆
export const reqSmsLogin = (phone, code) => ajax(BASE_URL+'/login_sms', {phone, code}, 'POST')
// 9、根据会话获取用户信息
export const reqUserInfo = () => ajax(BASE_URL+'/userinfo')
// 10、用户登出
export const reqLogout = () => ajax(BASE_URL+'/logout')
3.配置代理用于跨域访问后端:根目录/config/index.js
找到dev的 proxyTable:{}在其中写入对应代码
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { // 匹配所有以 '/api'开头的请求路径
target: 'http://localhost:4000', // 代理目标的基础路径
changeOrigin: true, // 支持跨域
pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
'^/api': ''
}
}
},