创建一个基于 Flask 和 Vue 的全栈项目，并搭建一个登录页面的流程可以按照以下步骤来进行。以下是详细的文件结构和开发顺序： --- ### **1. 确定项目目录结构** 首先规划好项目的整体架构，推荐分离前端和后端代码以便维护。 ``` my_project/ │ ├── backend/ # Flask 后端部分 │ ├── app.py # 主入口程序 (Flask 应用) │ ├── models.py # 数据库模型定义（如果需要） │ ├── config.py # 配置文件 │ └── requirements.txt # 第三方依赖项列表 │ └── frontend/ # Vue 前端部分 ├── public/ # 存放静态资源 ├── src/ # 源码存放位置 │ ├── assets/ # 图片等资源存储 │ ├── components/ # 组件存放处 │ ├── views/ # 页面视图组件 │ └── App.vue # 根Vue实例 ├── package.json # 项目配置信息 └── vite.config.js # 构建工具配置（Vite 或 Webpack） ``` --- ### **2. 创建并初始化 Flask 后端环境** #### （1）安装必要包 通过 PyCharm 打开终端，在 `backend` 文件夹下运行命令： ```bash pip install flask pymysql sqlalchemy pip freeze > requirements.txt ``` #### （2）编写主应用文件 (`app.py`) 示例代码如下： ```python from flask import Flask, jsonify, request # 初始化 Flask 实例 app = Flask(__name__) @app.route('/login', methods=['POST']) def login(): data = request.get_json() username = data.get('username') password = data.get('password') if username == 'admin' and password == '123456': return jsonify({'message': 'Login successful'}), 200 else: return jsonify({'message': 'Invalid credentials'}), 401 if __name__ == '__main__': app.run(debug=True) ``` #### （3）启动 Flask 开发服务器 确保在终端输入 `python app.py` 可正常启动服务。 --- ### **3. 完成 Vue 前端基础设置** #### （1）生成 Vue 脚手架工程 切换到 `frontend` 目录，执行： ```bash npm init vue@latest cd my-vue-app # 这里是新建项目的默认名称，也可以手动修改名字后再操作 npm install ``` #### （2）编辑登录页面 (`src/views/LoginView.vue`) 构建基本的表单提交功能： ```vue <template> <div class="login-container"> <h2>用户登录</h2> <form @submit.prevent="handleSubmit"> <label for="username">用户名:</label><br /> <input type="text" id="username" v-model="formData.username"><br /><br /> <label for="password">密码:</label><br /> <input type="password" id="password" v-model="formData.password"><br /><br /> <button type="submit">登录</button> </form> <p>{{ message }}</p> </div> </template> <script setup> import { ref } from "vue"; import axios from "axios"; const formData = ref({ username: '', password: '' }); const message = ref(''); function handleSubmit() { const url = 'http://localhost:5000/login'; // 对应 Flask API 地址 axios.post(url, formData.value).then(response => { if (response.status === 200) { message.value = response.data.message; } }).catch(error => { console.error("错误:", error); message.value = "登录失败，请检查您的凭证!"; }); } </script> <style scoped> .login-container{ max-width: 300px; margin:auto; } input[type=text], input[type=password] { width: 100%; padding: 8px; box-sizing: border-box; } button{padding:7px;} </style> ``` #### （4）将路由指向登录页 打开 `router/index.js` 添加 `/login` 路由规则： ```javascript import LoginView from '../views/LoginView.vue' const routes = [ { path: '/login', component: LoginView }, ] export default routes ``` --- ### **4. 测试联调结果** 分别运行后端与前端的服务： - Flask 使用 `python app.py`； - Vue 利用 npm 工具如 `npm run dev`； 然后访问对应的 URL 并验证登录交互是否成功完成！ ---