一、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; // 确保提取 sources
this.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 db
class 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_name
print(f"密码: {password}")
return password
else:
print("未找到对应的密码")
except Exception as e:
print(f"查询密码时出错: {str(e)}")
return None
数据模型
定义了该数据库的字段和类
数据库绑定
from flask_sqlalchemy import SQLAlchemy
db = 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）或其他路由注册到应用中。
四、小结
数据库的操作就是一层一层的抽象，各个层面完成各自的事情，然后由上层来调用。
前端如果需要一直开启页面的话，可以打包成dist然后放到apache服务器上，这个服务器他会一直开启。这样自己本机关闭了，还是能够使用前端服务。后端一般是在linux里面写的，所以服务可以一直开启。