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

登录页面代码
<template>
<div class="login">
<el-card class="login_center">
<template #header>
<div class="card_header">
<span>用户登录</span>
</div>
</template>
<el-form :model="loginFormState" :rules="rules" ref="loginFormRef">
<el-form-item prop="name">
<el-input
prefix-icon="el-icon-user-solid"
v-model.trim="loginFormState.name"
maxlength="32"
placeholder="请输入账号"
clearable
></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input
prefix-icon="el-icon-lock"
v-model.trim="loginFormState.pwd"
maxlength="16"
show-password
placeholder="请输入密码"
clearable
@keyup.enter.exact="handleLogin"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%" :loading="loginFormState.loading" @click="handleLogin">登 录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
登录逻辑代码
import {
getCurrentInstance, reactive, ref } from "vue";
import {
useRouter } from "vue-router";
import {
useStore } from "vuex";
import {
encode } from "js-base64";
export default {
setup() {
const {
proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();
const loginFormRef = ref();
const loginFormState = reactive({
name: "",
pwd: "",
loading: false
});
const rules = {
name: [{
required: true, message: "账号不能为空", trigger: "blur" }],
pwd: [
{
required: true, message: "密码不能为空", trigger: "blur" },
{
min: 5, max: 16, message: "密码长度为5-16位",

本文档详述了一款基于Vite2和Vue3构建的后台管理系统,涵盖登录逻辑、路由权限、Vuex状态管理和数据持久化。重点讨论了Vue3中的变化,如setup函数的使用和全局事件的绑定。还介绍了使用Element Plus、js-base64加密、地图API、视频播放器和富文本编辑器的集成。
最低0.47元/天 解锁文章
1453

被折叠的 条评论
为什么被折叠?



