登录页面前后端

一、Vue前端部署

整体结构

这是vue的项目结构
在这里插入图片描述

页面

Login_view.vue是用来写登录界面的，其中scripts部分中的methods用来发送post请求到后端服务器ip监听的8090端口下的后端路由上，axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求。
axios.post 是 axios 提供的一个方法，用于发送 POST 请求。

<template><div class="login-container"><div class="login-box"><h2>登录</h2><form @submit.prevent="handleLogin"><div class="form-group"><label for="username">用户名</label><input type="text" id="username" v-model="loginForm.username" placeholder="请输入用户名" required></div><div class="form-group"><label for="password">密码</label><input type="password" id="password" v-model="loginForm.password" placeholder="请输入密码" required></div><button type="submit" class="login-btn">登录</button></form></div></div></template><script>import axios from 'axios';export default {name: 'Login_view',data () {return {loginForm: {username: '',password: ''}}},methods: {handleLogin () {const response = axios.post('http://140.207.xxxx:8090/auth/login', {username: this.loginForm.username,password: this.loginForm.password});// 处理返回的响应数据if (response.data) {const { success, answer, sources, figure, files_name} = response.data; // 确保提取 sourcesthis.response.sources = sources || []; // 确保 sources 被赋值this.response.figure = figure || []; // 确保 figure 被赋值this.response.files_name = files_name || []; // 确保 files_name 被赋值console.log('sources:', sources, 'figure:', figure, 'files_name:', files_name);if (success) {// 添加助手的回复到聊天记录const assistantMessage = {contactText: answer || '抱歉，我没有收到有效的回复',nickName: '智能助手',timestamp: new Date().toISOString(),mineMsg: false,isReference: false,isDisplayed: true,references: this.response.sources, // 引用文件files_name: this.response.files_name, // 引用文件名references_figure: this.response.figure // 引用图表};console.log('references_figure:', this.response.figure);this.recordContent.push(assistantMessage); // 记录助手的回复} else {console.error('请求失败:', answer); // 输出失败信息}}}}}</script><style scoped>.login-container {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f5f5f5;}.login-box {width: 400px;padding: 20px;background: white;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h2 {text-align: center;color: #333;margin-bottom: 30px;}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 5px;color: #666;}input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;box-sizing: border-box;}input:focus {outline: none;border-color: #42b983;}.login-btn {width: 100%;padding: 12px;background-color: #42b983;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}.login-btn:hover {background-color: #3aa876;}</style>

路由跳转

index,js负责路由跳转，/是根目录，代开8090端口第一个页面是登录页面，然后再由后续的逻辑决定

import { createRouter, createWebHistory } from 'vue-router';
import Main from '@/views/main.vue' 
import Login_view from '@/views/Login_view.vue' const routes = [{ path: '/', component: Login_view },{ path: '/main', component: Main },
];const router = createRouter({history: createWebHistory(),routes
});export default router;

二、后端

结构

在这里插入图片描述

路由

蓝图
Flask 是一个 Python 的 Web 框架，而蓝图是 Flask 中用于组织和管理路由的工具，可以将应用拆分为多个模块，便于维护和扩展。
有了蓝图就不用把所有的路由都写在一块，逻辑上看起来清晰，而且可复用


from .knowledge_route import knowledge_bp
from .session_route import session_bp
from .chat_route import chat_bp
from .auth import auth_bp
# 可以在这里添加更多的蓝图注册逻辑
def register_routes(app):app.register_blueprint(knowledge_bp, url_prefix='/knowledge')app.register_blueprint(session_bp, url_prefix='/session')app.register_blueprint(chat_bp, url_prefix='/chat')app.register_blueprint(auth_bp, url_prefix='/auth')

监听端口和业务逻辑

/auth/login对应着监听的端口，监听前端发送过来的post或者get请求
在这里插入图片描述

def login():if request.method=='GET':return render_template('login.html')else:print("\n=== 开始处理登录请求 ===")data = request.get_json()print(f"接收到的请求数据: {data}")username = data.get('username')password = data.get('password')print(f"用户名: {username}")print(f"密码: {password}")# 根据用户名查询数据库中用户的密码db_password=AuthService.get_password_by_username(username)print(f"数据库中的密码: {db_password}")# 检查密码是否正确if not check_password_hash(db_password,password):return jsonify({"code":400,"message":"密码错误"})return jsonify({"code":200,"message":"登录成功"})

三、数据库

数据库操作方法

业务逻辑调用数据库操作方法，在这个services下面就是放的都是各个数据库的对应着业务的增删改查操作
在这里插入图片描述
主要完成根据用户名查找对应密码，这一步数据库操作是对数据模型进行操作，user，user是写在model中的数据库模型类

from app.models import  User  # 假设你有一个Knowledge模型
from app.exts import dbclass AuthService:def get_password_by_username(username):try:with db.session.begin():info = db.session.query(User).filter_by(user_name=username).first()if info:password = info.password  # 获取 original_nameprint(f"密码: {password}")return passwordelse:print("未找到对应的密码")except Exception as e:print(f"查询密码时出错: {str(e)}")return None

数据模型

在这里插入图片描述
定义了该数据库的字段和类

数据库绑定

在这里插入图片描述


from flask_sqlalchemy import SQLAlchemydb = SQLAlchemy()

db = SQLAlchemy() 是 Flask 中用于初始化 SQLAlchemy 对象的代码。SQLAlchemy 是一个强大的 Python ORM（对象关系映射）工具，用于与关系型数据库（如 MySQL、PostgreSQL、SQLite 等）进行交互。通过 SQLAlchemy，开发者可以用 Python 类和对象的方式操作数据库，而不需要直接编写 SQL 语句。
当我们在初始化的时候，把这个db和数据库进行绑定
在这里插入图片描述
启用 CORS（跨域资源共享），允许前端应用从不同的域名访问后端 API。

CORS 是 flask_cors 库提供的功能，用于解决浏览器的跨域限制。
Config 是一个配置类，通常定义在单独的模块中（如 config.py），包含数据库连接、密钥等配置项。
将 SQLAlchemy 实例 (db) 与 Flask 应用实例 (app) 绑定。
register_routes 是一个自定义函数，通常用于将蓝图（Blueprint）或其他路由注册到应用中。