vue3+flask+sqlite前后端項目實戰

基礎環境安裝

pycharm

下載地址：
https://www.jetbrains.com/zh-cn/pycharm/download/?section=windows

在這里插入圖片描述

vscode

下載地址
https://code.visualstudio.com/docs/?dv=win64user

python

下載地址
https://www.python.org/downloads/windows/

在這里插入圖片描述

Node.js（含npm）

下載地址
https://nodejs.org (推薦LTS版本)

在這里插入圖片描述

后端項目

在這里插入圖片描述

項目結構

api/
├── models/
│   ├── __init__.py
│   └── user_model.py
├── dao/
│   ├── __init__.py
│   └── user_dao.py
├── instance/
│   └── app.db
├── routes/
│   ├── __init__.py
│   └── user_route.py
├── utils/
│   ├── __init__.py
│   └── sqlite3_util.py
├── config.py
├── run.py
└── requirements.txt

requirements.txt

blinker1.8.2
click8.1.8
colorama0.4.6
Flask3.0.0
Flask-Cors5.0.0
Flask-SQLAlchemy3.1.1
greenlet3.1.1
importlib_metadata8.5.0
itsdangerous2.2.0
Jinja23.1.6
MarkupSafe2.1.5
SQLAlchemy2.0.40
typing_extensions4.13.2
Werkzeug3.0.1
zipp==3.20.2

①生成 requirements.txt
pip freeze > requirements.txt
②基于 requirements.txt 安裝
pip install -r requirements.txt

daos/user_dao.py

import sqlite3
from werkzeug.security import generate_password_hashclass UserDAO:@staticmethoddef get_connection():return sqlite3.connect('instance/app.db')@staticmethoddef get_all_users():conn = UserDAO.get_connection()cursor = conn.cursor()cursor.execute("SELECT id, username FROM users")users = cursor.fetchall()conn.close()return [{'id': row[0], 'username': row[1]} for row in users]@staticmethoddef create_user(username, password):conn = UserDAO.get_connection()cursor = conn.cursor()cursor.execute("SELECT id FROM users WHERE username = ?", (username,))if cursor.fetchone():conn.close()return Nonepassword_hash = generate_password_hash(password)cursor.execute("INSERT INTO users (username, password_hash) VALUES (?, ?)", (username, password_hash))conn.commit()conn.close()return {'username': username}@staticmethoddef delete_user(user_id):conn = UserDAO.get_connection()cursor = conn.cursor()cursor.execute("DELETE FROM users WHERE id = ?", (user_id,))conn.commit()success = cursor.rowcount > 0conn.close()return success

models/user_model.py

import sqlite3def init_db():conn = sqlite3.connect('instance/app.db')cursor = conn.cursor()cursor.execute('''CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT,username TEXT UNIQUE NOT NULL,password_hash TEXT NOT NULL)''')conn.commit()conn.close()

routes/user_route.py

from flask import Blueprint, request, jsonify
from api.daos.user_dao import UserDAObp = Blueprint('user', __name__)@bp.route('/users', methods=['GET'])
def get_users():users = UserDAO.get_all_users()return jsonify(users)@bp.route('/register', methods=['POST'])
def register():data = request.jsonusername = data.get('username')password = data.get('password')user = UserDAO.create_user(username, password)if user:return jsonify(user), 201else:return jsonify({'error': 'User already exists'}), 409@bp.route('/users/<int:user_id>', methods=['DELETE'])
def delete_user(user_id):success = UserDAO.delete_user(user_id)if success:return jsonify({'message': 'User deleted successfully'}), 200else:return jsonify({'error': 'User not found'}), 404

utils/sqlite3_util.py

import sqlite3def init_db():conn = sqlite3.connect('instance/app.db')cursor = conn.cursor()cursor.execute('''CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT,username TEXT UNIQUE NOT NULL,password_hash TEXT NOT NULL)''')conn.commit()conn.close()

run.py

from flask import Flask
from flask_cors import CORS
from routes.user_route import bp as user_bp
from utils.sqlite3_util import init_dbapp = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})app.config.from_object('config.Config')app.register_blueprint(user_bp, url_prefix='/api')if __name__ == '__main__':init_db()app.run(debug=True, host='0.0.0.0')

