菜单 搜索
首页 前端知识 vue.js——“微商城”后台管理系统

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

2024-11-05 23:11:53 前端知识 前端哥 857 763 我要收藏

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 : 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="用户名: &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>

自此，微商城完成

转载请注明出处或者链接地址：https://www.qianduange.cn//article/20007.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

HTML5风水研究会网站模板：自适应布局学习案例

2024-11-10 09:11:48

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

2024-11-10 09:11:32

HTML/SSM-实验室预约管理系统-99299（免费领源码 开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

2024-11-10 09:11:16

【简单html静态网页代码】 制作一个简单HTML宠物网页（HTML CSS）

2024-11-10 09:11:06

模仿电影中黑客电脑界面，html装逼代码

2024-11-10 09:11:04

【html】新建一个html并且在浏览器运行

2024-11-10 09:11:58

SSM基于html的网上购物系统2nluo 在线充值

2024-11-10 09:11:24

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！