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;

今天就分享到此，感谢预览~