啟動

python app.py // 或者直接右鍵該文件運行

在這里插入圖片描述

前端項目

新建vue項目

npm create vue@latest
uicd ui
npm installnpm install vue-router@4 axios element-plus @element-plus/icons-vue

在這里插入圖片描述

pycharm打開效果

在這里插入圖片描述

修改 src/assets/main.css

/* 導入基礎樣式文件 */
@import './base.css';/** 主應用容器樣式* 作用：包裹整個Vue應用的根容器*/
#app {margin: 0 auto;                   /* 水平居中 */padding: 2rem;                    /* 內邊距（會被下方規則覆蓋） */font-weight: normal;              /* 繼承基礎樣式字體粗細 */display: block !important;        /* 強制覆蓋可能的grid布局，使用塊級布局 */width: 100%;                      /* 撐滿可用寬度 */grid-template-columns: 1fr 1fr;   /* 網格列定義（實際被block覆蓋無效） */padding: 0 2rem;                  /* 重定義左右內邊距（覆蓋上方padding） */
}/** 鏈接及特殊文本樣式* 作用：統一超鏈接和.green類元素的視覺效果*/
a,
.green {text-decoration: none;            /* 去除下劃線 */color: hsla(160, 100%, 37%, 1);   /* Vue品牌綠色 (HSL格式) */transition: 0.4s;                 /* 顏色過渡動畫時長 */padding: 3px;                     /* 內邊距增強可點擊區域 */
}/** 懸停效果媒體查詢* 作用：只在支持hover的設備上應用懸停效果*/
@media (hover: hover) {a:hover {background-color: hsla(160, 100%, 37%, 0.2);  /* 半透明綠色背景 */}
}

修改 src/main.js

/** 樣式資源導入* 作用：引入全局基礎樣式文件*/
import './assets/main.css';/** Vue核心依賴導入* 作用：引入Vue框架核心功能*/
import { createApp } from 'vue';      // 引入應用構造器/** 應用組件導入* 作用：引入根組件作為應用入口*/
import App from './App.vue';          // 主應用組件/** 路由配置導入* 作用：引入路由管理系統*/
import router from './router';        // 路由實例/** UI組件庫導入* 作用：引入Element Plus及其樣式*/
import ElementPlus from 'element-plus';         // UI庫核心
import 'element-plus/dist/index.css';           // UI庫樣式/** 應用初始化* 作用：創建并配置Vue應用實例*/
const app = createApp(App);           // 創建應用實例/** 插件注冊* 作用：集成路由功能*/
app.use(router);                      // 安裝路由插件/** UI庫注冊* 作用：集成Element Plus組件庫*/
app.use(ElementPlus);                 // 安裝UI組件庫/** 應用掛載* 作用：將應用渲染到DOM*/
app.mount('#app');                    // 掛載到DOM節點

修改 src/App.vue

清空默認內容，改為空白模板

<template><!--* 路由視圖容器* 作用：渲染當前路由匹配的組件* 技術：Vue Router 核心組件--><router-view />
</template><script>
export default {/** 組件標識* 作用：用于開發者工具調試和遞歸組件引用* 命名規范：通常使用帕斯卡命名法（PascalCase）*/name: 'App'
};
</script><style>
/** 全局基礎樣式* 作用：影響整個應用的默認樣式重置*//** 主體樣式重置* 作用：清除瀏覽器默認樣式，設置基準字體*/
body {margin: 0;                  /* 清除默認外邊距 */font-family: Arial,         /* 首選字體 */sans-serif;               /* 通用字體族后備 */
}
</style>

src/views/Dashboard.vue

