day_04:vue完成的响应式编程与表单校验_软件测试开发平台日记

北漂的一枚测试程序猿

已于 2024-11-01 14:29:25 修改

阅读量746

点赞数 11

文章标签： vue.js 前端 javascript

于 2024-10-31 13:54:28 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66359818/article/details/143391327

版权

一、组合式API的含义

Vue组合式 API 是一种在 Vue 3 中用于编写组件逻辑的方式，它允许开发者通过将相关功能的代码组合在一起来创建更灵活、可复用且易于理解和维护的组件逻辑，取代了 Vue 2 中基于选项的 API 模式。

有种情况就是，我做了某个操

作，页面的某个组件会伴随我的这个操作去变化( 操作可以是点击，拖动，双击等等.. )

这样的操作就被称之为 响应式API , 而组合式API里面就包含了响应式AP的概念

响应式API，我们要注意两个内容，ref()和 reactive()

第一个概念 ref ：

举例：我们假设，在addcount 里需要前端函数变化，从而让我们的数据一起变化

<template>
   <el-button class="bg-blue-300" @click="addCount">{{ count }}</el-button>
</template>

<script setup>
import { ref} from "vue"  
//可以被响应的对象
// 基础数据类型
let count = ref(1)

function addCount(){
    //如果它是一个ref对象，只需要修改掉对象里面的value，那么它就可以直接被页面响应
    // 响应式API
    console.log(count)
    count.value++
    // count++
    // console.log(count)
}
  
</script>

注意一个问题，页面的template会自动解析ref的value ，所以不需要去在引用ref.vuale了

效果展示：

第二个概念reactive：

使用reactive注意下：用不了基础的数据类型 int ,bool.. 它是用来处理对象的,例如字典,map

const form = reactive({count:2})
function addCount2(){
  console.log(form)
  form.count++
}

同时页面添加个按钮

 <el-button @click="addCount2" class="bg-blue-400">{{ form.count }}</el-button>

效果展示：

二、编写登录页面

首先了解数据校验参考内容：参考地址

1、在 el-form表达加入 :rules=""规则；注意，这个el-form表单是你的控件所在的区域表示启用规则

<el-form ref="formRef" :model="form" class="w-[250px]" :rules="rules">



// 这里要注意，这个rules指的是script标签下的规则对象，语法格式如下：

const rules ={
  //第一步 表单上加入 :rules = rules 表示启用script 里面的规则，第二个rules就是我们自己定义的规则
  //第二步 在要校验的组件上 写prop = 
  //这里的username与password与from定义的内容一致
  username:[
  { required: true, message: '用户名不能为空！', trigger: 'blur' },
  { min: 3, max: 15, message: '用户名长度必须在3到15之间', trigger: 'blur' },
  ],
  password:[
  { required: true, message: '密码不能为空！', trigger: 'blur' },
  { min: 6, max: 18, message: '用户名长度必须在6到18之间', trigger: 'blur' },
  ]
}

2、在你要的组件上加入 prop=“规则的key” 我们的用户名密码输入框都是 el-form-item包裹的所以在这里加入

3、在rules里面的元素中，加入需要校验的东西，校验内容可以有多个

页面修改如下：注意自己的缩进

        <!--01 添加规则 :rules="rules"-->
        <el-form ref="formRef" :model="form" class="w-[250px]" :rules="rules">
          <!--02添加prop-->
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名">
              <template #prefix>
              <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <!--03添加prop-->
          <el-form-item prop="password">

最后一步，给按钮加上校验逻辑, 我们点击按钮后，需要瞬间得到页面响应

第一 : 确认我们要校验的数据 ,我们需要定义好 ref的名字，这里就可以与表单关联起来。

第二：在 el-form 上，我们可以命名 ref = “formRef” 从而通过变量名与我们form来绑定在script标签中

与表单绑定，这里直接使用ref = formRef 因为变量名相同，所以我们就可以获取到表单接下来校验通过进行跳转

<el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]" >

const formRef = ref(null)
import { useRouter } from "vue-router";

const router = useRouter()

const onSubmit = () => {
  //响应式
  formRef.value.validate((valid)=>{
    if(!valid){
      console.log("校验不通过")
      return false; //前端，如果不想让代码继续向下执行了，直接return false
    }
    console.log("校验通过!")
    router.push("/")
    
    
  })
};

完整登录页面的代码：

