VUE3 后台管理系统「模板构建」

预计阅读时间: 7 分钟

🍎 系统简介

此管理系统是基于 Vite2 和 Vue3 构建生成的后台管理系统。目的在于学习 vite 和 vue3 等新技术，以便于后续用于实际开发工作中；
本文章将从管理系统页面布局、vue 路由鉴权、vuex 状态管理、数据持久化、用户信息加密等方面进行介绍和记录；
这也是我边学习边实践的过程，此次记录一是方便自己日后开发过程中有用到时候便于借鉴和复习，再次是为了初学 vue3 和尝试上手 vite2 和 vue3 搭建管理系统的小伙伴提供一些学习方法和技术点；
本 Vue 后台管理系统使用的技术点主要有：vite2、vue3、vue-router4.x、vuex4.x、vuex-persistedstate（vuex 数据持久化）、Element Plus等。

🚗 用户登录

登录页面代码

登录页 html

1<template>
2	<div class="login">
3		<el-card class="login_center">
4			<template #header>
5				<div class="card_header">
6					<span>用户登录</span>
7				</div>
8			</template>
9			<el-form :model="loginFormState" :rules="rules" ref="loginFormRef">
10				<el-form-item prop="name">
11					<el-input
12						prefix-icon="el-icon-user-solid"
13						v-model.trim="loginFormState.name"
14						maxlength="32"
15						placeholder="请输入账号"
16						clearable
17					></el-input>
18				</el-form-item>
19				<el-form-item prop="pwd">
20					<el-input
21						prefix-icon="el-icon-lock"
22						v-model.trim="loginFormState.pwd"
23						maxlength="16"
24						show-password
25						placeholder="请输入密码"
26						clearable
27						@keyup.enter.exact="handleLogin"
28					></el-input>
29				</el-form-item>
30				<el-form-item>
31					<el-button type="primary" style="width: 100%" :loading="loginFormState.loading" @click="handleLogin">登 录</el-button>
32				</el-form-item>
33			</el-form>
34		</el-card>
35	</div>
36</template>

登录逻辑代码

登录判断

1import { getCurrentInstance, reactive, ref } from "vue";
2import { useRouter } from "vue-router";
3import { useStore } from "vuex";
4import { encode } from "js-base64";
5
6export default {
7	setup() {
8		const { proxy } = getCurrentInstance();
9		const router = useRouter();
10		const store = useStore();
11		const loginFormRef = ref();
12
13		const loginFormState = reactive({
14			name: "",
15			pwd: "",
16			loading: false
17		});
18
19		const rules = {
20			name: [{ required: true, message: "账号不能为空", trigger: "blur" }],
21			pwd: [
22				{ required: true, message: "密码不能为空", trigger: "blur" },
23				{ min: 5, max: 16, message: "密码长度为5-16位", trigger: "blur" }
24			]
25		};
26
27		const handleLogin = () => {
28			loginFormRef.value.validate(valid => {
29				if (!valid) {
30					return false;
31				}
32
33				loginFormState.loading = true;
34
35				let params = { name: loginFormState.name, pwd: loginFormState.pwd };
36
37				setTimeout(() => {
38					let users = { role: loginFormState.name === "admin" ? "admin" : "", username: loginFormState.name };
39					Object.assign(params, users);
40					sessionStorage.setItem("jwt", encode(JSON.stringify(params)));
41					store.dispatch("setUser", params);
42					loginFormState.loading = false;
43					router.replace("/");
44				}, 1000);
45
46				// proxy.$axios
47				// 	.post("/user/login", proxy.$qs.stringify(params))
48				// 	.then(res => {
49				// 		let { code, result_data, message } = res.data;
50				// 		if (code == 1) {
51				// 			console.log("login_success", result_data);
52				// 			ElMessage.success("登录成功");
53				// 		} else {
54				// 			ElMessage.error("登录失败：" + message);
55				// 		}
56				// 	})
57				// 	.catch(err => {
58				// 		console.log("login err", err);
59				// 		ElMessage.error("登录失败");
60				// 	});
61			});
62		};
63
64		return { loginFormRef, loginFormState, rules, handleLogin };
65	}
66};

登录简介：