<template><div class="dashboard-container"><!-- 頂部導航菜單 --><el-menumode="horizontal":default-active="activeMenu":collapse="isCollapsed"class="el-menu-horizontal-demo"@select="handleMenuSelect"background-color="#ffffff"text-color="#606266"active-text-color="#409EFF"><!-- 1. 三維數據平臺 --><el-sub-menu index="1"><template #title><i class="el-icon-location"></i><span v-show="!isCollapsed">三維數據平臺</span></template><el-menu-item index="1-1" @click="goToModelRelease"><i class="el-icon-monitor"></i><span>模型發布對比</span></el-menu-item><el-menu-item index="1-2" @click="goToParseInfo"><i class="el-icon-connection"></i><span>獲取解析異常信息</span></el-menu-item></el-sub-menu><!-- 2. 測試管理 --><el-sub-menu index="2"><template #title><i class="el-icon-cpu"></i><span v-show="!isCollapsed">測試管理</span></template><el-menu-item index="2-1" @click="goToTestFlow"><i class="el-icon-guide"></i><span>測試流程</span></el-menu-item><el-menu-item index="2-2" @click="goToTaskReminder"><i class="el-icon-guide"></i><span>任務提醒</span></el-menu-item></el-sub-menu><!-- 3. 工具集 --><el-sub-menu index="3"><template #title><i class="el-icon-s-tools"></i><span v-show="!isCollapsed">實用工具</span></template><el-menu-item index="3-1" @click="goToJsonFormat"><i class="el-icon-document"></i><span>JSON格式化</span></el-menu-item><el-menu-item index="3-2" @click="goToKafkaManager"><i class="el-icon-document"></i><span>Kafka連接測試</span></el-menu-item></el-sub-menu><!-- 4. 學生管理 --><el-sub-menu index="4"><template #title><i class="el-icon-user"></i><span v-show="!isCollapsed">學生管理</span></template><el-menu-item index="4-1" @click="goToStudentList"><i class="el-icon-user-solid"></i><span>學生列表</span></el-menu-item><el-menu-item index="4-2" @click="goToStudentStats"><i class="el-icon-data-analysis"></i><span>學生統計</span></el-menu-item></el-sub-menu><!-- 5. 新增的系統管理菜單 --><el-sub-menu index="5"><template #title><i class="el-icon-setting"></i><span v-show="!isCollapsed">系統管理</span></template><el-menu-item index="5-1" @click="goToUserManage"><i class="el-icon-user"></i><span>用戶管理</span></el-menu-item><el-menu-item index="5-2" @click="goToRoleManage"><i class="el-icon-s-custom"></i><span>角色管理</span></el-menu-item><el-menu-item index="5-3" @click="goToSystemLog"><i class="el-icon-document"></i><span>系統日志</span></el-menu-item><el-menu-item index="5-4" @click="goToSystemConfig"><i class="el-icon-operation"></i><span>系統配置</span></el-menu-item></el-sub-menu></el-menu><!-- 主內容區域 --><div class="content"><el-card class="welcome-card"><h1>{{ welcomeTitle }}</h1><p>{{ welcomeMessage }}</p><!-- 快捷訪問區域 --><div v-if="showQuickAccess" class="quick-access"><h3>常用功能</h3><el-space wrap><el-tagv-for="(action, index) in quickActions":key="index"type="info"effect="plain"class="quick-tag"@click="action.handler"><i :class="action.icon"></i>{{ action.label }}</el-tag></el-space></div></el-card></div></div>
</template><script>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'export default {setup() {const router = useRouter()// 響應式狀態const activeMenu = ref('1-1')const isCollapsed = ref(false)const showQuickAccess = ref(true)const welcomeTitle = ref('歡迎使用管理系統')const welcomeMessage = ref('請從上方菜單選擇您需要的功能')// 路由跳轉方法const goToModelRelease = () => router.push('/model_release')const goToParseInfo = () => router.push('/parse_info')const goToTestFlow = () => router.push('/TestFlow')const goToTaskReminder = () => router.push('/task_reminder')const goToStudentList = () => router.push('/StudentList')const goToStudentStats = () => router.push('/StudentStats')const goToDbCompare = () => router.push('/dbcompare')const goToJsonFormat = () => router.push('/json_format')const goToKafkaManager = () => router.push('/kafka_manager')// 新增的系統管理路由方法const goToUserManage = () => router.push('/user-manage')const goToRoleManage = () => router.push('/role-manage')const goToSystemLog = () => router.push('/system-log')const goToSystemConfig = () => router.push('/system-config')// 快捷操作列表（包含新增的系統管理快捷方式）const quickActions = computed(() => [{ icon: 'el-icon-monitor', label: '模型發布數據對比', handler: goToModelRelease },{ icon: 'el-icon-user-solid', label: '測試流程', handler: goToTestFlow },{ icon: 'el-icon-document', label: '待辦任務', handler: goToTaskReminder },{ icon: 'el-icon-setting', label: 'Json格式化', handler: goToJsonFormat }])// 響應式處理屏幕尺寸變化const checkScreen = () => {isCollapsed.value = window.innerWidth < 768showQuickAccess.value = window.innerWidth > 576}// 菜單選擇處理const handleMenuSelect = (index) => {activeMenu.value = index}// 生命周期鉤子onMounted(() => {window.addEventListener('resize', checkScreen)checkScreen() // 初始化檢查})onUnmounted(() => {window.removeEventListener('resize', checkScreen)})return {activeMenu,isCollapsed,showQuickAccess,welcomeTitle,welcomeMessage,quickActions,handleMenuSelect,// 三維數據平臺goToModelRelease,goToParseInfo,// 測試管理goToTestFlow,goToTaskReminder,// 實用工具goToJsonFormat,goToKafkaManager,// 學生管理goToStudentList,goToStudentStats,goToDbCompare,// 系統管理goToUserManage,goToRoleManage,goToSystemLog,goToSystemConfig}}
}
</script><style scoped>
/* 主容器樣式 */
.dashboard-container {padding: 10px;
}/* 導航菜單樣式 */
.el-menu-horizontal-demo {height: 36px;line-height: 36px;border-bottom: 1px solid #e6e6e6;margin-bottom: 20px;
}.el-menu-item.is-active {background-color: var(--el-color-primary-light-9) !important;border-bottom: 2px solid var(--el-color-primary) !important;
}/* 內容區域布局 */
.content {padding: 20px;display: flex;justify-content: center;min-height: calc(100vh - 160px);
}/* 歡迎卡片樣式 */
.welcome-card {width: 100%;max-width: 800px;text-align: center;padding: 40px;border-radius: 8px;
}/* 快捷訪問區域 */
.quick-access {margin-top: 30px;padding-top: 20px;border-top: 1px dashed #eee;
}.quick-tag {cursor: pointer;padding: 0 15px;height: 32px;line-height: 32px;transition: all 0.3s;
}.quick-tag:hover {color: #409EFF;border-color: #409EFF;transform: translateY(-2px);
}/* 響應式設計 */
@media (max-width: 768px) {.el-menu-item,.el-submenu__title {padding: 0 12px !important;}.welcome-card {padding: 20px;}
}@media (max-width: 576px) {.dashboard-container {padding: 10px;}.content {min-height: calc(100vh - 120px);}
}
</style>

