怎么在vue项目中实现一个接口管理功能
怎么在vue项目中实现一个接口管理功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
1.首先,在src目录下新建一个文件夹,我这里叫apis,后台提供的所有接口都在这里定义
cd src #切换到src目录 mkdir apis #新建apis文件
2.第二步,按照后台文档划分的模块新建js文件,这里简单举个例子
资讯模块: info.js
登录注册模块: member.js
个人信息模块 user_info.js
....
cd apis #切换到apis目录 touch info.js member.js user_info.js #新建js文件
现在的目录大概是这个样子
src apis info.js member.js user_info.js main.js
3.第三步,需要引入axios做相应的配置
在apis下新建一个文件夹,叫http.js,在里面做axios相应的配置
touch http.js //新建http.js文件
配置如下:
import axios from 'axios' //创建axios的一个实例 var instance = axios.create({ baseURL:xxx, timeout: 6000 }) //------------------- 一、请求拦截器 忽略 instance.interceptors.request.use(function (config) { return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); //----------------- 二、响应拦截器 忽略 instance.interceptors.response.use(function (response) { return response.data; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); export default function (method, url, data = null) { method = method.toLowerCase(); if (method == 'post') { return instance.post(url, data) } else if (method == 'get') { return instance.get(url, { params: data }) } else if (method == 'delete') { return instance.delete(url, { params: data }) }else if(method == 'put'){ return instance.put(url,data) }else{ console.error('未知的method'+method) return false } }
配置简要说明一下:
引入axios,新建了个axios的实例(axios的实例的axios的功能一样)
请求拦截器响应拦截器不是本文重点,略过
第30行代码及以后是重点,拉出来重点看一下
/** * 使用es6的export default导出了一个函数,导出的函数代替axios去帮我们请求数据, * 函数的参数及返回值如下: * @param {String} method 请求的方法:get、post、delete、put * @param {String} url 请求的url: * @param {Object} data 请求的参数 * @returns {Promise} 返回一个promise对象,其实就相当于axios请求数据的返回值 */ export default function (method, url, data = null) { method = method.toLowerCase(); if (method == 'post') { return instance.post(url, data) } else if (method == 'get') { return instance.get(url, { params: data }) } else if (method == 'delete') { return instance.delete(url, { params: data }) }else if(method == 'put'){ return instance.put(url,data) }else{ console.error('未知的method'+method) return false } }
4.第四步、在apis下面的js文件中引入http.js导出的函数,拿其中一个文件member.js
说明
//member.js 用于定义用户的登录、注册、注销等 import req from './http.js' //定义接口 //在这里定义了一个登陆的接口,把登陆的接口暴露出去给组件使用 export const LOGIN =params=>req('post','/operator/login',params) //这里使用了箭头函数,转换一下写法: //export const LOGIN=function(req){ // return req('post','/operator/login',params) //} //定义注册接口 export const REG =params=>req('post','/operator/reg',params) //定义注销接口 export const LOGOUT =params=>req('post','/operator/logout',params)
5.第五步,在组件中使用接口
登陆组件Login.js使用登录接口
//Login.vue <template> <div> <input type='text' v-modal='user.userId'> <input type='text' v-modal='user.pass'> </div> </template> <script> //1. 引入登录的接口定义 import {LOGIN} from '../../apis/user.js' export default{ data(){ return { user:{ userId:'', pass:'' } } }, methods{ //2. 定义登录的逻辑 async login(){ //2.1 awiat LOGIN(this.user) //等待LOGIN(this.user)执行完, //把返回值给user_info let user_info=await LOGIN(this.user) //2.2假设登录成功,返回的数据应该是 //user_info={code:200,msg:'success',data:{token:'xxxxx'}} //然后根据返回的数据做相应的处理,比如储存token } }, mounted(){ //3. 执行登录 this.login() } } </script>
6.这样定义接口虽然看起来麻烦点,但有以下几个好处:
代码看起来规范,所有的接口都在一个文件夹定义,不用分散的各个组件,维护起来简单,例如后台的一些url变了,改起来也方便
可以做到接口一次定义,到处使用
例如首页使用了很多api
//index.js 首页的js文件 import {GET_USER_INFO} from 'apis/user_info.js' //用户信息 import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js' //热门资讯 最新资讯 import {GET_HOT_LECTRUE} from'apis/lectrue.js' //讲座推荐
用户界面也会用到用户信息api
//user_info.js用户信息页面 import {GET_USER_INFO} from 'apis/user_info.js' //用户信息
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对亿速云的支持。