uni-appD2（uni-forms学习与回顾）1.使用uni中的uni-forms组件其中使用v-model获取数

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中）

2.5 配置请求拦截器---为了带上token

实现思路：导入先前的useUserStore方法，再Authorization：userState.token就可以实现带上全局公共头部信息了

2.5.2以上已经将authoriztion定义好了，但是要与options做一个合并，因为options才是用来进行请求的，

使用Object.assign方法将括号中的三个参数对象进行合并

3 响应拦截器

场景：用户没登录或者用户登录过期：响应拦截器 查看状态是不是401，如果是（表明登录未登录或者登录失效），就直接跳转到登录页

3.1为了优化体验，用户登录后要回跳地址

使用getcurrentpages（）方法
页面栈：页面栈是一个数组，页面栈中放的是已经打开的页面页面栈的最后一个单元就是当前页面
思路讲解： 拦截器是判断是否为登录状态，如果否，则被拦截，从页面栈中取出url，注入到url中，作为参数注入到login的url跳转到登录页面，登录页面再通过生命周期获取到跳转来的url，登录成功后再跳回去。 vue框架中要获取地址参数要用到生命周期