创新实训-角色疆界(2)

最新推荐文章于 2024-07-12 16:27:40 发布

plf3183120048

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量669

点赞数 17

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/plf3183120048/article/details/139886694

版权

登录界面美化

以下是我们的登录页面模板的结构：

<template>
  <div>
    <div class="login-box">
      <h2>登录系统</h2>
      <form>
        <div class="user-box">
          <input type="text" name="" required="" v-model="username">
          <label>邮箱号</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" v-model="password">
          <label>密码</label>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a @click="handleLogin">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          登录
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a @click="signUp_asd">注册 </a>
      </form>
    </div>
  </div>
</template>

以上代码展示了一个简单的登录页面模板，包括输入框和登录、注册的链接。在真实的应用中，我们可以根据这个模板来构建一个完整的登录页面。

以下是一个Vue组件，用于处理用户登录和注册的逻辑：

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      msg: ''
    }
  },
  methods: {
    signUp_asd(){
      this.$router.replace({path: '/signUp'});
    },
    open1() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'warning'
      });
    },
    open2() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'success'
      });
    },
    open3() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'error'
      });
    },

    handleSubmit() {
      let _this = this
      if(this.username===""||this.password===""){
        this.msg = "请输入邮箱密码"
        this.open3()
      }else{
        axios.post('http://localhost:8412/user/userLogin',
            {
              email: this.username,
              password: this.password
            })
            .catch(function (error) {
              console.log(error.response.data.msg)
              _this.msg = "请检查邮箱是否合法"
              _this.open3()
            }).then(function (response) {
          console.log(response)
          if (response.data.code === 200) {
            _this.msg = response.data.msg
            _this.open2()
            //此处开始配置全局
            _this.$store.commit('setUserMsg', {
              id: response.data.data.id,
              email: response.data.data.email,
              username: response.data.data.username
            });
            _this.$store.commit('print');
            _this.$router.replace({path: '/ziti'});
          } else {
            _this.msg = response.data.msg
            _this.open3()
          }
        })
      }
    },
  },
};

signUp_asd 方法: 这个方法用于处理用户点击注册按钮后的跳转逻辑。在这段代码中，this.$router.replace({path: '/signUp'}) 代码片段会触发路由器（Router）导航到 '/signUp' 路径，可能是一个注册页面或者注册功能的实现页面。
open1 方法: 这个方法看起来是用于显示警告类型的消息提示。this.$message({...}) 代码片段通过 Vue 的 Message 组件创建一个带有警告类型消息的提示框，用于向用户展示一些重要信息。

open2 方法显示一个成功类型的消息提示框，其中 type: 'success' 指明了消息的类型为成功。
open3 方法显示一个错误类型的消息提示框，其中 type: 'error' 指明了消息的类型为错误。

根据代码中的handleSubmit()方法，这段代码处理了用户提交登录表单的逻辑。我将逐步解释代码中的各个部分：

首先，通过if条件判断用户是否输入了邮箱和密码。如果其中有一个为空，那么会将msg变量设置为"请输入邮箱密码"，并调用open3()方法显示一个错误提示。
如果邮箱和密码都不为空，那么会通过axios.post()方法向http://localhost:8412/user/userLogin发送登录请求。请求数据包括email和password，分别从Vue组件的username和password属性中获取。
如果请求成功，会执行then方法中的回调函数。首先，通过检查response.data.code的值是否为200来判断登录是否成功。如果成功，会将msg变量设置为response.data.msg，然后调用open2()方法显示一个成功提示。
接下来，在这个成功的分支中，代码使用this.$store.commit()方法将用户的相关信息存储到全局状态管理中。具体来说，它调用了setUserMsg mutation，将用户的id、email和username保存到全局状态中。
然后，通过调用print()方法打印全局状态的内容。
最后，通过this.$router.replace()方法将页面的路由路径设置为"/ziti"，实现页面的跳转。

如果登录失败（即response.data.code不等于200），会将msg变量设置为response.data.msg，然后调用open3()方法显示一个错误提示。

总结：上述代码通过发送登录请求并根据响应结果执行相应的操作，实现了用户登录的功能。如果登录成功，它向全局状态中存储了用户信息，并进行了页面跳转；如果登录失败，则显示了相应的错误提示。

上述CSS代码包含了对登录页面的样式设置。下面是对每个样式属性的解释：

- `background-image: url("https://i.pinimg.com/originals/03/e9/f4/03e9f43d224b666386288b4e7968430c.jpg");`：设置页面的背景图片，使用了指定的图片链接。

- `background-repeat: no-repeat;`：设置背景图片不重复平铺。

- `background-size: 100%;`：将背景图片的大小设置为与容器的大小一致。

- `background-position: 0px -50px;`：设置背景图片的起始位置，`0px`表示水平方向的偏移量为0，`-50px`表示垂直方向的偏移量为-50像素。

- `.login-box`：定义了一个名为`login-box`的CSS类。

- `position: absolute;`：将元素的定位类型设置为绝对定位。

- `top: 50%;`：将元素的上边缘与其包含块的上边缘垂直居中。

- `left: 50%;`：将元素的左边缘与其包含块的左边缘水平居中。

- `width: 400px;`：设置元素的宽度为400像素。

- `padding: 40px;`：设置元素的内边距为40像素。

- `transform: translate(-50%, -50%);`：通过`translate`变形函数将元素在水平和垂直方向上分别向左和向上偏移50%的宽度和高度，实现居中定位。

