（古龙风·全代码带注释可复制）

江湖路远，代码为刃。

前端有Vue3、Element Plus、Axios三柄利剑，后端有Flask、SQLite两把寒刀。

新手入江湖，最忌繁招重式。今日便以极简刀法，教你十分钟练就“前后端登录”绝技，代码可抄，注释明了，覆纸即练。

第一章 备器·江湖入门先置械

入江湖，必先置械。手无寸铁，纵有通天心法，亦难成招。

终端一开，光标映月，如刀光寒彻。先铸后端之刀，再炼前端之剑，招式有序，不可乱序。

后端之刀，需先备坯，敲一行命令，一键成型，可直接复制：

pip install flask flask-cors sqlite3# 注释：安装后端核心依赖，Flask为刀身（后端框架），flask-cors为刀鞘（解决跨域），sqlite3为刀锋（轻量数据库）

前端之剑，需配剑穗，终端敲下命令，配齐刃具，可直接复制：

npm create vue@latest vue-login-frontend# 注释：创建Vue3项目，项目名vue-login-frontend，后续按提示回车（默认选项即可）cd vue-login-frontend# 注释：进入前端项目文件夹npm install element-plus axios# 注释：安装前端核心组件，Element Plus为剑格（UI组件），Axios为剑穗（发送请求）

第二章 铸刀·后端Flask立根基

后端为刀，刀要快，要稳，要藏得住锋芒。

建一文件夹，名唤`flask-login-backend`，如藏刀之鞘。鞘中藏两物：`app.py`为刀身，`user.db`为刀镡（自动生成）。

`app.py`刀身，刻上心法（代码+注释），可直接复制填入：

from flask import Flask, request, jsonify# 注释：引入Flask核心模块，request接收前端请求，jsonify返回结果给前端from flask_cors import CORS# 注释：引入CORS，解决前后端跨域问题（刀鞘，护刀不卡壳）import sqlite3# 注释：引入sqlite3，轻量数据库，无需额外配置，自动生成# 初始化Flask应用（铸刀成型）app = Flask(__name__)# 开启CORS跨域，允许所有前端请求（打开刀鞘，让前端剑能刺到后端刀）CORS(app)# 初始化数据库，创建用户表（铸刀镡，存储账号密码）def init_db():    # 连接数据库（无则自动创建user.db文件）    conn = sqlite3.connect('user.db')    # 创建游标，操作数据库（持刀之手）    cursor = conn.cursor()    # 创建用户表，id自增，账号唯一，密码必填（刻刀纹，规范数据）    cursor.execute('''        CREATE TABLE IF NOT EXISTS user (            id INTEGER PRIMARY KEY AUTOINCREMENT,            username TEXT UNIQUE NOT NULL,  # 账号唯一，不可重复            password TEXT NOT NULL         # 密码必填，不可为空        )    ''')    # 插入测试账号（预设剑招暗号，方便新手测试）    try:        cursor.execute("INSERT INTO user (username, password) VALUES ('test', '123456')")    except:        pass  # 若测试账号已存在，跳过插入，避免报错    # 提交操作，保存数据库更改（收刀入鞘，稳固刀镡）    conn.commit()    # 关闭数据库连接（刀归鞘）    conn.close()# 登录接口（刀心，接收前端剑招，验证真伪）@app.route('/api/login', methods=['POST'])def login():    # 接收前端传来的账号密码（接剑招）    data = request.get_json()    # 提取账号密码，赋值给变量（辨剑招暗号）    username = data.get('username')    password = data.get('password')    # 连接数据库，验证账号密码（出刀验招）    conn = sqlite3.connect('user.db')    cursor = conn.cursor()    # 查找账号对应的密码，精准验证（刀刺要害）    cursor.execute("SELECT password FROM user WHERE username = ?", (username,))    # 获取查询结果，无结果则为None（剑招偏失）    result = cursor.fetchone()    # 关闭数据库连接（刀回鞘）    conn.close()    # 验证结果，返回对应信息（刀意回应剑招）    if result and result[0] == password:        return jsonify({"code": 200, "msg": "登录成功，刀入鞘", "success": True})    else:        return jsonify({"code": 400, "msg": "账号或密码有误，剑招偏了", "success": False})# 启动后端服务（拔刀出鞘，静待前端剑招）if __name__ == '__main__':    init_db()  # 启动时初始化数据库，铸好刀镡    # 启动服务，端口5000，debug模式（修改代码自动重启，方便练招）    app.run(debug=True, port=5000)    

