1、创造好login页面,将以下代码放到里面
<template> <!-- 登录页面的整体盒子 --> <div class="login-container"> <!-- 登录的盒子 --> <div class="login-box"> <!-- 标题的盒子 --> <div class="title-box"></div> <!-- 登录的表单区域 --> <el-form :model="loginForm" :rules="loginRules" ref="loginRef"> <!-- 用户名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名" maxlength="10" minlength="1"></el-input> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" maxlength="15" minlength="6" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" class="btn-login">登录</el-button> <el-link type="info">去注册</el-link> </el-form-item> </el-form> </div> </div> </template> <script> export default { name: 'my-login', data () { return { // 登录表单的数据对象 loginForm: { username: '', password: '' }, // 登录表单的验证规则对象 loginRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的字母数字', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' } ] } } } } </script> <style lang="less" scoped> .login-container { background: url('../../assets/images/login_bg.jpg') center; background-size: cover; height: 100%; .login-box { width: 400px; height: 270px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 30px; box-sizing: border-box; .title-box { height: 60px; background: url('../../assets/images/login_title.png') center no-repeat; } .btn-login { width: 100%; } } } </style>
2、标签的结构
3、下面最大是10个,最小是1个
4、
5、这里跳转路径
6、登录页面也一样
7、配置一个去登录页面的路由
8、点击去注册页面和登录页面可以实现跳转
9、登录页面实现跳转切换
10、必须写到date里
11、表单校验的写法
12、效果展示
13、写一个类型
14、表单的校验
15、因为有规则,所以里面1-10的内容可以去掉
16、绑定点击事件
17、绑定点击事件,方法在我的method中
18、否则没通过return false
19、让我们去测试一下
20、写一点,我们测试一点
21、我要调用axios里的接口,我要在哪里写
22、看一下接口文档
23、请求参数是什么?
24、变量会到这里来
25、外面得传
26、写完方法之后,引入到登录页面
27、把收集的数据传给方法,res 就有了结果我们保存到这个变量上
28、JSDOC的注释,写/**
29、axios返回的结果,返回了一个结果对象
30、后台真正的数据是在date里面
31、之前的key没有匹配成功,打印了一长串,现在运用结构赋值,就能够实现匹配
32、这是框架里的提示
33、成功登入,失败不能登录的写法
34、这个验证是在后端验证的,java代码验证的
35、登录功能的实现