在這個(gè)項(xiàng)目中，我們將結(jié)合Vue.js前端框架和python后端框架Flask，打造一個(gè)功能強(qiáng)大、易于使用的電商后臺(tái)管理系統(tǒng)
項(xiàng)目演示視頻：
Vue+Flask項(xiàng)目
目錄
前端環(huán)境（Vue.js）：
后端環(huán)境（python-Flask）：
頁面登錄效果
用戶管理
角色列表
商品列表
分類列表
商品屬性
訂單列表
數(shù)據(jù)可視化展示
前端環(huán)境（Vue.js）：
-
Node.js和npm：Vue.js項(xiàng)目通常需要Node.js環(huán)境來運(yùn)行，您可以在官網(wǎng)下載并安裝Node.js，它會(huì)自帶npm包管理器。
-
Vue CLI：使用Vue CLI可以快速搭建Vue.js項(xiàng)目和管理項(xiàng)目依賴項(xiàng)，可以通過npm全局安裝Vue CLI：
npm install -g @vue/cli. -
編輯器：推薦使用VS Code、Sublime Text等現(xiàn)代化編輯器來開發(fā)Vue.js項(xiàng)目，這些編輯器都有豐富的插件支持Vue.js開發(fā)。
-
element-plus組件
后端環(huán)境（python-Flask）：
-
Python：Flask是基于Python的輕量級(jí)Web框架，因此您需要安裝Python，并且推薦使用虛擬環(huán)境來管理項(xiàng)目的依賴項(xiàng)。
-
Flask：使用pip安裝Flask框架，可以通過以下命令進(jìn)行安裝：
pip install flask. -
數(shù)據(jù)庫：如果項(xiàng)目需要數(shù)據(jù)庫支持，您還需要安裝相應(yīng)的數(shù)據(jù)庫系統(tǒng)（如MySQL、PostgreSQL等）以及對(duì)應(yīng)的Python數(shù)據(jù)庫驅(qū)動(dòng)。
-
版本號(hào)：
python? ? ? ?3.10.5
Flask ? ? ? ? ? ? 3.0.0
Flask-Cors ? ? ? ?3.0.10
Flask-Migrate ? ? 4.0.0
Flask-RESTful ? ? 0.3.9
Flask-SQLAlchemy ?3.0.2
Jinja2 ? ? ? ? ? ?3.1.2
PyMySQL ? ? ? ? ? 1.0.2
前端登錄功能：
<template>
<!-- 寫要顯示的主體內(nèi)容 -->
<div class="main">
<div class="login">
<div class="logo">
<!-- <img src="../assets/logo1.png" alt=""> -->
<h1>后臺(tái)管理系統(tǒng)</h1>
</div>
<!-- model 是 el-form 組件的一個(gè)屬性，用于指定表單數(shù)據(jù)對(duì)象 rules用于表單驗(yàn)證 比如用戶名沒有超過多長提示用戶名長度不夠 或者不填寫密碼也彈出提示-->
<el-form :model="user" class="user_form" :rules="userRules" ref="userFormRef">
<!-- prop是用來指定表單組件的數(shù)據(jù)模型對(duì)象的屬性名 也就是說可以通過prop給定的值進(jìn)行訪問操作 當(dāng)成立條件返回到這個(gè)標(biāo)簽 -->
<el-form-item prop="name">
<!-- 定義user對(duì)象中的name屬性 placeholder表示輸入框里面的值 :prefix-icon表示圖標(biāo) 這里的User表示用戶圖標(biāo) -->
<el-input v-model="user.name" placeholder="用戶名" :prefix-icon="User" />
</el-form-item>
<!-- 密碼 show-password表示密碼框類型 輸入時(shí)候值會(huì)使用**隱藏-->
<el-form-item prop="pwd">
<el-input v-model="user.pwd" placeholder="密碼" :prefix-icon="Lock" show-password />
</el-form-item>
<!-- 登錄按鈕和重置按鈕 -->
<el-form-item class="btns">
<!-- type="primary"表示按鈕顏色 默認(rèn)為空白色 可前往https://element-plus.org/zh-CN/component/button.html 查看 -->
<el-button type="primary" @click="submitForm(userFormRef)">登錄</el-button>
<!-- 當(dāng)此按鈕被點(diǎn)擊時(shí)，會(huì)調(diào)用 resetForm 方法，并將 userFormRef 作為參數(shù)傳遞給該方法 -->
<el-button type="success" @click="resetForm(userFormRef)">清空</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<!-- setup表示vue3寫法 -->
<script setup>
// reactive 用于創(chuàng)建一個(gè)響應(yīng)式的對(duì)象，而 ref 用于創(chuàng)建一個(gè)包裝過的響應(yīng)式對(duì)象
import { reactive, ref } from 'vue'
//引入圖標(biāo) 比如輸入框的用戶圖標(biāo) 密碼框的小鎖圖標(biāo) 通過https://element-plus.org/zh-CN/component/icon.html可以進(jìn)行查看圖標(biāo)名字 引入即可 使用prefix-icon屬性即可
import { User, Lock } from '@element-plus/icons-vue'
import api from '@/api/index.js' //是導(dǎo)入了一個(gè)名為 api 的對(duì)象模塊，該模塊的路徑來自 'api文件夾下面的index.js'
import { useRouter } from 'vue-router' // 導(dǎo)入了路由對(duì)象，這個(gè)模塊是 Vue.js 官方提供的用于獲取路由對(duì)象的工具函數(shù)
// 定義表單數(shù)據(jù) 如果填寫的話 那就是輸入框內(nèi)默認(rèn)的值
const user = reactive({
name: 'admin',
pwd: '12345'
})
//定義表單驗(yàn)證規(guī)則
const userRules = reactive({
// 應(yīng)用在prop值為name的標(biāo)簽上
name: [
// required：表示字段是否為必填項(xiàng)，當(dāng)設(shè)置為true時(shí)，表示該字段必須填寫內(nèi)容才能通過驗(yàn)證。如果用戶未填寫必填字段，表單將無法提交
//message：message用于定義驗(yàn)證規(guī)則不通過時(shí)顯示的錯(cuò)誤提示信息
//trigger：表示觸發(fā)驗(yàn)證的事件類型。常見的事件類型有blur（失去焦點(diǎn)時(shí)觸發(fā)驗(yàn)證）、change（值改變時(shí)觸發(fā)驗(yàn)證）和submit（表單提交時(shí)觸發(fā)驗(yàn)證） 可前往 https://element-plus.org/zh-CN/component/form.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99 查看
{ required: true, message: '用戶名不能為空', trigger: 'blur' },
{ min: 2, max: 11, message: '長度請(qǐng)?jiān)?到10個(gè)字符', trigger: 'blur' }
],
//應(yīng)用在prop值為pwd的標(biāo)簽上
pwd: [
{ required: true, message: '密碼不能為空', trigger: 'blur' }
]
})
// ref 是一個(gè)函數(shù)，可以用來創(chuàng)建響應(yīng)式的數(shù)據(jù) userFormRef 是一個(gè)響應(yīng)式的變量，用于引用一個(gè)表單組件對(duì)象。通過將表單組件對(duì)象賦值給 userFormRef，我們可以在組件中訪問該表單組件，并對(duì)其進(jìn)行操作
const userFormRef = ref(null)
//重置表單 resetForm是el-button標(biāo)簽里面定義的方法
const resetForm = () => {
// 重置user對(duì)象里面的name和pwd值為空字符串 如果用戶點(diǎn)擊重置 用戶名和密碼輸入框都會(huì)被清空 如果不想都被清空注釋即可
user.name = '',
user.pwd = ''
}
// 創(chuàng)建路由對(duì)象 以在組件中使用各種路由相關(guān)的方法和屬性，例如執(zhí)行路由跳轉(zhuǎn)、監(jiān)聽路由變化等
const router = useRouter()
//登錄校驗(yàn)
// 定義登錄功能
const submitForm = (formRef) => {
// formRef 是一個(gè)表單組件的引用，而 validate 是該表單組件提供的方法
formRef.validate((valid) => {
if (valid) {
console.log('表單驗(yàn)證通過，可以提交!')
// 使用api驗(yàn)證 使用api對(duì)象里面的getLogin方法
api.getLogin(user).then(res => {
console.log(res)
//判斷請(qǐng)求響應(yīng)數(shù)據(jù)里面的data里面的status的值是否為200 如果是則執(zhí)行以下代碼
if (res.data.status === 200) {
// ElMessage 是 Element Plus UI 框架中的一個(gè)消息提示組件 可前往 https://element-plus.org/zh-CN/component/message.html#%E4%B8%8D%E5%90%8C%E7%8A%B6%E6%80%81 查看
ElMessage({
message: res.data.msg, //即從后端返回的消息內(nèi)容
type: 'success', //type 屬性用來設(shè)置消息的類型，這里設(shè)置為 'success'，表示成功類型的消息提示
})
//記錄登錄的token到本地會(huì)話空間 路由（routes下面的indexjs文件）可以獲取記錄的token值判斷用戶是否登錄 登陸后就可以訪問某頁面 否則強(qiáng)制跳轉(zhuǎn)登錄頁面 可以前往瀏覽器開發(fā)者工具里面的應(yīng)用-里面的本地會(huì)話空間
sessionStorage.setItem('token', res.data.token)
sessionStorage.setItem('username', user.name); //將用戶名存儲(chǔ)在cookie里面
// 跳轉(zhuǎn)到主頁
router.push('/')
//status狀態(tài)碼不為200 則執(zhí)行以下代碼
} else {
//ElMessage.error 方法來顯示一個(gè)錯(cuò)誤類型的消息提示
ElMessage.error(res.data.msg)
}
})
} else {
console.log('驗(yàn)證失敗')
return false
}
})
}
</script>
<!-- scoped表示只針對(duì)此view視圖文件生效 -->
<style scoped>
.main {
width: 100%;
height: 100%;
/* background-image: linear-gradient(to right, pink 30%, #00ffff); */
background-image: url('https://api.vvhan.com/api/bing');
/* 居中 */
display: flex;
justify-content: center;
align-items: center;
}
.login {
width: 450px;
height: 300px;
background-color: white;
/* 邊框圓角 */
border-radius: 10px;
}
.logo {
width: 200px;
/* border: 1px solid #eee; */
margin: 0 auto;
margin-top: -45px;
padding: 5px;
border-radius: 5px;
/* 圖片邊框發(fā)光 */
/* box-shadow: 0 0 10px #ddd; */
}
/* 文本標(biāo)題 */
h1 {
margin-top: 60px;
width: 100%;
height: 100%;
}
/* log作為標(biāo)題 */
img {
width: 100%;
height: 100%;
}
/* 表單 */
.user_form {
/* 內(nèi)邊距50px */
padding: 50px;
}
.btns {
display: flex;
/* 將登錄框和輸入框分為兩部分 */
justify-content: space-between;
}
.btns button {
/* 單獨(dú)分為一個(gè) */
flex: 1;
}
</style>后端登錄view視圖：
import re #用于篩選用戶輸入的手機(jī)號(hào)碼以及郵箱
#導(dǎo)入flask_shop文件夾下的user包里面的user_bp變量
from flask_shop.user import user_bp
from flask_shop import models,db #數(shù)據(jù)庫模型 也就是用戶模型
from flask import request #處理前端發(fā)送的請(qǐng)求對(duì)象
from flask_restful import Resource,reqparse #用于定義 API 資源?？梢岳^承 Resource 類，并在子類中定義不同的 HTTP 方法（如 GET、POST、PUT、DELETE 等）對(duì)應(yīng)的處理函數(shù)
from flask_shop.user import user_api #繼承bp藍(lán)圖
from flask_shop.utils.token import generate_token,verify_token #生成token和解密token
#創(chuàng)建視圖 因?yàn)槭鞘褂盟{(lán)圖創(chuàng)建的視圖 這里就是user的根視圖 當(dāng)用戶訪問ttp://127.0.0.1:5000/user/ 則由index函數(shù)處理
@user_bp.route('/')
def index():
return 'hello user!'
#登錄視圖 當(dāng)我使用user_bp創(chuàng)建視圖意味著該藍(lán)圖下的所有路由路徑都會(huì)添加前綴/user 要訪問這個(gè)接口所以是http://127.0.0.1:5000/user/login/
@user_bp.route('/login/',methods=['POST'])
def login():
#獲取用戶傳遞過來的用戶名
name=request.get_json().get('name')
#獲取密碼
pwd=request.get_json().get('pwd')
#判斷傳遞是否完整
if not all([name,pwd]): #all接受兩個(gè)值 查看是否為空 當(dāng)有一個(gè)為flase他的結(jié)果就為flase
return {'status': 400, 'msg': '參數(shù)不完整'}
else:
#通過用戶名獲取用戶對(duì)象
user = models.User.query.filter_by(name = name).first()
#user = models.User.query.filter(name == name).first() 有bug 不管用戶輸入什么用戶名 只要密碼正確 都可以登錄成功
#判斷用戶是否存在
if user:
#判斷密碼是否正確
if user.check_password(pwd):
#生成token
token=generate_token({'id':user.id})
return {'status': 200, 'msg': '登錄成功！','token':token,'username': user.name}
#這里也可以寫個(gè)else
#用戶不存在返回用戶名或密碼錯(cuò)誤！
return {'status': 400, 'msg': '用戶名或密碼錯(cuò)誤！'}
頁面登錄效果
密碼錯(cuò)誤：
密碼正確，則會(huì)顯示登錄成功，生成token值，并存儲(chǔ)在會(huì)話空間：
用戶管理
包括用戶的增刪改查
角色列表
包括權(quán)限列表? 比如不同的用戶有對(duì)應(yīng)的管理員權(quán)限 比如管理員1有用戶管理和數(shù)據(jù)統(tǒng)計(jì)權(quán)限 管理員2有所有權(quán)限 這個(gè)權(quán)限指的是顯示對(duì)應(yīng)的菜單
商品列表
包括商品的增刪改查
分類列表
包括添加分類
商品屬性
包括添加屬性功能
訂單列表
包括訂單的搜索、訂單物流的查看等
文章來源：http://www.zghlxwxcb.cn/news/detail-859852.html
數(shù)據(jù)可視化展示
文章來源地址http://www.zghlxwxcb.cn/news/detail-859852.html
到了這里，關(guān)于Vue+Flask電商后臺(tái)管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