登录页面采用的是一级录用，与控制台的路由同级，这样写便于对 vue-router 路由权限校验的控制；
在 vue2 中我们频繁使用 this 来处理事件函数和组件数据，vue3 大多事件函数和数据状态的存储基本都实在 setup 函数中完成的，在 vue3 中无法通过 this 来获取当前组件的实例，故无法像 vue2 中那样操作数据和事件函数；
vue3 中为了获取到当前组件的实例，我们可以采用 vue3 中提供的 getCurrentInstance 来获取组件的实例；
当我们使用全局对象或者函数时，我们大多是将事件函数绑定在 vue 的原型实例上，当再次访问时只需使用过 this 来访问自己指定的事件名即可；
在 vue3 中我们若是使用全局变量或者事件函数时，我们需要借助 globalProperties 来实现全局事件函数的绑定；此时在需要使用的地方可以通过当前组件实例来访问全局的 property 属性；
对登录用的的信息进行加密处理，我采用的是 js-base64 的 encode 方法来实现登录信息的加密。使用方式为：encode(“需要加密的 JSON 字符串”)。

🚆 系统主页

Layout 布局代码

layout 布局代码

1<template>
2	<el-header height="56px">
3		<!-- header -->
4		<div class="header_left">Element-Plus Create By Vite</div>
5		<div class="header_right">
6			<!-- 退出全屏、进入全屏按钮 -->
7			<el-tooltip :content="isFullScreen ? '退出全屏' : '全屏'">
8				<i class="el-icon-full-screen" @click="handleFullScreen"></i>
9			</el-tooltip>
10			<!-- 下拉菜单 -->
11			<el-dropdown size="medium" @command="handleCommand">
12				<!-- 用户信息 -->
13				<div class="user_info">
14					<!-- 用户头像 -->
15					<el-avatar :size="36" :src="avatar" />
16					<!-- 用户名宁 -->
17					<span class="username">{{ userName }}</span>
18				</div>
19				<template #dropdown>
20					<!-- 折叠菜单 -->
21					<el-dropdown-menu>
22						<el-dropdown-item icon="el-icon-user" command="user">个人中心</el-dropdown-item>
23						<el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
24					</el-dropdown-menu>
25				</template>
26			</el-dropdown>
27		</div>
28	</el-header>
29</template>
30
31<!-- 二级路由公用路由页面 -->
32<template>
33	<router-view v-slot="{ Component }">
34		<transition name="fade" mode="out-in">
35			<component :is="Component" />
36		</transition>
37	</router-view>
38</template>

主页 Header 相关逻辑

主页相关逻辑

1import { computed, getCurrentInstance, reactive, toRefs } from "vue";
2import { useRouter } from "vue-router";
3import { useStore } from "vuex";
4import screenfull from "screenfull";
5import avatar from "@/assets/img/admin.png";
6
7export default {
8	setup() {
9		const { proxy } = getCurrentInstance();
10		const router = useRouter();
11		const store = useStore();
12
13		const state = reactive({
14			isFullScreen: false,
15			avatar,
16			screenfull
17		});
18		const userName = computed(() => store.getters.getUserName);
19
20		const handleCommand = command => {
21			if (command === "user") {
22				router.push("/user");
23			} else {
24				proxy.$message.success("退出成功");
25				store.dispatch("clearUser");
26				router.replace("/login");
27				sessionStorage.clear();
28				localStorage.clear();
29			}
30		};
31
32		const handleFullScreen = () => {
33			if (screenfull.isEnabled) {
34				state.isFullScreen = !state.isFullScreen;
35				screenfull.toggle();
36			}
37		};
38
39		return {
40			userName,
41			handleCommand,
42			handleFullScreen,
43			...toRefs(state)
44		};
45	}
46};

👀 注：

Header 分左右两部分，其中左侧为系统的名字，右侧为用户登录的账户相关的信息以及进入和退出全屏的按钮；
不同用户权限会对应不同的账户头像，会对不同账户的用户权限做相应的限制处理；
全屏的切换借助的是第三方的插件进行处理的，此方式减少代码量的同时也减少了不同浏览器兼容性问题的出现；
退出账户逻辑的处理，当用户点击退出账户的时候进行相应的退出登录的弹窗提示，在退出后进行数据的初始化和本地存储信息的清除处理，并跳转到用户登录页。
主页使用了地图模块，地图模块是借助的“高德地图”API 实现的 H5 版的网页地图，此 Demo 需要使用注册高德地图开发者来获取开发的 keys 来创建地图实例；
本笔记主要就后台管理系统做笔记分析，高德地图此处不做过多介绍，若想进一步了解，请前往高德开放平台进行了解学习。