<template>
    <!-- 使用 style 属性，确保整个屏幕高度 -->
    <el-row class="min-h-screen bg-indigo-400">
    <!-- <el-row style="min-height: 100vh; background-color: #4F46E5;">  -->
      <el-col :lg="16" :md="12" class="flex items-center justify-center flex-col">
        <div class="fout-bold text-5xl text-light-50 mb-4">欢迎光临</div>
        <div class="text-light-50">这个站点是我们的王振洋测试开发平台</div>
      </el-col>

      <el-col :lg="8" :md="12" class="bg-indigo-50 flex items-center justify-center flex-col">
        <h2 class="fout-bold text-3xl text-gray-800">欢迎回来</h2>
        <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
          <span class="h-[1px] w-16 bg-gray-300"></span>
          <span>账户密码登录</span>
          <span class="h-[1px] w-16 bg-gray-300"></span>
        </div>

        <!--这里的w-表示我给他多少宽度-->
        <!--01 添加规则 :rules="rules"-->
        <el-form ref="formRef" :model="form" class="w-[250px]" :rules="rules">
          <!--02添加prop-->
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名">
              <template #prefix>
              <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!--03添加prop-->
          <el-form-item prop="password">
            <el-input v-model="form.password"
              style="width: 250px"
              type="password"
              placeholder="请输入密码"
              show-password>
              <template #prefix>
              <el-icon><Lock /></el-icon>
              </template>

            </el-input>
          </el-form-item>
          
          <el-form-item>
            <!--设置宽度与圆角 官网有对应的定义，圆角只需要加一个round-->
            <el-button round color="#626aef" class="w-[250px]" type="primary"
  @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import { useRouter } from "vue-router";

// do not use same name with ref
const form = reactive({
  username: "",  // 添加用户名字段
  password: "",  // 添加密码字段
})

const router = useRouter()
const rules ={
  //第一步 表单上加入 :rules = rules 表示启用script 里面的规则，第二个rules就是我们自己定义的规则
  //第二步 在要校验的组件上 写prop = 
  username:[
  { required: true, message: '用户名不能为空！', trigger: ['blur', 'change']},
  { min: 3, max: 15, message: '用户名长度必须在3到15之间', trigger: ['blur', 'change'] },
  ],
  password:[
  { required: true, message: '密码不能为空！', trigger: 'blur' },
  { min: 6, max: 18, message: '用户名长度必须在6到18之间', trigger: 'blur' },
  ]
}

const formRef = ref(null)
const onSubmit = () =>{
  formRef.value.validate((valid) => {
    console.log(valid)
    if(!valid) {
      console.log("校验不通过")
      return false;  //前端return false后续代码不执行
  }
  console.log("校验通过")
  router.push('/')
})
};

</script>

三、编写首页的内容2024-11-01

在 src 下面添加了一个布局文件夹（layouts）;再创建一个子文件夹（components）放组件，

新建文件（FHeader.vue）模版文件

<template>
    <div class="f-header">
        <span class="logo">
            <el-icon class="mr-1"><Opportunity /></el-icon>
            自动化测试平台
        </span>
        <el-icon class="icon-btn"><Fold /></el-icon>
        <el-icon class="icon-btn"><Refresh /></el-icon>
        <div class="ml-auto flex items-center">
          <el-icon class="icon-btn"><FullScreen /></el-icon>
          <el-dropdown>
            <span class="el-dropdown-link">
            <el-avatar :size="25" :src="circleUrl" />
            <el-icon class="el-icon--right">
           <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu class="drop-down">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
          </el-dropdown>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { reactive, toRefs } from 'vue'

const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})

const { circleUrl, squareUrl, sizeList } = toRefs(state)
</script>


<style>
 .f-header{
    @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
    height: 64;
 }
 .logo{
    width:250px;
    @apply flex justify-center items-center text-xl font-thin;
 }
 .icon-btn{
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor:pointer;
 }
 .icon-btn:hover{
    @apply bg-indigo-600;
 }
 .f-header .drop-down{
    height: 64px;
    cursor: pointer;
    @apply flex justify-center items-center mx-5;

 }
</style>

在 layouts 文件下新建 admin.vue 存放侧边栏和页面容器（先看效果

代码如下：

<template>
  <el-container>
    <el-header >
        <f-header/>
    </el-header>
    <el-container>
      <el-aside class="bg-yellow-100" width="200px">侧边栏容器</el-aside>
      <el-main class="bg-green-100">页面主容器</el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import FHeader from './components/FHeader.vue'

</script>

最后：在 router文件夹下的 index.js 中添加下面代码才可以

// 导入页面组件
import Admin from '~/layouts/admin.vue'
// 定义路由规则
const routes =[{
    path: "/",
    component:Admin
},{
    path:"/about",
    component:About
},{
    path:"/:pathMatch(.*)*",
    name: "NotFound",
    component:NotFound
},{
    path:"/login",
    component:Login
}]

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

// 导出路由实例
export default router

windows打开 vscode 快捷键是：ctrl + ` （就是你键盘上的 1左边的键盘）

Mac打开 vscode 快捷键是：control + ` （就是你键盘上的 1左边的键盘）

运行项目命令：