vue学习日记：vue发送请求

首先，安装axios:

npm install axios --save

然后在src文件夹下新建service文件夹。

service文件夹中新建文件login.service.js。

代码如下：

import axios from 'axios';

export default {
    // 登录
    login: (data) => axios({
        method: 'post',
        url: '/jwt/token',
        data: data
    }).then(res => {
        // 请求成功之后的回调在这里处理，失败之后的回调由拦截器统一处理
        console.log(res);
        if (res.status === 200) {
            return res.data;
        };
    })
};

然后在login.vue中引入这个service并发送请求，代码如下：

<template>
    <div>
        <input type="text" class="username" v-model="params.username">
        <input type="password" class="password" v-model="params.password">
        <button @click="login(params)">login</button>
    </div>
</template>

<script>
import loginService from '@/service/login.service'
export default {
    name: "login",
    data () {
        return {
            params: {
                username:"",
                password:"",
            },

        }
    },
    methods: {
        login: function (params) {
            loginService.login(params).then(res => {
                console.log(res);
            });
        }
    }
};
</script>

<style scoped>

</style>

输入用户名和密码，点击登录按钮即可看到效果。