1.使用uni中的uni-forms组件
其中使用v-model获取数据
<script setup>
// 引入ref或者reactive
// ref和reactive的区别:reactive不能重新赋值
import { reactive } from 'vue';
// 定义表单中的数据
*3.使用reactive保存数据*
const formData = reactive({
account: '',
password: ''
});
</script>
<template>
**1.使用uni-foms表单**
**4.绑定formData**
<uni-forms class="login-form" ref="form" :model="formData">
** 2.使用uni-forms-item**
<uni-forms-item name="name">
<input type="text" v-model="formData.account" placeholder="请输入账号" class="uni-input-input" placeholder-style="color: #818181" />
</uni-forms-item>
<uni-forms-item name="name">
<input type="text" v-model="formData.password" placeholder="请输入密码" class="uni-input-input" placeholder-style="color: #818181" />
</uni-forms-item>
<button class="submit-button">登录</button>
</uni-forms>
</template>
<style lang="scss" scoped>
@import './styles.scss';
</style>
2.表单验证
2.1 表单字段
2.2 定义校验规则
// 定义验证规则
const accountRlues = reactive({
account: [
// 可定义多个验证规则
// requierd表示这个数据项必填
{ required: true, erroMessage: '请输入登录账号' },
// 使用正则进行字母数字下划线的处理
{ pattern: '^[a-zA-Z0-9]{6,8}$', erroMessage: '登录账号格式不正确' }
]
});
2.3 触发验证
定义一个accountForm=ref=> uni-forms组件绑定accountForm,实现将uni-forms这个组件的实例发放入accountForm中，便于后续使用validate（）=> 给登录按钮绑定一个onsubmitForm函数，onsubmitForm中写validate（）=> 点击onsubmitForm，触发校验
<script setup>
// 引入ref或者reactive
// ref和reactive的区别:reactive不能重新赋值
import { reactive, ref } from 'vue';
// 1. 定义获取表单元素的变量
// 模板里 <uni-forms ref="accountForm"> 会在组件挂载后把真实的 <uni-forms>
// 实例塞进 accountForm.value。
// → 目的：待会儿好调用它暴露的 validate() 方法。
const accountForm = ref();
// 定义表单中的数据
const formData = reactive({
account: '',
password: ''
});
// 定义验证规则
const accountRlues = reactive({
account: {
rules: [
// 可定义多个验证规则
// requierd表示这个数据项必填
{ required: true, erroMessage: '请输入登录账号' },
// 使用正则进行字母数字下划线的处理
{ pattern: '^[a-zA-Z0-9]{6,8}$', errorMessage: '登录账号格式不正确' }
]
},
password: {
rules: [
// 可定义多个验证规则
// requierd表示这个数据项必填
{ required: true, erroMessage: '请输入登录密码' },
// 使用正则进行字母数字下划线的处理
{ pattern: '^[a-zA-Z0-9]{6,8}$', errorMessage: '登录密码格式不正确' }
]
}
});
// 4.提交表单数据
// 点击登录按钮 → 执行 onSubmitForm()。
// accountForm.value 就是第 1 步拿到的 <uni-forms> 实例；调用它暴露的 validate() 方法。
// validate() 内部会：
// 遍历所有 <uni-forms-item>；
// 根据 name 找到对应 rules；
// 用 async-validator 按顺序跑规则（required → pattern …）；
// 任一规则失败：
// 把 erroMessage 显示在对应项底部（默认红字）；
// 返回 false 并中断后续规则；
// 全部通过：继续走提交逻辑（这里你没写后续，通常发请求）。
//当验证成功后所返回的数据位表单中的数据，这些数据用于表单提交
aysnc function onSubmitForm() {
// 对表单数据进行验证(validate是uni-form提供的方法名)
const formData= await accountForm.value.validate();
console.log(formData)
}
</script>
<template>
<!-- 2.将accountForm绑定至表单 -->
<!-- <uni-forms-item> 的 name 必须和 rules 里的 key 保持一致（account/password）。 -->
<uni-forms class="login-form" :rules="accountRlues" ref="accountForm" :model="formData">
<uni-forms-item name="account">
<input type="text" v-model="formData.account" placeholder="请输入账号" class="uni-input-input" placeholder-style="color: #818181" />
</uni-forms-item>
<uni-forms-item name="password">
<input type="text" v-model="formData.password" placeholder="请输入密码" class="uni-input-input" placeholder-style="color: #818181" />
</uni-forms-item>
<!-- 3.监听按钮 -->
<button @click="onSubmitForm" class="submit-button">登录</button>
</uni-forms>
</template>
<style lang="scss" scoped>
@import './styles.scss';
</style>
2.4 调用登录的接口
封装接口
2.4.1 在apis/user.js中封装接口
// 引入uni-fetch 进行请求的发起
import { UniFetch } from "uni-app-fetch";
// 导出函数方法一
// export const xxx=()=>{
// }
// // 导出方法二：也可以以对象的格式
// export default{
// xxx:()=>{
// }
// }
// 1.定义调用方法
export default{
// @param {Object} data -登录所需要的用户密码
login(data){
if(!data.account || data.password) return
用我事先封装好的 `uni-fetch` 拦截器实例，向 **基础地址 + /driver/login/account** 发一个 **GET** 请求，并把 `data` 里的字段自动拼到 URL 查询串上，同时带上统一设置的请求/响应拦截逻辑。”
UniFetch.get('/driver/login/account',data)
}
}
2.4.2 调用封装好的接口
2.4.3 使用user.js（pinia技术）储存用户相关的数据
import { defineStore } from 'pinia'
// 使用ref定义一个响应式数据
import { ref } from 'vue'
// 三个参数,一个为counter,一个为箭头函数
export const useUserStore
Store = defineStore('user',
// 第二个参数:函数
() => {
// 定义一个数据 token:用来记录用户登录状态
const token = ref('')
// 定义的数据必须return
return { token } {
// 导出
persist: {
paths: ['token']
}
})
引入userUseStore并调用方法
直接修改（让data赋值存入到pinia中）
