vue3大事件管理系统 === 登陆页面

于 2024-07-16 15:02:16 发布
阅读量483 收藏 7
点赞数 10
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63358859/article/details/140464932
版权

目录

首页整体路由设计

登录注册页面 [element-plus 表单 & 表单校验]

注册登录 静态结构 & 基本切换

注册功能

实现注册校验

注册前的预校验

封装 api 实现注册功能

登录功能

实现登录校验

登录前的预校验 & 登录成功

首页整体路由设计

实现目标:

  • 完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的…】
  • 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口
  • 我们需要搭建嵌套路由

目标：

  • 把项目中所有用到的组件及路由表, 约定下来

约定路由规则

path文件功能组件名路由级别
/loginviews/login/LoginPage.vue登录&注册LoginPage一级路由
/views/layout/LayoutContainer.vue布局架子LayoutContainer一级路由
├─ /article/manageviews/article/ArticleManage.vue文章管理ArticleManage二级路由
├─ /article/channelviews/article/ArticleChannel.vue频道管理ArticleChannel二级路由
├─ /user/profileviews/user/UserProfile.vue个人详情UserProfile二级路由
├─ /user/avatarviews/user/UserAvatar.vue更换头像UserAvatar二级路由
├─ /user/passwordviews/user/UserPassword.vue重置密码UserPassword二级路由

明确了路由规则，可以全部配完，也可以边写边配。

登录注册页面 [element-plus 表单 & 表单校验]

注册登录 静态结构 & 基本切换

  1. 安装 element-plus 图标库
pnpm i @element-plus/icons-vue
  1. 静态结构准备
<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
</script>

<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <el-form ref="form" size="large" autocomplete="off" v-if="isRegister">
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入再次密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space>
            注册
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = false">
            ← 返回
          </el-link>
        </el-form-item>
      </el-form>
      <el-form ref="form" size="large" autocomplete="off" v-else>
        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="flex">
          <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space
            >登录</el-button
          >
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = true">
            注册 →
          </el-link>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background-color: #fff;
  .bg {
    background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    .title {
      margin: 0 auto;
    }
    .button {
      width: 100%;
    }
    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>

注册功能

实现注册校验

【需求】注册页面基本校验

  1. 用户名非空，长度校验5-10位
  2. 密码非空，长度校验6-15位
  3. 再次输入密码，非空，长度校验6-15位

【进阶】再次输入密码需要自定义校验规则，和密码框值一致（可选）

注意：

  1. model 属性绑定 form 数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})

<el-form :model="formModel" >
  1. v-model 绑定 form 数据对象的子属性
<el-input
  v-model="formModel.username"
  :prefix-icon="User"
  placeholder="请输入用户名"
></el-input>
... 
(其他两个也要绑定)
  1. rules 配置校验规则
<el-form :rules="rules" >
    
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位的非空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
  1. prop 绑定校验规则
<el-form-item prop="username">
  <el-input
    v-model="formModel.username"
    :prefix-icon="User"
    placeholder="请输入用户名"
  ></el-input>
</el-form-item>
... 
(其他两个也要绑定prop)

注册前的预校验

需求：点击注册按钮，注册之前，需要先校验

  1. 通过 ref 获取到 表单组件
const form = ref()

<el-form ref="form">
  1. 注册之前进行校验
<el-button
  @click="register"
  class="button"
  type="primary"
  auto-insert-space
>
  注册
</el-button>

const register = async () => {
  await form.value.validate()
  console.log('开始注册请求')
}

封装 api 实现注册功能

需求：封装注册api，进行注册，注册成功切换到登录

  1. 新建 api/user.js 封装
import request from '@/utils/request'

export const userRegisterService = ({ username, password, repassword }) =>
  request.post('/api/reg', { username, password, repassword })
  1. 页面中调用
const register = async () => {
  await form.value.validate()
  await userRegisterService(formModel.value)
  ElMessage.success('注册成功')
  // 切换到登录
  isRegister.value = false
}
  1. eslintrc 中声明全局变量名, 解决 ElMessage 报错问题
