vue学习（2）—— 在vue中使用axios

最新推荐文章于 2023-07-19 17:30:30 发布

Yacht13

最新推荐文章于 2023-07-19 17:30:30 发布

阅读量552

点赞数

分类专栏： vue 文章标签： vue axios

本文链接：https://blog.csdn.net/Archer__13/article/details/126994453

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引入axios和vue

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>  <!--引入axios -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->

在vue中使用axios发起请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <form id="login">
        姓名：<input type="text" v-model="username">   <br/>
        密码：<input type="password" v-model="password">  <br/>
        <button type="button" @click="loginUser">登录</button>
    </form>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  <!--引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->

    <script type="text/javascript">
        var app = new Vue({
            el:"#login",
            data:{
                username:"",
                password:""
            },
            methods: {
                loginUser:function () {
                    axios({
                        method: "post",
                        url:"http://localhost:8080/vue/login",
                        params:{
                            username:this.username,
                            password:this.password
                        }
                    });
                }
            }
        })
    </script>
</body>
</html>

package com.xdu.vue.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class UserController {
    @RequestMapping("/loginPage")
    public String loginPage(){
        return "login";
    }

    @RequestMapping("/login")
    public void loginUser(String username, String password){
        System.out.println(username);
        System.out.println(password);
    }
}

controller可以获取到表单中的值