vue.js微商城后臺管理系統

一.需要運行的效果

20240701-231456

二.代碼（解析）

首先，為項目添加依賴：

?yarn add element-plus --save

?yarn vue-router@4 --save

新建一個項目包，然后命名為商品管理，在components中新建幾個vue文件。

新建一個文件包命名為public,將所需要的圖片素材放入其中：

（1）我的“登錄”界面

登錄項目的驗證：

a) 用戶名和密碼是必須輸入項目。

b) 用戶名和密碼的檢查：用戶名： '用戶名長度為 3~12 個字符'

密碼： '密碼長度為 6~24 個字符'

登錄按鈕的功能的實現：

點擊【登錄】按鈕，跳轉到后臺管理系統的首頁點擊【重置】按鈕，清空用戶名和密碼的輸入內容

使用導航守衛實現登錄頁面的功能：

訪問后臺主頁時，需要用戶處于登錄狀態，如果沒有登錄就跳轉到登錄頁面。用戶在登錄頁面進行登錄操作，若登錄成功，則跳轉到后臺主頁；若登錄失敗，則返回登錄頁面。

效果：

Dl.vue代碼如下：

<template><el-card class="zon"><!-- el-card白框 --><div class="wei"><h2>"微商城"后臺管理系統</h2><hr size="1px" color="gainsboro"/></div><el-form :model="form" class="yh" :rules="rules" ref="formRef"><el-form-item label="用戶名:" prop="loginName"><el-input v-model="form.loginName" placeholder="請輸入用戶名" style="width: 500px; height: 40px;"/></el-form-item><el-form-item label="密&nbsp;&nbsp;&nbsp;碼:" prop="pass"><el-input show-password v-model="form.pass" placeholder="請輸入密碼"  style="width: 500px; height: 40px;"/></el-form-item><el-form-item class="deng"><el-button type="primary" @click="gologin" style="width: 100px;">登錄</el-button><el-button type="info" class="cz" @click="reset" style="width: 100px;">重置</el-button></el-form-item></el-form></el-card>
</template><script setup>import {reactive,ref} from 'vue';const form = reactive({loginName: '',pass: ''})const formRef = ref(null)import {useRouter} from 'vue-router'import {ElMessage} from 'element-plus';const router = useRouter()const rules = {loginName: [{required: true,message: '請輸入用戶名',trigger: 'blur'}, {min: 3,max: 12,message: "用戶名長度為 3~12 個字符",trigger: "blur"}],pass: [{required: true,message: "請輸入密碼",trigger: "blur"}, {min: 2,max: 24,message: "密碼長度為 6~24 個字符",trigger: "blur"}],}const gologin = () => {if (form.loginName === '蘇冷大大' && form.pass === '123456') {router.push('/Dh')ElMessage.success('提交成功')return localStorage.setItem('token', 'Bearer xxx');} else {ElMessage.error('用戶名或密碼錯誤!')localStorage.removeItem('token')return false;}}const reset = () => {formRef.value.resetFields();};
</script>
<style scoped>.zon{margin-left: 260px;width: 900px;height: 400px;}.wei h2 {text-align: center;color: darkred;size: 28px;}.yh{position: absolute;left: 450px;top: 150px;}.deng{position: absolute;top: 150px;left: 90px;}</style>

（2）我的“導航”模塊

登錄首頁分為頭部和主體區域，如圖 2-1 所示

頭部區域：

a) 頭部區域分別是導航欄標題和用戶信息

b）點擊【退出】按鈕，跳轉到登錄頁面

主體區域：

a) 主體區域分別是左側導航欄和右側內容區域

效果：

Dh.vue代碼：

