自己写了一个基于nuxt搭建ant-design-vue框架的后台管理项目，这个项目是自己工作之余拿来练手的，通过这个项目让自己去学习一下nuxt的服务端渲染的功能，这个过程会涉及到很多东西，凡是我觉得在开发过程中代码习惯，接口调用的优化等等，有用技巧我都会记录下来，涉及到很多知识点哦,这一章就是配置axios。
在初始化nuxt项目安装axios
1.项目初始化阶段就可以安装好axios接下来就是在项目中配置的问题了，如果没有安装的话可以自己选择手动安装一下通过
npm i axios --save-dev
进行安装.
2.安装完成后在plugins文件夹底下创建一个axois.js文件 引入已经安装好的axios插件
import axios from 'axios'
export default axios
成功效果图
配置好axios后，现在可以在vue文件中进行引入并且调用了，现在现看看我们是否引入成功
vue文件.png
控制台打印.png
出现打印的函数书名我们已经引入成功。后续就是扩展自己配置的接口。
优化接口
在请求接口的过程中，实际需求涉及到很多请求的接口，我们可以通过一个接口配置文件进行管理，将所有vue文件的请求全部抽取出来，方面以后接口修改与参数调整等等
废话不多说 直接上图上代码：
微信图片_20191217164253.png
根据图片创建文件夹与文件,在index.js文件中编写下面的代码
/**
* author : Weitao.Ma
* createTime : 2019/12/17 11:35
* contact 17753908176
*/
import axios from '~/plugins/axios'
/**
*
* @type {{login: (function(): (Q.Promise<any> | Promise<AxiosResponse<T>> | * | void))}}
*/
export const userApi ={
/**
* @function 登录
* @return {Q.Promise<any> | Promise<AxiosResponse<T>> | * | void}
*/
login:()=>{
return axios.post('/admin/login')
}
}
然后在vue中引入api，如下代码
import {userApi} from '~/api/index'
调用如下
<template>
<div class="loginWrapper">
<a-form :form="form" @submit="handleSubmit" class="loginForm">
<a-form-item label="Name" :label-col="{ span: 5, offset: 2 }" :wrapper-col="{ span: 10,offset: 2}" justify="space-around">
<a-input
id="name"
v-decorator="[
'Name',
{ rules: [{ required: true, message: '请输入用户名' }] },
]"
placeholder="请输入用户名" />
</a-form-item>
<a-form-item label="PassWord" :label-col="{ span: 6, offset: 1}" :wrapper-col="{ span: 10,offset: 2 }" justify="space-around">
<a-input
id="PassWord"
v-decorator="[
'PassWord',
{ rules: [{ required: true, message: '请输入密码' }] },
]"
placeholder="请输入密码" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" html-type="submit">
Submit
</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
import {userApi} from '~/api/index'
export default {
name: "login",
data() {
return {
formLayout: 'horizontal',
form: this.$form.createForm(this, { name: 'login_rule' }),
};
},
created(){
},
methods: {
handleSubmit(e) {
e.preventDefault();
const hide = this.$message.loading('正在登录,请稍后...', 0);
setTimeout(hide, 1000);
this.form.validateFields((err, values) => {
if (!err) {
userApi.login().then(res=>{
console.log(res)
this.$message.success('登录成功')
})
}
});
}
},
}
</script>
<style scoped>
.loginWrapper{
position: relative;
height: 100%;
background: #ccc;
}
.loginForm{
position: absolute;
width: 350px;
height: 300px;
background: #fff;
left: 50%;
margin-left: -175px;
top: 50%;
margin-top: -150px;
padding-top: 15px;
}
</style>