- `background: rgba(0, 0, 0, .5);`：设置元素的背景颜色为黑色，并设置透明度为0.5。

- `box-sizing: border-box;`：设置盒模型的计算方式为`border-box`，使得元素的宽度和高度包括内边距和边框。

- `box-shadow: 0 15px 25px rgba(0, 0, 0, .6);`：设置元素的阴影效果，具体为水平偏移量为0，垂直偏移量为15像素，模糊半径为25像素，颜色为黑色，并设置透明度为0.6。

- `border-radius: 10px;`：设置元素的边框圆角半径为10像素，使得元素的边框呈现圆角效果。

这些样式的组合和设置使得登录框（`.login-box`）在页面中居中显示，具有黑色的背景、半透明的外观和阴影效果，并且背景图片作为页面的背景以增加视觉吸引力。

这段 CSS 代码定义了登录框中输入框标签（label）的样式，当用户与输入框交互时，label 的位置和外观会有所变化，以提供更好的用户体验。

让我们逐行解释这段代码：

1. `.login-box .user-box label`：选择器 `.login-box .user-box label` 指向登录框内的所有 label 元素。这些 label 元素通常与输入框关联，用于显示输入字段的提示信息。

2. `position: absolute;`：将 label 元素的位置设置为绝对定位，这意味着它相对于其最近的定位祖先元素进行定位。在本例中，label 元素的位置取决于其最近的定位祖先元素，通常是输入框。

3. `top: 0; left: 0;`：将 label 的左上角设置为输入框的左上角。这意味着 label 与输入框紧密相邻，并且不与页面的其他部分重叠。

4. `padding: 10px 0;`：为 label 元素的上下方向添加内边距，具体是上边距为 10px，下边距为 0。

5. `font-size: 16px; color: #fff;`：设置字体大小为 16px 并将其文本颜色设置为白色。

6. `pointer-events: none;`：防止用户通过点击或触摸与这个元素交互。

7. `transition: .5s;`：为 label 元素添加过渡效果，使得其位置变化具有平滑过渡动画，持续时间为 0.5 秒。

下面两行代码描述了当用户与输入框交互时，label 元素的变化：

1. `.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label`：选择器 `.login-box .user-box input:focus ~ label` 和 `.login-box .user-box input:valid ~ label` 分别对应于用户聚焦于输入框或输入框已验证有效的场景。`focus` 和 `valid` 是 HTML 输入框的属性。当输入框获得焦点时，`focus` 属性被设置为 `true`；当输入的内容被验证为有效时，`valid` 属性被设置为 `true`。

2. `top: -20px; left: 0;`：将 label 的位置向上移动 20px，使其远离输入框的位置。这使得用户能够更专注于输入框，且不会被 label 直接干扰。

3. `color: #03e9f4; font-size: 12px;`：为 label 设置新的颜色和字体大小，通常用于在用户与输入框交互时提供更具体的提示信息。

通过这些样式，当用户与输入框进行交互时，label 的显示位置和颜色会有所变化，从而提供更好的用户体验和视觉反馈。

这段 CSS 代码定义了登录框中表单中的超链接样式，包括链接的基本样式以及鼠标悬停时的特效。让我们逐行解释这些样式：

```css
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px;
}
```

- `position: relative;`：将超链接设置为相对定位，这意味着它将相对于其正常位置进行定位，且其子元素可以使用绝对定位进行定位。
- `display: inline-block;`：使超链接表现为内联块级元素，允许其他元素在旁边显示。
- `padding: 10px 20px;`：设置超链接的内边距，上下为 10px，左右为 20px。
- `color: #03e9f4;`：设定链接的文本颜色为 #03e9f4。
- `font-size: 16px;`：设定链接的文本大小为 16px。
- `text-decoration: none;`：去掉链接的下划线样式。
- `text-transform: uppercase;`：将链接文本转换为大写字母形式。
- `overflow: hidden;`：如果链接内容超出容器的部分将被隐藏。
- `transition: .5s;`：设置鼠标悬停时的过渡效果时长为 0.5 秒。
- `margin-top: 40px;`：设置链接顶部的外边距为 40px。
- `letter-spacing: 4px;`：设置字母间距为 4px。

```css
.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}
```

- `background: #03e9f4;`：当鼠标悬停在超链接上时，设置超链接的背景颜色为 #03e9f4。
- `color: #fff;`：当鼠标悬停在超链接上时，设置链接的文本颜色为白色。
- `border-radius: 5px;`：设定圆角边框半径为 5px。
- `box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;`：为超链接添加辉光效果，即鼠标悬停时将出现渐变阴影。

```css
.login-box a span {
position: absolute;
display: block;
}
```

- `position: absolute;`：将 span 元素的定位设置为绝对定位，使其相对于其最接近的已定位祖先元素进行定位。
- `display: block;`：将 span 元素设置为块级元素，使其在页面布局中独占一行。

通过以上样式，登录框中的超链接在鼠标悬停时会出现背景和辉光效果，提高了用户体验并增加了交互效果。

plf3183120048

关注

17
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
创新实训-角色疆界(2)

1. `.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label`：选择器 `.login-box .user-box input:focus ~ label` 和 `.login-box .user-box input:valid ~ label` 分别对应于用户聚焦于输入框或输入框已验证有效的场景。`：设置盒模型的计算方式为`border-box`，使得元素的宽度和高度包括内边距和边框。
复制链接

扫一扫