vue3后台管理系统(模板)

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

🍎系统简介

文章来源:https://zxkv.github.io/blog/code/25

  • 此管理系统是基于Vite2和Vue3.0构建生成的后台管理系统。目的在于学习vite和vue3等新技术,以便于后续用于实际开发工作中;
  • 本文章将从管理系统页面布局、vue路由鉴权、vuex状态管理、数据持久化、用户信息加密等方面进行介绍和记录;
  • 这也是我边学习边实践的过程,此次记录一是方便自己日后开发过程中有用到时候便于借鉴和复习,再次是为了初学vue3和尝试上手vite2和vue3搭建管理系统的小伙伴提供一些学习方法和技术点;
  • 本Vue后台管理系统使用的技术点主要有:vite2vue3vue-router4.xvuex4.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位", 
  • 14
    点赞
  • 118
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值