【Vue】登录注册界面制作

最新推荐文章于 2024-06-18 19:29:11 发布
最新推荐文章于 2024-06-18 19:29:11 发布
阅读量2.7k 收藏 53
点赞数 22
分类专栏： Vue 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67930426/article/details/134895214
版权

1. 创建vue项目

https://blog.csdn.net/m0_67930426/article/details/134816155?spm=1001.2014.3001.5502

2. 整合element-ui

https://blog.csdn.net/m0_67930426/article/details/134827986?spm=1001.2014.3001.5502 

 

在view目录下创建文件

本篇内容使用到了 v-model   @click   指令

具体用法可以参考 

https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5502

目录

Login.vue

Registery.vue

知识集锦 

el-form的model属性

el-from-item 的 prop 属性 

el-form的rules属性

el-form的ref属性

prefix-icon

show-password

表单校验

Login.vue中的

1. 

2.

3.

 

Login.vue

<template>
  <div class="login">
    <div  class="login-form"
            style="margin: 200px auto; background-color: #fff; width: 350px; height: 280px; padding: 20px; border-radius: 10px">
      <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>登 录</b></div>

      <el-form :model="user" :rules="rules" ref="userForm">

        <el-form-item prop="username">
          <el-input size="medium" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input size="medium" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
        </el-form-item>

        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/register')">注册</el-button>
          <el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import { setRoutes } from '@/router'

