使用Vuetify构建登录系统的UI并实现表单验证——experiment4_vuetify登录

• 本章内容基于experiment3
• 本章学习：

1. 使用Vuetify组件设计界面
2. 练习对表单数据进行验证

一、Vuetify

什么是vuetify?
自 2014 年首次发布以来，vue.js已经发展成为世界上最受欢迎的JavaScript框架之一。这种受欢迎的原因之一是广泛使用组件这使开发人员能够创建要在整个应用程序中使用和重用的小模块。Vuetify 是预制组件的集合，具有强大的功能，例如动态主题、全局默认值、应用程序布局等等。其目标是为开发人员提供所有必要的工具，以构建丰富且引人入胜的用户体验。

二、使用Vuetify构建登录系统的UI并实现表单验证

1. 安装

① 用VS打开experiment3创建的项目文件夹，打开终端。
② 在终端中输入命令：pnpm add vuetify@^3.1.6 mosha-vue-toastify
该命令会在当前项目中安装Vuetify的3.1.6版本和一个显示短消息的插件Toastify。
③ 安装Material Icon图标库：pnpm add material-design-icons-iconfont -D
Material Icon图标库中的图标样式可以通过这个网站查看：https://www.adminpub.com/tools/materialicons
④ 添加对Vuetify的全局引用和对Toastify、Material Icon的样式文件的全局引用
在App.vue中添加相关代码：这一部分可以在vuetify文档的安装目录下查看到:https://vuetifyjs.com/en/getting-started/installation/

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import 'mosha-vue-toastify/dist/style.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
// 全局引入Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, md } from 'vuetify/iconsets/md'
const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'md',
    aliases,
    sets: {
      md,
    }
  },
})
createApp(App).use(vuetify).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2. 代码设计

① 样式

删除UserLoign.vue中style元素的样式定义，修改main.css，本实验中使用vue的样式类设置界面样式。
main.css代码如下：

body {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
1
2
3
4
5
6
7
8
9

② 使用Vuetify构建登录系统的UI

官方文档：https://vuetifyjs.com/en/getting-started/release-notes

v-container 提供了将你的网站内容居中和水平填充的功能。 你还可以使用 fluid 属性将容器在所有视口和设备尺寸上完全扩展。 保持了之前 1.x 的功能，其中属性作为 v-container 上的类进行传递，以使应用辅助类（如 ma-#/pa-#/fill-height）生效
容器：业务需要的元素 都应该放在v-container容器里面。然后再该标签class 里面，使用vuetify提供的样式布局、排版等
	v-card 
	v-card 组件是一个可用于从面板到静态图像的多功能组件。 卡组件有许多帮助程序组件来尽可能简单地进行标记。 没有列出选项的组件使用Vue的功能组件来更快渲染并充当标记糖以使建筑变得更加容易。
	在card组件下，我们可以使用它的基本组件。
		v-card-title
		为卡片的大标提供了默认的字体大小和填充排版。 字体大小可以使用文本和排版中的文字排版属性进行调整。
			v-card-text
			主要用于显示卡片中的文本内容。 它使卡片中的文本能够进行填充排版，并将字体大小减小至 .875rem 的大小。
				v-form 
				 v-form 组件使得很容易添加验证到表单输入。 所有输入组件都有一个 规则 prop，它接受不同类型的组 函数, 布尔值 和 字符串。 这些允许您指定输入无效的 __ 或 __ 的条件。 每当输入值被更改时，数组中的每个函数将收到新的值，每个数组元素将被评分。 如果函数或数组元素返回 fals 或 字符串, 验证失败， 字符串 值将作为错误信息显示。
				 	v-text-field
				 	文本框组件用于收集用户提供的信息。
				 	v-row
				 	使用 flex 属性来控制其内栏的布局和流。 它使用的是 24px 的标准间隔。 
				 		v-btn
				 		按钮。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Vuetify的v-form组件（参见：https://vuetifyjs.com/en/components/forms）替换原来的form元素，使用v-text-field组件替换原来的input元素，使用v-btn组件（参见：https://vuetifyjs.com/en/components/buttons）替换原来的button元素。修改后的<template>的代码如下所示：
到这里也许代码会报错，但没关系，因为我们有一些东西还没完善。

<template>
  <v-container class="h-100  d-flex align-center justify-center">
    <v-card width="500">
      <v-card-title>用户登录</v-card-title>
        <v-card-text class="pa-8">
          <v-form ref="form">
             <v-text-field variant="underlined" v-model="username" required
                        :counter="20"
                        label="账号"
                        prepend-icon="person"
                        :rules="usernameRules"  
            ></v-text-field>
             <v-text-field variant="underlined" v-model="password" required
                        :counter="20"
                        label="密码"
                        prepend-icon="lock"
                        type="password"
                        :rules="passwordRules"
            ></v-text-field>
            <v-row class="mt-5">
              <v-btn class="ml-5" @click="handleLogin">提交</v-btn>
              <v-btn class="ml-5" @click="reset">复位</v-btn>
            </v-row>
          </v-form>
        </v-card-text>
    </v-card>
  </v-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

③ 表单验证

在src下新建hooks目录，在该目录下新建useValidRule.ts文件，在该文件中定义可以在多个组件中复用的Vuetify的表单验证规则（参见：https://vuetifyjs.com/en/components/forms），内容如下：

import {ref} from "vue"

export const usernameRules = ref([

    (v: string) => !!v || '必须输入账号!',

    (v: string ) => (v && v.length <= 20 && v.length >= 3) || '账号的长度为3到20个字符!',

])

export const passwordRules = ref([

    (v: string) => !!v || '必须输入密码!',

    (v: string ) => (v && v.length <= 20 && v.length >= 8) || '密码的长度为8到20个字符!',

])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

另外，还修改mock下index.ts中定义的密码，使其长度符合验证规则的要求。

④ 业务逻辑实现

这一部分主要是按钮事件处理。在本章中我们要处理的有复位按钮和提交按钮。
  提交按钮的事件处理handleLogin()在上一章节的时候我们已经定义了，本章节中添加了一个验证判断，以及我们需要用Toastify来显示登录结果。

  复位按钮处理事件处理，在官方文档中我们可以看到，v-form组件中提供了数据清除的方法，这里我们使用组件功能。

但是在Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，那就是getCurrentInstance，该方法返回了当前的实例对象。
要注意的是getCurrentInstance只在 setup、生命周期函数中有效，在方法中是无效的。

实现代码如下：

<script lang="ts" setup>

import {onMounted, ref, getCurrentInstance} from 'vue';
import {login} from '@/api/user'
import {createToast} from "mosha-vue-toastify";
import { passwordRules,usernameRules } from '@/hocks/useValidRule';
 
const username = ref('')
const password = ref('')
const handleLogin = async () => {
  const {valid} = await instance.ctx.$refs.form.validate()
  if (valid) {
    if (username.value == '' || password.value == '') {
      createToast('用户名或密码不能为空！', {position: 'top-center', showIcon: true})
    } else {
      try {
        const res = await login({username: username.value, password: password.value})
        createToast(res.data.msg, {position: 'top-center', showIcon: true})
      } catch (e) {
        alert(e)
      }
    }
  }
}

let instance: any

onMounted(() => {
  instance = getCurrentInstance()
})
const reset = () => {
  instance.ctx.$refs.form.reset()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

三、参考资料

Vue 3官方网站：https://cn.vuejs.org
Vuetify界面设计框架：https://vuetifyjs.com/en/getting-started/release-notes

使用Vuetify构建登录系统的UI并实现表单验证.zip