vue3+fastapi 前端登入后端验证代码段

前端采用vue3发送用户名及密码，后端使用fastapi进行验证
很多东西用完了，不久会忘记，边学边往，记录下来之后也好找一些

• vue3页面代码

<template>
  <div id="b-container" class="container b-container">
    <form @submit.prevent="onSubmit" id="b-form" class="form">
      <h2 class="form_title title">Sign in to Website</h2>

      <div class="form-item">
        <input
          v-model="form.username"
          class="form__input"
          type="text"
          placeholder="用户名"
          @blur="validateField('username')"
        />
        <p v-if="errors.username" class="error">{{ errors.username }}</p>
      </div>

      <div class="form-item">
        <input
          v-model="form.password"
          class="form__input"
          type="password"
          placeholder="密码"
          @blur="validateField('password')"
        />
        <p v-if="errors.password" class="error">{{ errors.password }}</p>
      </div>

      <a class="form__link">忘记密码? 请联系管理员</a>
      <button type="submit" class="form__button button submit">登录</button>
    </form>
  </div>
</template>

• ts校验代码

<script lang="ts" setup>
import {  reactive,ref } from "vue";
import type { userPasswordForm } from '@/api/model/queryMode'
  /*userPasswordForm的类型
  
export interface userPasswordForm {
  username: string;
  password: string;
}
  */
import {submitPasswordApi} from '@/api/submitPassword' // 这是发送axios
/*
import httpInstance from '@/https/http'
import type { userPasswordForm } from '@/api/model/queryMode'

export const submitPasswordApi = (params: userPasswordForm) =>
  httpInstance.post('/dataop/verifyUpwd', params)


*/

const form = reactive<userPasswordForm>({
  username: "",
  password: ""
});

const errors = reactive<userPasswordForm>({
  username: "",
  password: ""
});

const validateField = (field: keyof userPasswordForm) => {
  if (field === "username") {
    if (!form.username) {
      errors.username = "用户名不能为空";
    } else if (form.username.length < 3 || form.username.length > 15) {
      errors.username = "用户名长度应在3到15个字符之间";
    } else {
      errors.username = "";
    }
  }

  if (field === "password") {
    if (!form.password) {
      errors.password = "密码不能为空";
    } else if (form.password.length < 6) {
      errors.password = "密码长度不能少于6个字符";
    } else {
      errors.password = "";
    }
  }
};

const validateForm = () => {
  validateField("username");
  validateField("password");

  // 检查是否有任何错误
  return !errors.username && !errors.password;
};

const onSubmit = () => {
  if (validateForm()) {
    ElMessage.success("登入成功 !")
    // 在这里处理表单提交逻辑，比如发送请求
    const res = submitPasswordApi(form)
    console.log(res)
  } else {
    ElMessage.error("请仔细检查账号与密码");
  }
};
</script>

• fastapi后端接受并且校验

这里省去了数据库验证账号和密码，直接验证，注意接受前端发来的表单数据必须经过pydantic 的BaseModel数据类型验证。

from pydantic import BaseModel
class userPwd(BaseModel):
    username:str
    password:str


@app.get('/dataop/verifyUpwd')
async def verifyUserPwd(self,params:userPwd):
        if params.username=="admin" and params.password=="123456":
            return {"message":"ok"}
        else:
            return {"message":"error"}

参考链接：https://blog.youkuaiyun.com/qq_41045128/article/details/125651144

参考gitee：https://gitee.com/tongqn/login-template