📕 数据管理

数据管理模块

1<template>
2	<el-card shadow="never" class="index">
3		<template #header>
4			<div class="card_header">
5				<b>数据列表</b>
6			</div>
7		</template>
8		<el-empty description="暂无数据"></el-empty>
9	</el-card>
10</template>
11
12<script></script>
13
14<style lang="scss" scoped>
15	.card_header {
16		display: flex;
17		align-items: center;
18		justify-content: space-between;
19	}
20</style>

注：没有数据时的提示信息；

📷 视频播放器

视频播放器模块

1<template>
2	<el-card shadow="never" class="index">
3		<template #header>
4			<div class="card_header">
5				<b>🍉西瓜播放器</b>
6			</div>
7		</template>
8		<div id="xg"></div>
9	</el-card>
10</template>
11
12<script>
13	import { onMounted, onBeforeUnmount, getCurrentInstance, ref } from "vue";
14	import Player from "xgplayer";
15
16	export default {
17		setup() {
18			const { proxy } = getCurrentInstance();
19
20			let player;
21			onMounted(() => {
22				initPlayer();
23			});
24
25			onBeforeUnmount(() => {
26				player.destroy();
27				player = null;
28			});
29
30			const initPlayer = () => {
31				player = new Player({
32					id: "xg",
33					url: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
34					poster: "https://img03.sogoucdn.com/app/a/07/f13b5c3830f02b6db698a2ae43ff6a67",
35					fitVideoSize: "auto",
36					fluid: true /* 流式布局 */,
37					// download: true /* 视频下载 */
38					// pip: true /* 画中画 */,
39					// errorTips: `请<span>刷新页面</span>试试` /* 自定义错误提示 */,
40					lang: "zh-cn"
41				});
42			};
43
44			return {};
45		}
46	};
47</script>
48
49<style lang="scss" scoped>
50	.card_header {
51		display: flex;
52		align-items: center;
53		justify-content: space-between;
54	}
55</style>

🍉 西瓜播放器

安装西瓜视频播放器：yarn add xgplayer
🍉 西瓜播放器官方文档「V2」：http://v2.h5player.bytedance.com/
西瓜播放器适合手机版和 PC 电脑版视频点播或直播使用，详细参数配置请参考官方文档。

🖊 富文本编辑器

富文本编辑器插件封装

富文本编辑器模块