module.exports = {
  ...
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

登录功能

实现登录校验

【需求说明】给输入框添加表单校验

  1. 用户名不能为空，用户名必须是5-10位的字符，失去焦点 和 修改内容时触发校验
  2. 密码不能为空，密码必须是6-15位的字符，失去焦点 和 修改内容时触发校验

操作步骤：

  1. model 属性绑定 form 数据对象，直接绑定之前提供好的数据对象即可
<el-form :model="formModel" >
  1. rules 配置校验规则，共用注册的规则即可
<el-form :rules="rules" >
  1. v-model 绑定 form 数据对象的子属性
<el-input
  v-model="formModel.username"
  :prefix-icon="User"
  placeholder="请输入用户名"
></el-input>

<el-input
  v-model="formModel.password"
  name="password"
  :prefix-icon="Lock"
  type="password"
  placeholder="请输入密码"
></el-input>
  1. prop 绑定校验规则
<el-form-item prop="username">
  <el-input
    v-model="formModel.username"
    :prefix-icon="User"
    placeholder="请输入用户名"
  ></el-input>
</el-form-item>
...
  1. 切换的时候重置
watch(isRegister, () => {
  formModel.value = {
    username: '',
    password: '',
    repassword: ''
  }
})

登录前的预校验 & 登录成功

【需求说明1】登录之前的预校验

  • 登录请求之前，需要对用户的输入内容，进行校验
  • 校验通过才发送请求

【需求说明2】登录功能

  1. 封装登录API，点击按钮发送登录请求
  2. 登录成功存储token，存入pinia 和 持久化本地storage
  3. 跳转到首页，给提示

【测试账号】

  • 登录的测试账号: shuaipeng

  • 登录测试密码: 123456

PS: 每天账号会重置，如果被重置了，可以去注册页，注册一个新号

实现步骤：

  1. 注册事件，进行登录前的预校验 (获取到组件调用方法)
<el-form ref="form">
    
const login = async () => {
  await form.value.validate()
  console.log('开始登录')
}
  1. 封装接口 API
export const userLoginService = ({ username, password }) =>
  request.post('api/login', { username, password })
  1. 调用方法将 token 存入 pinia 并 自动持久化本地
const userStore = useUserStore()
const router = useRouter()
const login = async () => {
  await form.value.validate()
  const res = await userLoginService(formModel.value)
  userStore.setToken(res.data.token)
  ElMessage.success('登录成功')
  router.push('/')
}

前端 贾公子
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
13、Vue3 大事件管理系统
m0_51394252的博客
08-28 3824
一、大事件项目介绍 和 创建 1.1 Vue3 大事件管理系统 在线演示： https://fe-bigevent-web.itheima.net/login 接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835 基地址： http://big-event-vue-api-t.itheima.net 1.2 pnpm 包管理器 - 创建项目 一些优势：比同类工具快2倍左右、节省磁盘空
vue3后台管理系统（模板）
热门推荐
落下香樟树
06-07 1万+
系统简介 此管理系统是基于Vite2和Vue3.0构建生成的后台管理系统。目的在于学习vite和vue3等新技术，以便于后续用于实际开发工作中； 本文章将从管理系统页面布局、vue路由鉴权、vuex状态管理、数据持久化、用户信息加密等方面进行介绍和记录； 这也是我边学习边实践的过程，此次记录一是方便自己日后开发过程中有用到时候便于借鉴和复习，再次是为了初学vue3和尝试上手vite2和vue3搭建管理系统的小伙伴提供一些学习方法和技术点； 本Vue后台管理系统使用的技术点主要有：vite2、vue....
vue3大事件管理
weixin_65574176的博客
02-10 1170
一个基于vue3&&element-plus的练手小项目
Vue从入门到实战Day12~14 - Vue3大事件管理系统
ltt159264的博客
05-28 1631
在线演示：https://fe-bigevent-web.itheima.net/login接口文档：https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835基地址：http://big-event-vue-api-t.itheima.net。
vue3全栈后台管理系统
然而
10-26 2521
在routes文件夹下创建users.js文件// 用户管理模块//二级路由try {userName,userPwd,});if (res) {} else {ctx.body = util.fail("账号或密码不正确");});将定义为二级路由 ，通过定义一个login接口，监听try里的参数，通过里查找数据，如果查找成功就直接返回，如果没有查找到，就抛出一个异常在app.js中定义一个一级路由//一级路由通过一级路由定义一个通过router。
前端vue项目,后台新闻管理系统
07-19
在本文中，我们将深入探讨基于Vue的新闻管理系统及其背后的技术栈。Vue.js是一个轻量级、高性能的前端JavaScript框架，以其简洁的API和强大的功能深受开发者喜爱。新闻管理系统作为一个典型的Web应用，它需要处理...
vue+elementUI管理系统，页面源代码
11-10
本项目是基于 Vue2 和 ElementUI 的后台管理系统，主要包含两大部分：`src` 和 `static` 目录。 `src` 目录是项目的主要源代码所在，它是 Vue.js 应用的核心部分。下面详细介绍 `src` 中的主要组成部分： 1. **...
基于vue的管理系统通用型框架
07-07
【Vue.js 管理系统框架详解】 Vue.js 是一个流行的前端JavaScript框架，以其轻量级、组件化和易上手的特点，在Web开发领域中备受推崇。基于Vue的管理系统通用型框架，旨在提供一个可快速搭建后台管理系统的解决方案...
大事件管理系统（vue3）compositionAPI/pinia/pinia持久化处理
05-22
这个名为"Vue3-big-event-admin"的项目就是一个基于Vue3的大事件管理系统，它充分利用了Vue3的最新特性，如Composition API和Pinia状态管理库，来提升开发效率和代码可维护性。让我们详细探讨一下这个系统中的关键...
基于Vue的电商后台管理系统
08-05
在“基于Vue的电商后台管理系统”中，Vue.js 起到了核心作用，构建了一个高效、可维护的管理界面。 1. **Vue.js 的核心特性** - **虚拟DOM**：Vue.js 使用虚拟DOM来提高性能和效率，避免了直接操作DOM带来的性能...
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 325
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
springmvc1
最新发布
benpaodeDD的博客
07-14 154
以前的servlet程序：
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 305
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 207
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Power Apps使用oData访问表数据并赋值前端
weixin_41850878的博客
07-14 233
console.log需要F12打开浏览器开发者工具查看。方法过滤数据时，你可以指定一个OData。方法成功的例子，它使用了OData。在使用OData查询语法通过。参数来限制返回的记录集。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 272
通过sm4对文件进行加解密，用户输入密码
ctfshow-web入门-文件上传（web166、web167）&（web168-web170）免杀绕过
Welcome To Myon'Blog !
07-11 884
查看源码，前端只让传 zip上传 zip 成功后可以进行下载随便搞一个压缩包，使用记事本编辑，在其内容里插入一句话木马：上传该压缩包，上传成功后点击下载文件，使用 burpsuite 抓包：我这里木马内容用的 request ，就在 get 里执行 ls 没什么问题，但是读取 flag 时识别有点问题，最好使用 post 请求，因此将请求方法改为 post ，将 file 的内容还原到上面。
Web 性能入门指南-1.2 分析在线零售 Web 性能及优化方向
weixin_43303603的博客
07-11 444
性能优化入门：分析是什么拖慢了你的页面速度，从图片和第三方到样式表和自定义字体，以及你可以采取哪些措施
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 206
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
vue3 页面套打单据
12-17
vue3是一种流行的JavaScript框架，用于构建用户界面。在vue3中，通过使用组件化的开发方式，我们可以轻松地创建并管理页面的布局和交互。套打单据是指在页面上生成并打印出一种特定格式的单据，比如发票、收据等。在vue3中，我们可以利用其强大的数据绑定和响应式特性，以及灵活的模板语法，来轻松实现页面套打单据的功能。 首先，我们在vue3中可以定义一个单据打印的组件，该组件包含了单据的模板和打印按钮。然后，我们可以利用vue3提供的数据绑定功能，将需要打印的单据数据动态地绑定到模板中，以实现单据的个性化定制。我们还可以利用vue3的计算属性和watcher来监听数据的变化，从而自动更新单据的内容。 此外，vue3还提供了丰富的生命周期钩子函数和事件处理机制，我们可以利用这些功能来在适当的时机触发单据的生成和打印操作。同时，我们还可以通过引入第三方打印库来实现页面套打单据的功能，比如使用html2pdf来将页面内容转换为pdf格式并进行打印。 总之，借助于vue3的强大特性和丰富的生态系统，我们可以轻松地实现页面套打单据的功能，为用户提供更加便捷和个性化的打印体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值