vue项目接口地址暴露_Vue.js 项目接口管理
在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？
本文使用vue-cli生成的项目举例。
第一步.在src目录下新建一个文件夹http，在http目录下建文件夹moudules，后台提供的所有接口都在这里定义.
第二步.在moudules目录下划分模块新建js文件,比如：
a.会员中心模块： member.js
b.登录注册模块: login.js
c.合伙人模块： partner.js
目录大概是这个样子：
第三步，需要引入axios做相应的配置。
1.首先安装axios
npm install axios
2.在http目录下新建axios.js:
/* jshint esversion: 6 */
import axios from 'axios';
import Cookies from "js-cookie";
import config from './config';
import router from '@/router';
import { Toast} from 'vant';
export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials,
});
// request 拦截器
instance.interceptors.request.use(
config => {
//在发送之前做点什么
let auth_token = Cookies.get('auth_token');
if (auth_token) {
config.headers.auth_token = auth_token;
} else {
let loginpage = Cookies.get('loginpage');
if (loginpage) {
router.push('/login');
}
}
if (config.method === 'post') {}
return config;
},
error => {
// 判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
Toast("信号不好，请求超时")
}
}
);
// response 拦截器
instance.interceptors.response.use(
response => {
//对响应数据做点什么
let data;
if (response.data == undefined) {
data = JSON.parse(response.request.responseText);
} else {
data = response.data;
}
return data;
},
err => {
if (err && err.response) {
console.log(err)
}// 返回接口返回的错误信息
return Promise.reject(err);
}
);
// 请求处理
instance(options).then(res => {
resolve(res);
return false;
}).catch(error => {
reject(error);
});
});
}
3.在http目录下新建config.js:
export default {
method: 'get',
// 基础url前缀
baseUrl: baseUrl,//请求的域名地址
// 请求头信息
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
// 参数
data: {},
// 设置超时时间
timeout: 10000,
// 携带凭证
withCredentials: false,
// 返回数据类型
responseType: 'json'
}
第四步，在http下面的js文件中引入api.js导出的函数，拿其中一个文件login.js说明：
1.api.js:
/* jshint esversion: 6 */
import * as login from './moudules/login';
// 默认导出
export default {
login,
}
2.login.js
import axios from '../axios'
/*
* 系统登录模块
*/
// 登录
export const login = (data) => {
return axios({
url: '/app/api/v1/user/phonelogin',
method: 'post',
data
});
};
第五步：将api挂载在 Vue 原型的 $api 对象上
1.在http文件下新建index.js文件：
import api from './api';
const install = Vue => {
if (install.installed)
return;
install.installed = true;
Object.defineProperties(Vue.prototype, {
// 注意，此处挂载在 Vue 原型的 $api 对象上
$api: {
get() {
return api
}
}
});
};
export default install
2.在项目的main.js文件下导入api：
import api from './http';
Vue.use(api);
第六步步，在组件中使用接口，比如在登陆页面中使用login的接口：
let loginInfo = {
phone: this.field.phone,
code: this.field.sms,
cityname: this.field.city
};
this.$api.login.login(loginInfo).then(res => {
if (res.ret == 0) {
Cookies.set("auth_token", res.data.authToken);
this.$toast.success({message:"登录成功",duration:2000});
setTimeout(() => {
this.loading = false;
this.$router.go(-1);
}, 2000);
}
})
最终http目录为：
以上方法定义接口虽然看起来麻烦点，但有却有其好处：
代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，方便维护管理。
可以做到接口一次定义，多处使用。
【vue】---项目接口管理---【巷子】
一.前言 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口 假设后端的文档分成了以下几个模块 1.发现模块 2.个人信息模块 3.商品模块 4.评论模块 ...... ...
vue.js项目构建
这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...
Vue.js项目的开发环境搭建与运行
写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...
Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
vue.js项目安装
Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...
vscode下面开发vue.js项目
vscode下面开发vue.js项目 https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...
建立多页面vue.js项目
介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...
vue-cli脚手架搭建Vue.js项目
前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g PS:-g 就是 ...
随机推荐
CSS3新特性应用之用户体验
一.光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可. 完整代码: curosr: u ...
CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
ubuntu下安装jdk(rpm版)错误: 找不到或无法加载主类 解决方法
1.官网下载jdk,linux64位,rpm格式的. 2.提取下载的文件,提取到一个目录下,我的是提取到了usr目录下了 3.终端输入:sudo gedit ~/.bashrc 会打开一个文本,在文本 ...
poj3348 Cows 凸包+多边形面积 水题
/* poj3348 Cows 凸包+多边形面积 水题 floor向下取整,返回的是double */ #include #include # ...
ASP.NET批量下载服务器端指定目录文件
//遍历服务器指定文件夹下的所有文件 string path = "uploads/Image/"; string serverPath = Server.MapPath(path ...
postgresql，封装数据库语句时，查询报错。
sql = "select password from admin where username = " + "\'" + username + "\ ...
实际生产用法CMS和G1
java -Xms100m -Xmx100m -Xmn50m -XX:MetaspaceSize=20m -XX:MaxMetaspaceSize=20m -XX:+UseConcMarkSweepG ...
原型链(_proto_) 与原型(prototype) 有啥关系？
prototype对象里面方法及属性是共享的...... 1.JavaScript 中每一个对象都拥有原型链(__proto__)指向其构造函数的原型( prototype),object._prot ...
php redis 的基本操作
前言: 断断续续的接触了redis的使用.但是也就简单的记住了几个set.get方法,用的还是太少了吧.所以来做个笔记,记录下一些常用的命令. 内容: 首先是php连接redis. $redis = ...
JQuery选择器和DOM的操作-入门学习
嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...