src/views/User.vue

<template><div><h1>用戶注冊</h1><el-form @submit.prevent="handleSubmit" inline><el-form-item><el-input v-model="username" placeholder="用戶名"></el-input></el-form-item><el-form-item><el-input v-model="password" type="password" placeholder="密碼"></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleSubmit">注冊</el-button></el-form-item></el-form><h2>已注冊用戶</h2><el-table :data="users" style="width: 100%"><el-table-column prop="id" label="ID" width="50"></el-table-column><el-table-column prop="username" label="用戶名" width="180"></el-table-column><el-table-column label="操作" width="120"><template #default="scope"><el-button type="text" @click="handleDelete(scope.row.id)">刪除</el-button></template></el-table-column></el-table></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import 'element-plus/dist/index.css'const username = ref('')
const password = ref('')
const users = ref([])const fetchUsers = async () => {const response = await axios.get('http://192.168.1.138:5000/api/users')users.value = response.data
}const handleSubmit = async () => {await axios.post('http://192.168.1.138:5000/api/register', {username: username.value,password: password.value})username.value = ''password.value = ''await fetchUsers()
}const handleDelete = async (id) => {await axios.delete(`http://192.168.1.138:5000/api/users/${id}`)await fetchUsers()
}onMounted(() => {fetchUsers()
})
</script>

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '../views/Dashboard.vue'
import User from '../views/User.vue'const routes = [{ path: '/', redirect: '/Dashboard' }, // 默認重定向{ path: '/dashboard', component: Dashboard },{ path: '/user', component: User },// 其他路由...
];const router = createRouter({history: createWebHistory(),routes,
});export default router;