终端敲下以下命令，拔刀出鞘（启动后端），可直接复制：

cd flask-login-backend# 注释：进入后端项目文件夹python app.py# 注释：启动后端服务，屏幕显“Running on http://127.0.0.1:5000”即为成功

第三章 铸剑·前端Vue亮锋芒

前端为剑，剑要利，要捷，要直刺刀心。

打开前端项目`vue-login-frontend`，炼两柄剑脊：`src/main.js`（剑脊）、`src/App.vue`（剑刃），代码带注释，可直接复制。

第一柄剑脊·src/main.js（引剑入鞘，配置全局）

import { createApp } from 'vue'// 注释：引入Vue3核心函数，创建前端应用（铸剑坯）import App from './App.vue'// 注释：引入根组件App，作为剑刃主体import ElementPlus from 'element-plus'// 注释：引入Element Plus，UI组件（剑格，美观易用）import 'element-plus/dist/index.css'// 注释：引入Element Plus样式，让剑格更规整import axios from 'axios'// 注释：引入Axios，发送请求（剑穗，连接前端与后端）// 创建Vue应用（剑成型）const app = createApp(App)// 全局注册Element Plus（给剑装剑格）app.use(ElementPlus)// 全局挂载Axios（给剑缠剑穗）app.config.globalProperties.$axios = axios// 配置Axios基础路径，指向后端刀路（确保剑能刺到刀）axios.defaults.baseURL = 'http://127.0.0.1:5000'// 挂载应用，启动前端（剑出鞘）app.mount('#app')    

第二柄剑刃·src/App.vue（刻剑招，实现登录界面）

[xss_clean]// 引入Vue3 ref函数，绑定表单数据（握剑之手）import { ref } from 'vue'// 引入Element Plus提示组件，反馈登录结果（剑招回应）import { ElMessage } from 'element-plus'// 引入全局挂载的Axios，发送请求（剑穗传力）// 绑定登录表单数据，初始为空（剑招初始状态）const loginForm = ref({  username: '',  // 账号字段，与后端刀镡字段对应  password: ''   // 密码字段，与后端刀镡字段对应})// 表单ref，用于表单验证（可选，规范剑招）const loginFormRef = ref(null)// 登录核心函数（出剑招式）const handleLogin = async () => {  try {    // 发送POST请求，向后端刀心传递账号密码（剑刺刀心）    const res = await $axios.post('/api/login', loginForm.value)    // 判断后端刀意回应，提示登录结果（剑招反馈）    if (res.data.success) {      ElMessage.success(res.data.msg)    } else {      ElMessage.error(res.data.msg)    }  } catch (error) {    // 捕获异常，提示网络问题（剑刺空，刀未启）    ElMessage.error('网络异常，后端刀未启')  }}[xss_clean]    

终端敲下以下命令，剑出鞘（启动前端），可直接复制：

cd vue-login-frontend# 注释：进入前端项目文件夹npm run dev# 注释：启动前端服务，屏幕显地址（通常为http://127.0.0.1:5173）即为成功

第四章 对决·剑刀相击定成败

剑已亮，刀已出。

浏览器打开前端地址，账号填`test`，密码填`123456`——这是预设的剑招暗号。

点击“登录”，剑刺而出，后端刀接招，验明暗号，回传“登录成功，刀入鞘”，便是一招功成。

若填错暗号，刀便回传“账号或密码有误，剑招偏了”，需重出剑。

若后端刀未启，剑刺空，便显“网络异常，后端刀未启”——此乃新手最易踩的坑。

第五章 避坑·江湖新手须知

江湖路险，坑多刃利。新手三记，记牢便少走弯路：

一、先后后剑：必先启动后端（拔刀），再启动前端（出剑）。刀未启，剑无用。

二、刀鞘必带：后端`CORS(app)`不可少，否则剑刺不进刀，报跨域之错。

三、暗号记牢：测试账号`test`，密码`123456`，错则剑招偏失。

四、明文为计：本教程为练招，密码明文存储，江湖高阶玩法需加密（如bcrypt），防人暗算。

尾声

江湖无尽，招式无穷。

此式“前后端登录”，虽简，却是新手入江湖的第一招。

剑已在手，刀已在腰，代码可抄，覆纸即练。练熟此招，再探表单验证、密码加密、路由跳转之术，便多一分底气。

江湖路远，愿你以代码为刃，一刀一式，渐成高手。