api应用

Posted 2021-02-09 pytim

 

一、新建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>