1<template>
2	<div ref="editor" class="editor_ref"></div>
3</template>
4
5<script>
6	import { onMounted, onBeforeUnmount, watch, getCurrentInstance, ref } from "vue";
7	import WEditor from "wangeditor";
8
9	export default {
10		props: {
11			defaultText: { type: String, default: "" }
12		},
13		setup(props, context) {
14			const { proxy } = getCurrentInstance();
15			const editor = ref();
16
17			let instance;
18			onMounted(() => {
19				initEditor();
20			});
21
22			onBeforeUnmount(() => {
23				instance.destroy();
24				instance = null;
25			});
26
27			watch(
28				() => props.defaultText,
29				nv => {
30					instance.txt.html(nv);
31					!!nv && context.emit("richHtml", nv);
32				}
33			);
34
35			const initEditor = () => {
36				instance = new WEditor(editor.value);
37				// 配置富文本
38				Object.assign(instance.config, {
39					zIndex: 100,
40					// placeholder: "" /* 提示文字 */,
41					showFullScreen: true /* 显示全屏按钮 */,
42					showLinkImg: true /* 显示插入网络图片 */,
43					showLinkVideo: true /* 显示插入网络视频 */,
44					onchangeTimeout: 400 /* 触发 onchange 的时间频率，默认 200ms */,
45					uploadImgMaxLength: 1 /* 单次上传图片数量限制 */,
46					uploadImgMaxSize: 5 * 1024 * 1024 /* 上传图片大小限制 */,
47					uploadVideoAccept: ["mp4", "mov"] /* 上传视频格式限制 */,
48					uploadVideoMaxSize: 1024 * 1024 * 1024 /* 上传视频大小限制1024m */,
49					excludeMenus: ["strikeThrough", "todo", "code"] /* 移除系统菜单 */,
50					customAlert(msg, type) {
51						type == "success" ? proxy.$message.success(msg) : proxy.$message.error(msg);
52					},
53					customUploadImg(resultFiles, insertImgFn) {
54						/**
55						 * @param {Object} file - 文件对象
56						 * @param {String} rootPath - 文件根路径（默认为空、例：“filepath/”）
57						 * @param {Array} fileType - 文件类型限制（默认 [] 不限制，例：['.png','.jpeg']）
58						 * @param {Number} size - 文件大小限制（单位：兆、默认 0 不限制、例：1）
59						 **/
60						proxy.$oss(resultFiles[0]).then(imgUrl => !!imgUrl && insertImgFn(imgUrl));
61					},
62
63					customUploadVideo(resultFiles, insertVideoFn) {
64						proxy.$oss(resultFiles[0]).then(videoUrl => !!videoUrl && insertVideoFn(videoUrl)); /* 参数同上 */
65					},
66					onchange(nv) {
67						context.emit("richHtml", nv);
68					}
69				});
70				instance.create();
71			};
72
73			return { editor };
74		}
75	};
76</script>
77
78<style scoped>
79	div.editor_ref :deep(iframe) {
80		max-width: 100%;
81		max-height: auto;
82		width: 360px;
83		height: 180px;
84	}
85</style>

组件内使用

组件内使用富文本编辑器

1<template>
2	<el-card shadow="never" class="index">
3		<template #header>
4			<div class="card_header">
5				<b>富文本编辑器</b>
6			</div>
7		</template>
8		<!-- 富文本 -->
9		<WEditor :defaultText="defaultText" @richHtml="getRichHtml" />
10	</el-card>
11</template>
12
13<script>
14	import { onMounted, ref } from "vue";
15	import WEditor from "../../components/WEditor.vue";
16
17	export default {
18		components: { WEditor },
19		setup() {
20			const defaultText = ref("");
21			const richText = ref("");
22
23			onMounted(() => {
24				// 初始化数据
25				defaultText.value = "<h1>Editor</h1>";
26			});
27
28			const getRichHtml = nv => {
29				richText.value = nv;
30			};
31
32			return { defaultText, getRichHtml };
33		}
34	};
35</script>

富文本编辑器

此次是基于 Vue3 封装的富文本编辑器，编辑器使用的是开源的富文本编辑器wangeditor；
代码块一是基于官方文档和配置信息对富文本编辑器进行的相关配置，其中富文本编辑器使用的 ali-OSS 的云存储，若想详细了解请参照之前的“阿里云文件直传”博客笔记进行了解和学习；
ref 相当于 DOM 元素的 Id，要保持唯一，若一个页面要使用多个富文本编辑器，请做好区分，以便于区分组件的数据。

⚽ 个人中心

🎉 总结：

本篇文章主要介绍使用 element-plus 进行页面的布局和数据展示处理，后续笔记将继续分享和介绍动态路由菜单的处理，以及用户权限的动态校验。(。・・)ノ

🚀 源码地址：

👀：Vue3【Vite】后台管理系统源代码

#VUE3 后台管理系统「模板构建」

#🍎 系统简介

#🚗 用户登录

#登录页面代码

#登录逻辑代码

#登录简介：

#🚆 系统主页

#Layout 布局代码

#主页 Header 相关逻辑

#📕 数据管理

#📷 视频播放器

#🖊 富文本编辑器

#富文本编辑器插件封装

#组件内使用

#⚽ 个人中心

#🎉 总结：

#🚀 源码地址：

VUE3 后台管理系统「模板构建」

🍎 系统简介

🚗 用户登录

登录页面代码

登录逻辑代码

登录简介：

🚆 系统主页

Layout 布局代码

主页 Header 相关逻辑

📕 数据管理

📷 视频播放器

🖊 富文本编辑器

富文本编辑器插件封装

组件内使用

⚽ 个人中心

🎉 总结：

🚀 源码地址：