vue3+axios登录功能

首先，在Vue 3项目中安装axios：

npm install axios

接下来，创建一个登录组件，例如Login.vue。在该组件中可以定义一个对象，用于存储用户输入的用户名和密码：

<template>
  <div>
    <input type="text" v-model="username" />
    <input type="password" v-model="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        // 登录成功后的处理
      }).catch(error => {
        // 登录失败后的处理
      });
    }
  }
};
</script>

在上面的代码中，我们使用axios的post方法向服务器发送一个登录请求。在请求中，我们将用户输入的用户名和密码作为参数传递给服务器。如果登录成功，我们可以在then中处理返回的数据；如果登录失败，我们可以在catch中处理错误信息。

接下来，我们需要在项目中配置axios。在main.js文件中添加以下代码：

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000'; // 设置axios的基础URL

这里的baseURL应该根据实际情况进行配置。在这个例子中，我们假设服务器的地址是http://localhost:3000。

最后，在服务器端实现登录接口。这里使用Express框架实现一个简单的登录接口：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  // TODO: 验证用户名和密码是否正确
  if (username === 'admin' && password === '123456') {
    res.send({
      code: 0,
      message: '登录成功'
    });
  } else {
    res.send({
      code: -1,
      message: '用户名或密码错误'
    });
  }
});
app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在上面的代码中，我们使用body-parser中间件来解析请求体。当接收到登录请求时，我们从请求体中获取用户名和密码，并根据实际情况进行验证。如果用户名和密码正确，我们返回一个code为0的响应；否则，返回一个code为-1的响应。

至此，一个简单的Vue 3 + Axios登录功能就实现了。当用户在前端页面输入用户名和密码并点击登录按钮时，会向服务器发送一个POST请求，服务器根据实际情况进行验证，最终返回一个响应，前端页面根据响应进行处理。