<template><el-menu :default-active="activeIndex" mode="vertical" class="hehe" style="width: 200px;height: 700px;"><el-menu-item index="1"><router-link to="/Dh/Sy"><el-icon ><HomeFilled/></el-icon>首頁</router-link></el-menu-item><el-menu-item index="2"><router-link to="/Dh/Xz"><el-icon ><List/></el-icon>新增分類</router-link></el-menu-item><el-menu-item index="3"><router-link to="/Dh/Fl"><el-icon ><Briefcase/></el-icon>分類管理</router-link></el-menu-item><el-menu-item index="4"><router-link to="/Dh/Sp"><el-icon ><GoodsFilled/></el-icon>商品管理</router-link></el-menu-item><el-menu-item index="5"><router-link to="/Dh/Zh"><el-icon ><UserFilled/></el-icon>個人中心</router-link></el-menu-item></el-menu>
</template><script setup>
</script><style scoped>a:link,a:visited {color: #000;text-decoration: none;}a:hover {color: darkred;}</style>

Al.vue代碼：

<template><el-container><el-header class="header">“微商城”后臺管理系統<el-button type="primary" @click="goback" class="goback">退出</el-button></el-header><el-container><el-aside width="200px"><Dh/></el-aside><el-main><router-view class="view"></router-view></el-main></el-container></el-container></template><script setup>import {useRouter} from 'vue-router'import Dh from './Dh.vue'const router = useRouter()const goback = () => {localStorage.removeItem('token')// 使用localStorage.removeItem()方法刪除token這個鍵名所對應的值router.push('/Dl')}
</script><style scoped>.el-header {background-color: #B3C0D1;color: #333;}.el-aside {background-color: #fff;color: #333;}.el-main {background-color: #E9EEF3;color: #333;}.header {height: 60px;width: 1400px;padding-top: 20px;padding-left: -10px;font-size: 19px;font-weight: bold;font-family: "楷體";color: #fff;background-color: darkred;}.goback {position: absolute;left: 240px;top: 25px;font-family: "楷體";} 
</style>

?（3）我的“新增分類”模塊

新增分類頁面頁面中是新增分類的頁面，頁面中包含分類名稱、分類級別（一級分類和二級分類）、產品大類、供貨方式、備注信息和及時生效等項目。頁面中有提交按鈕和重置按鈕。

效果：

Xz.vue代碼如下：
?

<template><div class="di"><h3 style="text-align: center;">新增分類</h3><el-form :model="categoryForm" :rules="rules" label-width="100px"><!-- :model用于保存表單的數據對象,:rules用于對表單數據對象的校驗,ref指定表單對象名稱 --><el-form-item label="分類名稱" prop="name"><el-input v-model="categoryForm.name"></el-input></el-form-item><el-form-item label="分類級別" prop="name"><el-select v-model="categoryForm.level" placeholder="請選擇分類級別"><el-option label="一級分類" value="一級"></el-option><!-- el-option下拉綁定 --><el-option label="二級分類" value="二級"></el-option></el-select></el-form-item><el-form-item label="產品大類" prop="name"><el-checkbox>潮流服飾</el-checkbox><el-checkbox>食品</el-checkbox><el-checkbox>珠寶配飾</el-checkbox><el-checkbox>日用百貨</el-checkbox></el-form-item><el-form-item @click="useRouter" label="供貨方式" prop="name"><el-radio-group v-model="categoryForm.remark"><el-radio label="線上供貨" ></el-radio><el-radio label="線下供貨"></el-radio></el-radio-group></el-form-item><el-form-item label="備注信息" prop="prow"><el-input v-model="categoryForm.remark"></el-input></el-form-item><el-form-item label="及時生效"><el-switch v-model="value1" :active-icon="Check" :inactive-icon="Close"/><!-- el-switch開關 --></el-form-item><el-form-item><el-button type="primary" @click="handleSubmit">提交</el-button><el-button @click="info">重置</el-button></el-form-item></el-form></div>
</template><script setup>import {ref} from 'vue';import {useRouter} from 'vue-router'const value1 = ref(true)// 使用 ref 創建響應式數據const categoryForm = ref({name: '',level: '',category: '',supply: '',remark: ''});const handleSubmit = () => {router.push('/Fl');}// 重置表單數據const info = () => {categoryForm.value = {name: '',level: '',category: '',supply: '',remark: ''};};const router = useRouter()const rules = {name: [{required: true,message: '請輸入分類名稱',trigger: 'blur'}],prow: [{required: true,message: '請輸入備注信息',trigger: 'blur'}],}
</script><style scoped></style>

（4）我的“分類管理”頁面

a) 頁面采用表單布局的方式，頁面中展示關于分類的相關信息，包含分類名稱、分類級別（一級分類和二級分類）、產品大類、供貨方式、備注信息等項目。

b) 單擊頁面中的【新增分類】按鈕，可以新增分類信息，跳轉到新增分類頁面。?

效果：

Fl.vue代碼如下：

<template><div><div class="ya"><el-button type="primary" @click="fenlei" class="oo">新增分類</el-button></div><div class="ti"><el-table :data="categories"  stripe border style="width: 100%"><el-table-column  label="分類名稱"></el-table-column><el-table-column  label="分類級別"></el-table-column><el-table-column label="產品大類"></el-table-column><el-table-column label="供貨方式"></el-table-column><el-table-column label="備注信息"></el-table-column></el-table></div></div></template><script setup>
import {ref} from 'vue';import {useRouter} from 'vue-router';const router = useRouter();
const fenlei = () => {router.push('/dh/xz');}
</script><style scoped>.oo{margin-left: 500px;}.ti{margin-top: 20px;}</style>

?（5）我的“商品管理”界面

商品管理頁面中展示關于商品的相關信息，包含商品編號、商品名稱、商品價格、商品分類、商品庫存、商品簡介和商品圖片等項目。

單擊“后退”按鈕，跳轉到后臺管理系統首頁頁面。

點擊“詳情”按鈕，跳轉到商品詳情信息頁面。

效果：

Sp.vue代碼如下：

<template><div ><div class="yio"><el-button @click="goBack" class="h">后退</el-button><div class="pl"><el-table :data="products" stripe border style="width: 1500px" height="850px"><el-table-column prop="id" label="商品編號"></el-table-column><!-- prop屬性綁定字段名 --><el-table-column prop="name" label="商品名稱"></el-table-column><el-table-column prop="price" label="商品價格"></el-table-column><el-table-column prop="stock" label="商品庫存"></el-table-column><el-table-column prop="description" label="商品簡介"></el-table-column><el-table-column prop="image" label="商品圖片"><template #default="scope"><img :src="scope.row.image" alt="商品圖片" width="120px" height="120px"></template></el-table-column><el-table-column label="操作"><template #default="scope"><el-button @click="handleDetail(scope.row)" style="background-color: orange;color: white; margin-left: 30px;">詳情</el-button></template></el-table-column></el-table></div></div></div>
</template><script setup>import {ref} from 'vue';import {useRouter} from 'vue-router';const router = useRouter();const products = ref([{id: '1',name: '葡萄柚',price: '10.00',stock: '10',description: '葡萄柚含有豐富的蛋白質、維生素、葉酸、無機鹽、纖維素等等。',image: '../images/grapefruit.png'},{id: '2',name: '葡萄',price: '10.00',stock: '20',description: '葡萄含有大量的維生素C，豐富的礦物質，日常食用，可以抗氧化、起到美容養作用，并且還能提高機體抵抗力、輔助降血壓、降血糖、預防心腦血管疾病。',image: '../images/grape.png'},{id: '3',name: '西紅柿',price: '3.00',stock: '10',description: '西紅柿屬于常見的水果，不僅美味，還營養豐富，具有美容養顏、保護視力等習生菜可生食，脆嫩爽口，略甜，具有改善睡眠、減肥瘦身、保護視力等功效',image: '../images/tomatoes.png'},{id: '4',name: '生菜',price: '6.00',stock: '50',description: '生菜可生食，脆嫩爽口，略甜，具有改善睡眠、減肥瘦身、保護視力等功效。',image: '../images/lettuce.png'},{id: '5',name: '葡萄柚',price: '10.00',stock: '10',description: '葡萄柚含有豐富的蛋白質、維生素、葉酸、無機鹽、纖維素等等。',image: '../images/tomatoes.png'},{id: '6',name: '葡萄柚',price: '10.00',stock: '10',description: '葡萄柚含有豐富的蛋白質、維生素、葉酸、無機鹽、纖維素等等。',image: '../images/grape.png'},{id: '7',name: '葡萄柚',price: '10.00',stock: '10',description: '葡萄柚含有豐富的蛋白質、維生素、葉酸、無機鹽、纖維素等等。',image: '../images/grapefruit.png'},]);const handleDetail = (product) => {alert("確定要跳轉嗎？")router.push('/Tc/:id')return localStorage.setItem('token', 'Bearer xxx');// 跳轉到詳情頁邏輯，可以在此處添加路由跳轉邏輯};
// import request from './axios/request.js'
const goBack = () => {router.push('/Dh');};
</script><style scoped>.pl{margin-top: 20px;}.h{background-color: blue; color: aliceblue;margin-left: 470px;}
</style>

?（6）我的“個人賬戶”界面

個人中心頁面是對個人賬戶信息進行修改，可以對用戶名和密碼進行修改，單擊【提交】按鈕，可以完成對用戶名和密碼的修改，單擊頁面中的【重置】按鈕，可以清空頁面中需要修改的用戶名和密碼。

效果：

Zh.vue代碼如下：

<template><el-card class="w"><div ><div class="mm"><h2>個人中心</h2><hr size="1px" color="gainsboro"/></div><el-form :model="userForm" label-width="100px"><el-form-item label="用戶名:"><span>劉麗珍</span></el-form-item><el-form-item label="原密碼"><el-input type="password" v-model="userForm.pass"></el-input></el-form-item><el-form-item label="新密碼"><el-input type="password" v-model="userForm.word"></el-input></el-form-item><el-form-item label="再次輸入密碼"><el-input type="  " v-model="userForm.vue"></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleSubmit">提交</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form></div></el-card>
</template><script setup>import {ref} from 'vue';import {useRouter} from 'vue-router';const router = useRouter();// 定義響應式數據const userForm = ref({pass: '',word: '',vue:'',password: ''});// 重置表單的方法const resetForm = () => {userForm.value = {password: ''};};const handleSubmit = () => {alert("提交成功")router.push('/Tc/:id');}</script><style scoped>.mm h2 {text-align: center;}</style>

最后，要新建一個router.js路由進行界面的跳轉實現

router.js代碼：

// 導入相關函數
import {createRouter,createWebHashHistory
} from "vue-router"
// 導入需要的組件
import Al from "./components/Al.vue";
import Dl from "./components/Dl.vue";
import Fl from "./components/Fl.vue";
import Sp from "./components/Sp.vue";
import Sy from "./components/Sy.vue";
import Xz from "./components/Xz.vue";
import Tc from "./components/Tc.vue";
import Bt from "./components/Bt.vue";
import Zh from "./components/Zh.vue";
// 創建路由對象router
const router=createRouter({// 指定路由工作模式history:createWebHashHistory(),// 聲明路由規則routes:[// 路由重定向{path:'/',redirect:'/dl'},// 路由匹配規則{path:'/dl',component:Dl},{path:'/dh',component: Al,children:[{path:'fl',component:Fl},{path:'sp',component:Sp},{path:'sy',component:Sy},{path:'xz',component:Xz},{path:'zh',component:Zh},{path:'/Tc/:id',component:Tc, props:true},{path:'/Bt/:id',component:Bt, props:true}]}]
})
// 全局前置導航守衛
router.beforeEach((to,from,next)=>{if(to.path!='/dl'){const token=localStorage.getItem('token')if(token){next()}else{next('/dl')}}else{next()}
})
// 導出實例對象router
export default router;

今天就分享到此，感謝預覽~?