写一个VUE3的前后端登陆功能代码

好的，我会尽力给出一个 Vue 3 的前后端登录功能代码。

首先，在前端 Vue 组件中，我们需要有一个表单来收集用户的登录信息，包括用户名和密码。我们可以使用 Vue 3 的 Composition API 来维护表单数据和状态，例如：

import { ref, computed } from 'vue'

export default {
  setup() {
    const username = ref('')
    const password = ref('')
    const formValid = computed(() => username.value && password.value)

    const handleSubmit = () => {
      // 在这里处理登录逻辑
      // 例如，调用后端 API 发送登录请求
    }

    return {
      username,
      password,
      formValid,
      handleSubmit
    }
  }
}

然后，我们可以在模板中使用这些数据和方法：

<template>
  <form @submit.prevent="handleSubmit">
    <label>
      用户名：
      <input v-model="username" />
    </label>
    <br />
    <label>
      密码：
      <input v-model="password" type="password" />
    </label>
    <br />
    <button :disabled="!formValid">登录</button>
  </form>
</template>

当用户点击登录按钮时，会调用 `handleSubmit` 方法。在这个方法中，我们可以使用 `fetch` 或者 Axios 等库来调用后端的登录 API，并处理返回的结果。

例如，使用 Axios 的代码可能长这个样子：

import axios from 'axios'

const handleSubmit = async () => {
  try {
    const response = await axios.post('/api/login', {
      username: username.value,
      password: password.value
    })