export default {
  name: 'Login',
  data () {
    return {
      user: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.userForm.validate((valid) => {
        if (valid) { // 表单校验合法
          this.request.post('/user/login', this.user).then(res => {
            if (res.code === '200') {
              localStorage.setItem('user', JSON.stringify(res.data)) // 存储用户信息到浏览器
              localStorage.setItem('menus', JSON.stringify(res.data.menus)) // 存储用户信息到浏览器
              // 动态设置当前用户的路由
              setRoutes()
              this.$message.success('登录成功')

              if (res.data.role === 'ROLE_STUDENT') {
                this.$router.push('/front/home')
              } else {
                this.$router.push('/')
              }
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

  .login {

    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    background: azure url('../assets/img.png') no-repeat fixed;
    background-size: 100% 100%;
  }

  .login-form {
    height: 350px;
    width: 600px;
    box-sizing: border-box;
    background-color: #fff;
    opacity: 0.8;
    padding: 20px 50px;
  }

</style>

Registery.vue

<template>
  <div class="wrapper">
    <div style="margin: 150px auto; background-color: #fff; width: 350px; height: 350px; padding: 20px; border-radius: 10px">
      <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>注 册</b></div>
      <el-form :model="user" :rules="rules" ref="userForm">
        <el-form-item prop="username">
          <el-input placeholder="请输入账号" size="medium" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" size="medium" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input placeholder="请确认密码" size="medium" prefix-icon="el-icon-lock" show-password v-model="user.confirmPassword"></el-input>
        </el-form-item>
        <el-form-item style="margin: 5px 0; text-align: right">
          <el-button type="primary" size="small"  autocomplete="off" @click="login">注册</el-button>
          <el-button type="warning" size="small"  autocomplete="off" @click="$router.push('/login')">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    return {
      user: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    login () {
      this.$refs.userForm.validate((valid) => {
        if (valid) { // 表单校验合法
          if (this.user.password !== this.user.confirmPassword) {
            this.$message.error('两次输入的密码不一致')
            return false
          }
          this.request.post('/user/register', this.user).then(res => {
            if (res.code === '200') {
              this.$message.success('注册成功')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      });
    }
  }
}
</script>

<style>
  .wrapper {
    height: 100vh;
    background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB);
    overflow: hidden;
  }
</style>

 

点击注册

 

知识集锦 

el-form的model属性

 

el-from-item 的 prop 属性 

el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致

el-form的rules属性

校验规则

 此处对应的是

 

el-form的ref属性

表单验证

此处对应

 

prefix-icon

图标显示

 

 element-ui

https://element.eleme.cn/#/zh-CN/component/icon

show-password

输入密码的时候会隐藏起来

对比一下不使用show-password

 

 

通过对比效果一目了然

表单校验

Login.vue中的

 methods: {
    login () {
      this.$refs.userForm.validate((valid) => {
        if (valid) { // 表单校验合法
          this.request.post('/user/login', this.user).then(res => {
            if (res.code === '200') {
              localStorage.setItem('user', JSON.stringify(res.data)) // 存储用户信息到浏览器
              localStorage.setItem('menus', JSON.stringify(res.data.menus)) // 存储用户信息到浏览器
              // 动态设置当前用户的路由
              setRoutes()
              this.$message.success('登录成功')

              if (res.data.role === 'ROLE_STUDENT') {
                this.$router.push('/front/home')
              } else {
                this.$router.push('/')
              }
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }

1. 

 if (valid)

 如果表单校验合法，就执行下一步

这里的表单校验合法是指

这一部分校验通过

2.

this.request.post('/user/login', this.user).then(res =>

这里的 ' /user/login ' 对应后端控制层里的登录接口 

this.user  即在input 输入的账号和密码

总的来说，使用request.post方法向后端发送请求，并提交表单数据

3.

  if (res.code === '200') {

http请求成功的响应值

请求成功，执行后面的操作

例如，将用户信息存储到浏览器

 

freedomSTUDENT
关注
  • 22
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vuejs实现用户登录注册及评论功能代码
04-28
vuejs实现用户登录注册及评论功能代码,可编辑修改用户部分信息。
Vue之ElementUI实现登陆及注册
weixin_74352229的博客
09-25 6176
ElementUI 是一个基于Vue.js的前端 UI 框架。它提供了丰富的可复用组件，使开发者可以快速构建现代化的 Web 应用程序界面。ElementUI 的组件库包括按钮、输入框、表格、弹窗、导航菜单等常用组件，同时还提供了一些高级组件如日期选择器、时间选择器、下拉框等。ElementUI 具有高度的定制性和扩展性，开发者可以根据自己的需求进行定制和拓展。它的简洁美观的设计风格得到了广大开发者的喜爱，广泛应用于各种 Web 项目中。
Vue的登录注册页面
weixin_42576467的博客
02-15 484
Vue是一个流行的JavaScript框架，可以用于开发前端应用程序。在Vue中，可以使用组件来构建登录注册页面。 对于登录页面，可以创建一个组件，包含输入用户名和密码的表单，并在表单提交时向服务器发送请求以进行身份验证。如果身份验证成功，可以将用户重定向到应用程序的主页，否则可以向用户显示错误消息。 对于注册页面，可以创建另一个组件，包含输入用户名、密码和其他必需信息的表单。当表单提交时，可以将...
【第17章】Vue实战篇之注册界面
最新发布
zjg
06-18 1013
注册界面搭建数据绑定表单校验调用后端接口//用于注册的数据模型})//自定义确认密码的校验函数callback(new Error('请再次确认密码'))callback(new Error('两次输入密码不一致'))} else {callback()//用于注册的表单校验模型{ required: true, message: '请输入用户名', trigger: 'blur' },
Vue实战篇一： 使用Vue搭建注册登录界面
热门推荐
我的博客
10-20 9万+
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
用vue实现编写登录注册页面
weixin_42589700的博客
02-12 3028
Vue 是一个用于构建用户界面的框架，它可以帮助您实现登录注册页面的开发。下面是实现此功能的一些基本步骤： 安装 Vue CLI：首先，您需要在您的计算机上安装 Vue CLI，这是 Vue 开发环境的命令行界面。 创建项目：使用 Vue CLI 创建一个新项目，您可以使用以下命令： vue createmy-project 创建组件：在您的项目中创建两个新组件，一个登录组件和一个注册...
Vue开发实例（20）之实现登录功能
编程界明世隐的博客
05-29 3万+
Vue开发实例（20）之实现 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！ 导航 ✪  Vue开发实例目录总索引 ◄ 上一篇【19】用户列表分页的实现 ► 下一篇【21】待更新 实现最简单的登录功能
vue实现登录注册页
wzsrlndm的博客
09-28 1万+
2.注册效果代码展示 <template> <div class="login-section"> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="rulesForm" status-icon ref="ruleForm" > ...
Vue案例详解(七):制作登录页面
柳老师的博客
07-08 5119
本篇文章写于2023年7月8日,使用的包和工具基本上都是最新的(Vue3, VS code),如果你查看的时间比较晚,请注意版本的区别.前面几篇文章介绍了Vue的使用,项目的搭建和一些基本信息.Vue3案例详解(一)_flame.liu的博客-CSDN博客Vue3案例详解(二)_flame.liu的博客-CSDN博客Vue3案例详解(三)_flame.liu的博客-CSDN博客Vue3案例详解(四)_flame.liu的博客-CSDN博客Vue3案例详解(五)_flame.liu的博客-CSDN博客。
少女风vue组件库的制作全过程
10-17
首先，组件库的创建基于Vue.js框架，它是一个UI界面构建的基础，能够帮助开发者快速搭建用户界面，提高开发效率。 1. **组件设计与开发** - 开发过程中会频繁使用Vue的API，例如`$children`和`$parent`用于获取...
使用vue制作简易记事本
08-04
对于这个简易记事本，我们可能需要一个UI库来快速构建界面。Element UI是一个流行的选择，它为Vue提供了许多预先设计的组件。安装它： ```bash cd simple-notepad npm install element-ui --save ``` ### 3. 引入...
jQuery、Vue制作京东商城.zip
03-16
本商城系统包括主页面、购物车、商品详情、登录注册、配送地址页面。实现功能有 1.轮播 2.ajax实现三级联动 3.图片放大镜 4.Vue实现购物车 5.大体包括常用的标签属性，能够让你对前端有更深刻的认识
Vue制作在线文章管理系统.zip
06-14
在"Vue制作在线文章管理系统.zip"这个项目中，开发者利用Vue 2.0版本结合Element UI库来构建了一个功能完善的系统，包括会员管理和图书管理等模块。 首先，`main.js`是Vue项目的入口文件，它负责初始化Vue实例并...
精美大气的左右过渡切换登录注册界面模板
07-14
在登录注册界面，这样的设计能够使用户在保持视觉连续性的同时，轻松地在登录和注册表单之间切换，而无需加载全新的页面。 这个模板可能包含以下组件和功能： 1. 登录表单：通常包括用户名/邮箱输入框、密码输入框...
用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】
m0_67265464的博客
03-10 2万+
文章目录 前言 一、页面的简单实现 1.登录页面 2.注册页面 3.主页（显示个人信息） 二、逻辑实现 1.localStorage的使用 2.功能实现 登录 注册 主页 路由配置文件 总结 前言 本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现，css还在努力学习中，所以界面做的很丑lol 要求： 1.三个页面，登录页面Login，注册页面Register，主页Home 2.用route路由实现不同页面逻辑跳转 3.登录状态 打开网页时，不论输入的路
【Vue作业]---Vue登录注册界面
coding加油站
07-01 1万+
vue作业，vue登陆，vue登录，简单作业，简单vue作业
笔记之vue实现登录与注册功能
qq_45217161的博客
04-12 3559
else {next()})state: {user: null},},actions: {},},})<template></div><script></script>现在运行 `npm run serve` 启动项目，即可访问 http://localhost:8080 进行登录注册操作。
Vue创建注册页面
qq_52335038的博客
10-02 1万+
一、需求： 开发注册页面，对输入账号和昵称进行判空处理，两次密码判断是否相同，注册成功后进入到首页 二、删除一些不需要的组件 1：删除scr/views/下的About.vue和Home.vue 2.把App.vue还原成下图： <template> <div id="app"> <router-view /> </div> </template> <style lang="less"> <
快速上手vue的登录界面(最新版)
呼啦啦啦啦啦的博客
07-22 3万+
快速上手vue的登录界面(最新版)
帮我做一个简单的vue登陆界面
05-26
好的，以下是一个简单的Vue登录界面的代码示例： ``` <template> <div class="login-container"> <h2>用户登录</h2> <form> <div class="form-group"> <label for="username">用户名：</label> <input type="text" id="username" v-model="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码：</label> <input type="password" id="password" v-model="password" placeholder="请输入密码"> </div> <div class="form-group"> <button type="button" @click="login">登录</button> </div> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 在这里编写登录逻辑 console.log(`用户名：${this.username}，密码：${this.password}`); } } } </script> <style scoped> .login-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } form { display: flex; flex-direction: column; align-items: center; margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 5px; } .form-group { display: flex; flex-direction: row; align-items: center; margin: 10px 0; } label { font-size: 16px; margin-right: 10px; } input { padding: 5px; border-radius: 5px; border: none; outline: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); font-size: 16px; } button { padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } </style> ``` 这个代码示例中，我们使用了Vue的单文件组件形式，包含了模板、脚本和样式。其中，模板中定义了登录界面的HTML结构，脚本中定义了数据和方法，样式中定义了界面的样式。 在这个示例中，我们使用了Vue的数据绑定功能，将表单中的用户名和密码与组件中的数据进行绑定。当用户输入用户名和密码后，我们在登录按钮的点击事件中，可以获取到输入框中的数据，然后进行登录逻辑的处理。 当然，这个示例只是一个简单的登录界面，实际开发中，你需要根据具体需求进行功能的扩展和优化。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值