码迷,mamicode.com
首页 > Windows程序 > 详细

api应用

时间:2019-02-16 22:03:06      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:dex   api   重置   NPU   状态   定义   接口   export   label   

 

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

  

 

api应用

标签:dex   api   重置   NPU   状态   定义   接口   export   label   

原文地址:https://www.cnblogs.com/pytim/p/10389421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!