vue3+fastapi框架实现的简单接口封装登录功能

西柚cc

已于 2024-03-08 17:40:33 修改

阅读量1.3k

点赞数 5

CC 4.0 BY-SA版权

文章标签： python fastapi vue.js

于 2024-03-08 16:56:28 首次发布

本文链接：https://blog.csdn.net/weixin_44756644/article/details/136563813

本文介绍了如何使用Vue3和FastAPI框架搭建一个简单的登录功能。首先，按照Vue3官方文档创建项目框架，熟悉并创建页面。接着，搭建后端FastAPI服务，提供登录接口。在前端，利用App.vue、main.ts和index.html实现页面交互。最后，展示了功能扩展的可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 首先搭建一个vue的项目框架

关于怎么搭建，可以看vue3的官方开发文档里面有详细介绍，包括vue框架里各个组件和路由的使用都有介绍，可自行学习，网址：https://cn.vuejs.org/guide/quick-start.html
vue项目搭建

2. 其次就是熟悉vue项目项目录并创建自己的页面

熟悉项目入口:

main.ts、App.vue 和 index.html 共同协作完成了一个 Vue.js 单页面应用程序的初始化和渲染过程。以下是它们的作用：

index.html：

index.html 是整个应用的入口 HTML 文件。
包含了应用程序的基本结构，例如头部、底部等静态内容。
包含一个 DOM 元素，通常是一个空的

，用于将 Vue 应用挂载到页面上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动化脚本平台</title>
    <link rel="icon" type="icon" href="./src/assets/favicon.ico
    ">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

main.ts

main.ts 是应用的入口文件，主要负责创建 Vue 实例、引入应用需要的库、配置全局设置等。
通过 createApp 函数创建 Vue 实例，并将根组件 App.vue 挂载到 #app 元素上。
导入并使用路由、状态管理等附加功能。
通常会在这里引入一些全局配置、插件等。

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

App.vue

App.vue 是应用的根组件，定义了整个应用的结构和布局。
包含标签，用于动态渲染 Vue Router 管理的路由组件。
可以包含其他组件、定义全局样式和行为

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
    <div class="wrapper">
    </div>
  <RouterView />
</template>
<style scoped>
</style>

入口文件修改完成基本上这个vue项目就可以运行了，关于怎么创建路由及组件看开发文档，为了快速开发，这里建议使用element组件库，网址https://element-plus.gitee.io/zh-CN/ 这个是和vue3相匹配的，element-plus一定要用这个组件库，element旧的组件库和vue3框架不兼容

3.后端fastapi搭建

注：这个是我自己学习用的可能代码书写没那么规范，但是可以走通，方便初学者理解原理，海涵
python主程序入口main.py

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from live_api import liveface_endpoint
from rotate_api import rotate_endpoint
from login_api import login_endpoint
import os
import sys
import uvicorn
app = FastAPI()
sys.path.append(os.path.join(os.path.dirname(__file__), '../code'))
# 允许所有的域进行跨域请求
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
# 定义路由
app.post("/api/login")(login_endpoint)
          
if __name__ == '__main__':
    uvicorn.run(app, host="主机号输入自己的主机ip地址就行", port=端口号自己输，可以是8000，可以是9000，要是占用了就换一个)

后端服务器启动

4.前后端连接

后端逻辑：

我以登录为例，我在后端写了个登录接口，我这个就简单实现了登录，关于安全性，token啥的都没搞
我的后端login相关逻辑，我没联数据库，有需要的自己加：

import os,sys
from fastapi import Request
from pydantic import BaseModel
sys.path.append(os.path.join(os.path.dirname(__file__), '../code'))
# 设置账户密码
userdb = {
        'admin' : {'password' : '666666'}
    }
class LoginData(BaseModel):
    username: str
    password: str

def process_login(login_data: LoginData):
    username = login_data.username
    password = login_data.password
    if username in userdb and userdb[username]["password"] == password:
           return {"success": True}
    else:
        return {"success": False}

async def login_endpoint(request: Request):
    login_data = await request.json()
    # 和我们定义的模型参数进行匹配
    return process_login(LoginData(**login_data))

main.py里定义了接口地址，见上面后端fastapi搭建中的main.py代码，有这么一行 app.post(“/api/login”)(login_endpoint)
到这里一个简单的后端就完成了

前端页面：

<template>
  <div class="container">
    <div class="login-form">
      <div class="title">欢迎使用xxx自动化工具!</div>
      <div class="form-container">
        <div class="form-group">
          <label>账号:</label>
          <input
            v-model="username"
            placeholder="请输入你的账号"
          />
        </div>
        <div class="form-group">
          <label>密码:</label>
          <input
            type="password"
            v-model="password"
            placeholder="请输入你的密码"
          />
        </div>
        <button class="login-button" @click="login">Login</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus'; 
import backendURL  from '../js/config';
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      const loginData = {
        username: this.username,
        password: this.password
      };
      // 假设使用axios进行HTTP请求
      axios.post("http://主机ip地址:端口号/api/login", loginData)
        .then(response => {
          // 后端返回的数据
          if (response.data.success) {
            // 登录成功跳转路由
            //this.$router.push({ path: "/Layout" });这部分可以跳转到相应的路由
            ElMessage.error("登录成功!");
          } else {
            // 登录失败
            ElMessage.error("账号或密码不正确!");
          }
        })
        .catch(error => {
          // 处理请求错误
          console.error("Login request failed:", error);
        });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background: url("../assets/login_bg1.jpg") no-repeat center center fixed;
  padding-top: calc(50vh - 220px);
}
.login-form {
  margin: 0 auto;
  height: 450px;
  width: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding-top: 50px;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
}
.title {
  font-size: 30px;
  text-align: center;
}
.form-container {
  width: 340px;
  margin: 40px 30px;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
}

.login-button:hover {
  background-color: #0056b3;
}
</style>