vue.js——“微商城”后台管理系统

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="密&nbsp;&nbsp;&nbsp;码" 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 : stringregion : stringcount : stringdelivery : booleantype : string[]resource : stringdesc : 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) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')} else {console.log('error submit!', fields)}})}// 重置表单const resetForm = (formEl : FormInstance | undefined) => {if (!formEl) returnformEl.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="用户名: &nbsp;&nbsp;&nbsp;&nbsp;沈茗萱" 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>