一、新建api目录,并新建一个api.js文件,定义接口
import axios from 'axios'
import qs from 'qs'
import { baseurl } from './config'
axios.defaults.baseURL = baseurl
//登录
export const login = params => { return axios.post('/login', params) }
//首页
export const getMenuList=() => { return axios.get('/index') }
二、main.js入口文件引用
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import * as api from './api/api'
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.prototype.$api = api
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
三、vue文件中使用上述接口 this.$api.login
<template>
<div>
<el-form ref="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit()">登陆</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import store from '../../store/store'
export default {
name: "login",
data() {
return {
username: "",
password: "",
}
},
methods: {
submit() {
var loginParams={
username: this.username,
password: this.password
}
this.$api.login(loginParams).then((res) => {
console.log("返回状态吗:"+res.data.code)
if(res.data.code === 200){
localStorage.setItem("token",res.data.token)
this.$router.push({ name: 'index'})
}else{
console.log("resonse is:"+res.data.content)
}
}).catch((err) => {
console.log(err)
})
}
}
}
</script>
<style scoped>
</style>