一.需要运行的效果
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="密 码:" 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;今天就分享到此，感谢预览~
