1. 需求背景：
先创建运行环境，“微商城”后台管理系统是一种后台管理系统平台,旨在提供一个便捷、安全和高效的管 理和操作各类数据的平台。系统将涵盖用户登录、商品管理、分类管理、新增分类和个人中 心等功能，以满足用户高效数据管理的各种需求。通过 Web 前端开发框架（VUE）的技术实现该项目。
首先，配置该环境
示例如图
在此文件中可检验引用是否成功
在main.js中配置环境，添加以下代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'
// import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import AntDesignVue from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app=createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(AntDesignVue)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')
在router.js中创建路由链接
import { RouterView, createRouter, createWebHashHistory } from 'vue-router'
import { h } from 'vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', redirect:'/login' },
{ path: '/login', component: () => import ('./components/Login.vue') },
{
path: '/home',
component: () => import ('./components/Home.vue'),
redirect:'/home/user',
children: [
{
path: 'user',
component: { render: () => h(RouterView) },
children: [
]
},
{
path: '/aside',
component: () => import('./components/subcomponents/MyAside.vue')
},
{
path: '/rights',
component: () => import ('./components/subcomponents/MyRights.vue')
},
{
path: '/goods',
component: () => import ('./components/subcomponents/MyGoods.vue')
},
{
path: '/orders',
component: () => import ('./components/subcomponents/MyOrders.vue')
},
{
path: '/settings',
component: () => import ('./components/subcomponents/MySettings.vue')
},
{
path: '/menu',
component: () => import ('./components/subcomponents/MyMenu.vue')
},
]
}
]
})
router.beforeEach((to, from, next) => {
// 如果访问的是登录页面，直接执行下一个钩子函数
if(to.path === '/login'){
return next()
}
// 获取Token值
const token = localStorage.getItem('token')
console.log(token)
if (!token) {
// Tok/en值不存在，强制跳转到登录页面
return next('/login')
}
// 存在Token值，直接执行下一个钩子函数
next()
})
export default router
在index.html中编写导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"微商城"后台管理系统--沈茗萱</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
任务一： 登录页面的制作
在style.css中编写样式
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
/* body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
} */
body {
margin: 0;
display: flex;
place-items: center;
height: 100%;
}
html{
height: 100%;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
/* #app {
width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
} */
#app {
width: 100%;
margin: 0 auto;
text-align: center;
height: 100%;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
（1）登录项目的验证：
- a) 用户名和密码是必须输入项目。
- b) 用户名和密码的检查：
- 用户名： '用户名长度为 3~12 个字符'
- 密码： '密码长度为 6~24 个字符'
（2）登录按钮的功能的实现：
- 点击【登录】按钮，跳转到后台管理系统的首页
- 点击【重置】按钮，清空用户名和密码的输入内容
（3）使用导航守卫实现登录页面的功能：
- 访问后台主页时，需要用户处于登录状态，如果没有登录就跳转到登录页面。
- 用户在登录页面进行登录操作，若登录成功，则跳转到后台主页；若登录失败，则返回 登录页面
在Login.vue中输入以下代码：
<template>
<!-- 登录表单模板 -->
<el-card class="box-form">
<template #header>
<!--标题 -->
<div class="card-header">
<h3>"微商城"后台管理系统</h3>
</div>
</template>
<el-form :model="loginForm" :rules="FormRules" ref="ruleFormRef" label-width="120px" class="demo-ruleForm">
<!-- 表单部分，包含用户名和密码输入字段 -->
<el-form-item label="用户名" prop="username">
<!-- 用户名-->
<el-input type="text" placeholder="请输入用户名" v-model="loginForm.username" />
</el-form-item>
<el-form-item label="密 码" prop="password">
<!-- 密码-->
<el-input v-model="loginForm.password" placeholder="请输入密码" type="password" />
</el-form-item>
<el-form-item>
<!-- 登录和重置按钮 -->
<el-button type="primary" @click="submitForm">登录</el-button>
<el-button @click="resetForm" type="info">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script setup>
import {
ElMessage
} from 'element-plus';
import {
ref
} from 'vue';
import {
useRouter
} from 'vue-router';
// 定义响应式变量，包括登录表单、表单引用和路由
const loginForm = ref({
username: '',
password: ''
});
const ruleFormRef = ref();
const router = useRouter();
// 提交表单的函数
const submitForm = () => {
ruleFormRef.value.validate((valid) => {
if (valid) {
// 验证用户名和密码，然后登录或显示错误消息
if (loginForm.value.username === '沈茗萱' && loginForm.value.password === '123456') {
localStorage.setItem('token', 'Bearer xxx');
ElMessage.success('登录成功');
router.push('/home');
} else {
ElMessage.error('用户名或密码输入错误');
localStorage.removeItem('token');
}
} else {
ElMessage.error('请正确输入用户名和密码');
return false;
}
});
};
// 重置表单的函数
const resetForm = () => {
ruleFormRef.value.resetFields();
};
// 定义表单验证规则
const FormRules = {
username: [{
required: true,
message: '请输入用户名',
trigger: 'blur'
},
{
min: 3,
max: 12,
message: '用户名长度为 3~12 个字符',
trigger: 'blur'
}
],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 6,
max: 24,
message: '密码长度为 6~24 个字符',
trigger: 'blur'
}
]
};
</script>
<style scoped>
/* 表单容器样式 */
.box-form {
width: 600px;
margin: 200px auto;
padding: 20px;/* 内边距*/
background-color: #fff;
border: 1px solid #fff;/* 边框宽度*/
border-radius: 5px; /* 边框圆角半径*/
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 盒子阴影效果 */
}
/* 头部标题样式 */
h3 {
color: darkred;
text-align: center;
}
/* 按钮样式 */
.el-button {
margin: 0 auto;
}
</style>其示例结果为
在MyUserDetail.vue中添加以下代码，用于登录失败返回登录页面
<template>
<button @click="goBack">后退</button>
<h4>用户{{ id }}的详情页面</h4>
</template>
<script setup>
import { useRouter } from 'vue-router'
const props = defineProps({
id: String
})
const router = useRouter()
const goBack = () => {
router.push('/login')
}
</script>
<style scoped>
button{
background-color: #8FF0EE;
color: #fff;
}
</style>任务二： 后台首页的制作
（1）头部区域：
- a) 头部区域分别是导航栏标题和用户信息
- b）点击【退出】按钮，跳转到登录页面
在MyHeader.vue中输入以下代码，用于退出至登录页面
<template>
<div class="layout-header-container">
<div class="layout-header-left">
<h4 class="layout-header-left-title ml-3">"微商城"后台管理系统</h4>
</div>
<div class="layout-header-right">
<button type="button" class="btn btn-light" @click="onLogout">退出</button>
</div>
</div>
</template>
<script setup>
import { reactive,ref } from 'vue';
import {
useRouter
} from 'vue-router'
import router from '../../router';
//获取路由实例
const router = useRouter()
// 定义退出方法
const onLogout = () => {
// 重定向
router.push('/login')
}
</script>
<style scoped>
/* 头部容器样式 */
.layout-header-container {
height: 60px;
border-bottom: 1px solid #D9D9D9; /* 底部边框 */
display: flex;
justify-content: space-between; /* 子元素在主轴上的排列方式，左右分布 */
align-items: center; /* 子元素在交叉轴上的对齐方式，居中对齐 */
padding: 0 0.5rem; /* 内边距 */
background-color: #8DC4C4;
/* 左侧容器样式 */
.layout-header-left {
display: flex; /* 使用 flex 布局 */
align-items: center;
color: #fff;
}
}
.layout-header-right {
/* 按钮样式 */
.btn {
background-color: #8DC4C4;
color: #fff;
}
/* 按钮点击时的样式 */
.btn:hover {
color: #999;
opacity: 0.5; /* 透明度 */
background-color: #fff;
}
}
</style>
（2）主体区域：
- a) 主体区域分别是左侧导航栏和右侧内容区域
在MyAside.vue中输入以下代码：
<template>
<!-- 设置列间距 -->
<el-row :gutter="24">
<!-- 设置 span 属性为 6，占据 1/4 的栅格系统宽度 -->
<el-col :span="6">
<el-card class="box-card">
<!-- 具名插槽 -->
<template #header>
<div class="card-header">
<!-- 形状方形 -->
<el-avatar shape="square">
</el-avatar>
<span style="font-size: 20px;float: right;">沈茗萱</span>
</div>
</template>
<div class="info">
<p>登录时间:2024-06-04</p>
<p>登录地点:江西省南昌市区</p>
</div>
</el-card>
</el-col>
<el-col :span="18">
<!-- 占格 -->
<el-card class="box-card">
<template #header>
6月统计信息
</template>
<div class="info">
<el-row :gutter="24" justify="end">
<el-col :span="8" class="san">
<div class="el-col-div1"></div>
<span class="right1">500</span>
<p class="right2">商品数量（个）</p>
</el-col>
<el-col :span="8" class="san">
<!-- 商品分类数量 -->
<div class="el-col-div2"></div>
<p class="right1">20</p>
<p class="right2">商品分类数量（个）</p>
</el-col>
<el-col :span="8" class="san">
<!-- 用户访问数量 -->
<div class="el-col-div3"></div>
<div>
<p class="right1">121</p>
<p class="right2">用户访问数量（次）</p>
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
</script>
<style>
.card-header {
height: 50px;
}
.san {
height: 100px;
border: 1px solid #bababa;/* 边框*/
}
.right1 {
text-align: center;
margin-right: 5px;/* 右外边距 */
}
.el-col-div1 {
width: 90px;
height: 90px;
background: #d5d68b;
float: left;/* 浮动*/
position: relative;/* 相对定位 */
top: 3px;
left: -10px;
}
.el-col-div2 {
width: 90px;
height: 90px;
background: #d5b5d6;
float: left;
position: relative;
top: 3px;
left: -10px;
}
.el-col-div3 {
width: 90px;
height: 90px;
background: #9fcccc;
float: left;
position: relative;/* 相对定位 */
top: 3px;
left: -10px;
}
</style>
任务三： 新增分类页面和分类管理页面的制作
（1）新增分类页面
- 页面中是新增分类的页面，页面中包含分类名称、分类级别（一级分类和二级分类）、 产品大类、供货方式、备注信息和及时生效等项目。页面中有提交按钮和重置按钮。
在MyRights.vue中添加以下代码，
<template>
<!-- 新增分类标题 -->
<div class="head">
<h2>新增分类</h2>
</div>
<!-- 表单 -->
<el-form ref="ruleFormRef" style="max-width:600px" :model="ruleForm" :rules="rules" label-width="auto"
class="demo-ruleForm" :size="formSize" status-icon>
<!-- 分类名称 -->
<el-form-item label="分类名称" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<!-- 分类级别 -->
<el-form-item label="分类级别" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择分类级别">
<el-option label="简单" />
<el-option label="中等" />
<el-option label="困难" />
</el-select>
</el-form-item>
<!-- 产品大类 -->
<el-form-item label="产品大类" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox name="type" label="潮流服饰">
</el-checkbox>
<el-checkbox value="Promotion activities" name="type" label="食品">
</el-checkbox>
<el-checkbox value="Offline activities" name="type" label="珠宝配饰">
</el-checkbox>
<el-checkbox value="Simple brand exposure" name="type" label="日用百货">
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 供货方式 -->
<el-form-item label="供货方式" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio value="Sponsorship" label="线上供货"></el-radio>
<el-radio value="Venue" label="线下供货"></el-radio>
</el-radio-group>
</el-form-item>
<!-- 备注信息 -->
<el-form-item label="备注信息" prop="desc">
<el-input v-model="ruleForm.desc" type="textarea" />
</el-form-item>
<!-- 即时生效 -->
<el-form-item label="即时生效" prop="delivery">
<el-switch v-model="ruleForm.delivery" />
</el-form-item>
<!-- 提交和重置按钮 -->
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
// 表单数据接口
interface RuleForm {
name : string
region : string
count : string
delivery : boolean
type : string[]
resource : string
desc : string
}
// 表单尺寸
const formSize = ref<ComponentSize>('default')
// 表单实例引用
const ruleFormRef = ref<FormInstance>()
// 表单数据
const ruleForm = reactive<RuleForm>({
name: '',
region: '',
count: '',
delivery: false,
type: [],
resource: '',
desc: '',
})
// 表单验证规则
const rules = reactive<FormRules>({
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
],
region: [
{
required: true,
message: 'Please select Activity zone',
trigger: 'change',
},
],
count: [
{
required: true,
message: 'Please select Activity count',
trigger: 'change',
},
],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change',
},
],
resource: [
{
required: true,
message: 'Please select activity resource',
trigger: 'change',
},
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' },
],
})
// 提交表单
const submitForm = async (formEl : FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!', fields)
}
})
}
// 重置表单
const resetForm = (formEl : FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>
<style scoped>
.head{
text-align: center;
}
.el-button {
/* 按钮样式 */
margin: 0 auto;
}
</style>
（2）分类管理页面
- a) 页面采用表单布局的方式，页面中展示关于分类的相关信息，包含分类名称、分类级 别（一级分类和二级分类）、产品大类、供货方式、备注信息等项目。
- b) 单击页面中的【新增分类】按钮，可以新增分类信息，跳转到新增分类页面。
在MyGoods.vue中添加以下代码
<template>
<div class="but">
<!--类型为 primary，主要按钮蓝色-->
<el-button type="primary" @click="MyRights">新增分类</el-button>
</div>
<div>
<!--表格组件 -->
<el-table :data="goodsList" stripe border style="width: 100%">
<!-- 表格列-->
<el-table-column sortable prop="id" label="分类名称">
</el-table-column>
<el-table-column prop="goods_name" label="分类级别">
</el-table-column>
<el-table-column prop="goods_desp" label="供货方式">
</el-table-column>
<el-table-column prop="goods_price" label="备注信息">
</el-table-column>
<el-table-column prop="goods_cz" label="操作">
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import {
reactive
} from 'vue'
// 导入 Vue Router 实例
import router from '../../router';
// 定义MyRights，按钮点击事件
const MyRights = () => {
// 跳转到 '/rights' 路由
router.push('/rights')
}
</script>
<style scoped>
.but {
height: 80px;
text-align: center;
line-height: 60px;
}
</style>
任务四：商品管理页面的制作
- （1）商品管理页面中展示关于商品的相关信息，包含商品编号、商品名称、商品价格、 商品分类、商品库存、商品简介和商品图片等项目。
- （2）单击“后退”按钮，跳转到后台管理系统首页页面。
- （3）【选做项目】：点击“详情”按钮，跳转到商品详情信息页面。
在MyOrders.vue中输入代码
<template>
<el-card class="box-form">
<template #header>
<!--标题 -->
<div class="card-header">
<el-button type="primary" @click="orders">后退</el-button>
<h2>商品管理平台详情</h2>
</div>
</template>
</el-card>
</template>
<script setup>
import {
reactive
} from 'vue';
import router from '../../router';
const orders = () => {
router.push('/settings')
}
</script>
<style>
.box-form {
/* 表单容器 */
width: 100%;
margin: 0 auto;
background-color: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.card-header{
text-align: center;
}
.el-button{
float: right;
}
</style>在MySettings.vue中输入以下代码，展示商品相关信息
<template>
<div class="but">
<el-button type="primary" @click="MySettings">后退</el-button>
</div>
<el-table :data="goodsList" border style="width: 100%">
<el-table-column prop="id" label="商品编号" width="120px">
</el-table-column>
<el-table-column prop="name" label="商品名称" width="120px">
</el-table-column>
<el-table-column prop="price" label="商品价格" width="120px">
</el-table-column>
<el-table-column prop="desp" label="商品库存" width="120px">
</el-table-column>
<el-table-column prop="jian" label="商品简介" width="500px">
</el-table-column>
<el-table-column prop="pic" label="商品图片">
<template #default="{ row }">
<el-image v-if="row.pic != ''" :src="row.pic" fit="contain"
style="display: flex; align-items: center; height: 65px;"></el-image>
</template>
</el-table-column>
<el-table-column prop="czuo" label="操作" width="100px">
<template #default="{ row }">
<el-button type="warning" class="caozuo" @click="MyOrders">详情</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script setup>
import {
reactive
} from 'vue';
import router from '../../router';
const MySettings = () => {
router.push('/aside')
}
const MyOrders = () =>{
router.push('/orders')
}
const goodsList = reactive([{
id: 1,
name: '葡萄柚',
price: '10.00',
desp: '10',
jian: '葡萄柚含有丰富的蛋白质、维生素、叶酸、无机盐、纤维素等等',
pic: 'src/assets/grapefruit.png',
},
{
id: 2,
name: '葡萄',
price: '10.00',
desp: '20',
jian: '葡萄含有大量的维生素C，丰富的矿物质，日常食用，可以抗氧化、起到美容养颜的作用，并且还能提高机体抵抗力、辅助降血压、降血糖、预防心脑血管疾病。',
pic: 'src/assets/grape.png',
},
{
id: 3,
name: '西红柿',
price: '3.00',
desp: '10',
jian: '西红柿属于常见的水果，不仅美味，还营养丰富，具有美容养颜、保护视力等功效。',
pic: 'src/assets/tomatoes.png',
},
{
id: 4,
name: '生菜',
price: '6.00',
desp: '50',
jian: '生菜可生食，脆嫩爽口，略甜，具有改善睡眠、减肥瘦身、保护视力等功效。',
pic: 'src/assets/spinach.png',
},
{
id: 5,
name: '葡萄柚',
price: '10.00',
desp: '10',
jian: '葡萄柚含有丰富的蛋白质、维生素、叶酸、无机盐、纤维素等等。',
pic: 'src/assets/grapefruit.png',
},
{
id: 6,
name: '葡萄柚',
price: '10.00',
desp: '10',
jian: '葡萄柚含有丰富的蛋白质、维生素、叶酸、无机盐、纤维素等等。',
pic: 'src/assets/grapefruit.png',
},
{
id: 7,
name: '葡萄柚',
price: '10.00',
desp: '10',
jian: '葡萄柚含有丰富的蛋白质、维生素、叶酸、无机盐、纤维素等等。',
pic: 'src/assets/grapefruit.png',
}
])
</script>
<style>
th,
td {
line-height: 30px;
background-color: #fff;
padding: 10px;
}
.but {
height: 80px;
text-align: center;
line-height: 60px;
}
.czuo {
background: #e6a23d;
color: #fff;
}
</style>在Home.vue中输入以下代码，跳转到后台管理系统首页页面
<template>
<el-container>
<el-header>"微商城"后台管理系统</el-header>
<!--点击后调用 tuichu 方法 -->
<el-button type="primary" @click="tuichu">退出</el-button>
<!-- 嵌套侧边栏和主要内容 -->
<el-container>
<!-- 侧边栏组件 -->
<el-aside width="200px">
<!-- 菜单组件 -->
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" background-color="#fff"
text-color="#000" active-text-color="#A4D1BE">
<!-- 路由链接，点击后不同的页面 -->
<router-link to="/aside"><el-menu-item index="1"><el-icon>
<HomeFilled />
</el-icon>首页</el-menu-item></router-link>
<router-link to="/rights"><el-menu-item index="2"><el-icon>
<Menu />
</el-icon>新增分类</el-menu-item></router-link>
<router-link to="/goods"><el-menu-item index="3"><el-icon>
<Menu />
</el-icon>分类管理</el-menu-item></router-link>
<router-link to="/settings"><el-menu-item index="4"><el-icon>
<Menu />
</el-icon>商品管理</el-menu-item></router-link>
<router-link to="/menu"><el-menu-item index="5"><el-icon>
<User />
</el-icon>个人中心</el-menu-item></router-link>
</el-menu>
</el-aside>
<!-- 容器组件，嵌套主要内容区域 -->
<el-container>
<!-- 主要内容区域，当前路由对应的组件 -->
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</el-container>
</template>
<script setup>
import {
reactive,
ref
} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter()
const tuichu = () => {
router.push('/login')
localStorage.removeItem('token');
}
</script>
<style scoped>
/* 头部*/
.el-header {
background-color: #7FBAA7;
color: #ffffff;
text-align: left;
line-height: 60px;
}
/* 退出按钮 */
.el-button {
position: absolute;
top: 15px;
right: 50px;
}
/* 侧边栏 */
.el-aside {
background-color: #fff;
color: #333;
}
/* 主要内容区域*/
.el-main {
background-color: #F7F7F7;
color: #333;
}
/* 移除下划线 */
.el-menu a {
text-decoration: none;
}
/* 演示样式*/
.el-menu-demo {
height: 680px;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
任务五：个人中心页面的制作
个人中心页面是对个人账户信息进行修改，可以对用户名和密码进行修改，单击【提交】 按钮，可以完成对用户名和密码的修改，单击页面中的【重置】按钮，可以清空页面中需要 修改的用户名和密码。
在MyMenu.vue中添加以下代码，编写个人中心页面
<template>
<!-- 登录表单模板 -->
<el-card class="box-form">
<template #header>
<!--标题 -->
<div class="card-header">
<h3>个人账户</h3>
</div>
</template>
<el-form :model="FormData" ref="ruleFormRef" label-width="120px" class="demo-ruleForm">
<!-- 表单部分，包含用户名和密码输入字段 -->
<el-form-item class="yhm" label="用户名: 沈茗萱" prop="name">
</el-form-item>
<el-form-item label="原密码" prop="input">
<el-input v-model="FormData.input" show-password />
</el-form-item>
<el-form-item label="新密码" prop="menuFrom">
<el-input v-model="FormData.menuFrom" show-password />
</el-form-item>
<el-form-item label="再次输入新密码" prop="newpassword">
<el-input v-model="FormData.newpassword" show-password />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script setup>
import {
ElMessage
} from 'element-plus';
import {
ref
} from 'vue';
import {
useRouter
} from 'vue-router';
const router = useRouter()
const ruleFormRef = ref()
const FormData = ref({
input: '',
menuFrom: '',
newpassword: ''
})
//提交
const submitForm = () => {
// 验证用户名和密码，然后登录或显示错误消息
if (FormData.input !=''&& FormData.menuFrom!='' && FormData.newpassword!='') {
if (FormData.menuFrom === FormData.newpassword) {
ElMessage.success('提交成功')
router.push('/aside')
} else {
ElMessage.error('两次输入的密码不同')
}
} else{
ElMessage.error('密码不为空')
}
}
// 重置
const resetForm = () => {
ruleFormRef.value.resetFields();
}
</script>
<style scoped>
.box-form {
/* 表单容器 */
width: 800px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
h3 {
/* 头部标题 */
color: darkred;
text-align: center;
}
.el-button {
/* 按钮 */
margin: 0 auto;
}
.yhm {
margin-left: 60px;
}
</style>
自此，微商城完成
