前端实习手记（6）：6不起来

已经实习六周咯，其实前面都是在做一些官网样式修改之类的，然后这周官网也没有太多需求要修改了，就开始做新的东西了！！！本周也就做了个小小的需求吧，但也是磕磕巴巴的（被自己蠢哭）......不太，开心的一周，后面熟悉了就感觉好多了

总结

• 封装组件：自定义模特表单对话框 Ant Design Vue
• es6学习：ES6 教程

新增：自定义模特表单对话框

功能概述

• 点击主页面的新增按钮，弹出一个表单的对话框，可以自定义模特的名称，头像，选择性别年龄地域，勾选同意协议，有取消和生成按钮。

思路

• 搭建框架：先单独写一个组件来搭建表单基本结构
• 表单细节：再来写表单的校验规则
• 逻辑编写：之后点击生成能够收集到填写的信息

一、表单搭建（框架）

先来搭建一个基本的表单框架，这里是使用了Ant Design Vue的Modal和Form等组件，无脑复制需要使用的就好了。需要注意的几个点：

• 需要填写和收集信息的每一项要使用formitem包括
• Modal的底部可以使用footer插槽插入自定义内容
• 上传与下拉框组件是项目中别人写的拿过来用了（别人咋用你咋用直接cv大师）

<template>
  <div>
    <AModal title="上传">
      <AForm inline layout="vertical" >
        <!-- 名称 -->
        <AFormItem label="名称">
          <AInput/>
        </AFormItem>
        <!-- 上传 -->
        <AFormItem>
            <Upload :file="state.avatar"></Upload>
        </AFormItem>
        <!-- 模特信息 -->
        <AFormItem>
          <Select
            :data-list="sexList"
            :checked-list="state.sexCheckedList"
            :placeholder="性别"
            />
        </AFormItem>
      </AForm>
      <!-- 按钮 -->
      <template #footer>
        <AFormItem>
          <ACheckbox>
            <div>请阅读并勾选协议</div>
          </ACheckbox>
        </AFormItem>
        <AButton @click="cancleSubmit">取消</AButton>
        <AButton type="primary"  @click="submitModel">生成</AButton>
      </template>
    </AModal>
  </div>
</template>

二、校验规则（细节）

先看看antd官网怎么用的校验规则，一个简单的例子：

• 通过 rules 属性传入验证规则
• 将formitem的prop属性（现在改为了name）设置为需校验的字段名（注意收集的字段和校验的字段保持一致）
• 在提交表单前再进行一次表单校验

<script lang="ts" setup>
  const formRef = ref();
  const rules = {
    name: { required: true, message: 'Please input Activity name', trigger: 'blur' }
  };
  const validState = (valid: any) => {
        if (valid) {
            console.log('Success!');
        } else {
            console.log('Fail!');
        }
    };
  const onSubmit = async () => {
        await formRef.value.validate().then(validState);
  };
</script>
<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    >
    <a-form-item ref="name" label="Activity name" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
  </a-form>
</template>

那么仿照这个例子，改进一下我们的表单：

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

  const state = reactive({
    name: '',
    avatar: '',
    agreement: '',
    sexCheckedList: [],
    areaCheckedList: [],
    ageCheckedList: [],
  });
  const rules = ref({
    name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
    avatar: [{ required: true, message: '请上传图片', trigger: 'blur' }],
    sexCheckedList: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    areaCheckedList: [{ required: true, message: '请选择地域', trigger: 'blur' }],
    ageCheckedList: [{ required: true, message: '请选择年龄', trigger: 'blur' }],
    agreement: [{ required: true, message: '请先阅读并勾选协议', trigger: 'submit' }],
  });
  const formRef = ref();
  const validState = (valid: any) => {
    if (valid) {
      console.log('Success!');
    } else {
      console.log('Fail!');
    }
  };
  const submitModel = async () => {
    await formRef.value.validate().then(validState);
  };
</script>

<template>
  <div>
    <AModal title="上传">
      <AForm
        ref="formRef"
        :model="state"
        :rules="rules"
        >
        <!-- 名称 -->
        <AFormItem label="名称" name="name">
          <AInput v-model:value="state.name" />
        </AFormItem>
        <!-- 上传 -->
        <AFormItem name="avatar">
          <Upload :file="state.avatar"></Upload>
        </AFormItem>
        <!-- 模特信息 -->
        <AFormItem name="sexCheckedList“”>
          <Select
          :checked-list="state.sexCheckedList"
          :placeholder="性别"
          />
        </AFormItem>
      </AForm>
      <!-- 按钮 -->
      <template #footer>
        <AFormItem name="agreement">
          <ACheckbox v-model:checked="state.agreement">
            <div>请阅读并勾选协议</div>
          </ACheckbox>
        </AFormItem>
        <AButton @click="cancleSubmit">取消</AButton>
        <AButton type="primary"  @click="submitModel">生成</AButton>
      </template>
    </AModal>
  </div>
</template>

三、收集信息（逻辑）

最后一步当然是要收集到我们填写的信息，然后向后端发送请求了。

• 点击提交按钮，将所收集的信息赋给后端所需要的参数
• 携带path和params发送post请求
• 但是这里是把生成和取消事件使用emits把submitAdd和cancleAdd发射给父组件去处理了

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

  ...

  const emits = defineEmits(['cancleAdd', 'submitAdd']);
  const submitModel = async () => {
    await formRef.value.validate().then(validState);
    const path = '/resource/xxxx';
    const params = {
      name: state.name,
      image: state.avatar
      age_group: state.ageCheckedList[0].id,
      sex: state.sexCheckedList[0].id,
      region: state.areaCheckedList[0].id,
    };
    const res = await Http.post(path, params);
    emits('submitAdd');
  };
  const cancleSubmit = () => {
    emits('cancleAdd');
  };
</script>

四、组件的使用

写好了对话框组件，怎么让父组件使用呢？

• 在父组件中点击上传时，让组件可见就OK了

• 我们通过emits定义了自定义事件cancleAdd和submitAdd，只需要在触发这个事件执行相应的方法就好了

<script setup>
  import uploadModal from ./uploadModal.vue
  import {ref} from 'vue'
  
  const isVisible = ref(false)
  
  const onOk =()=>{
    isVisible=true
  }
  const onOk =()=>{
    isVisible=false
  }

</script>
<template>
  <button @click="onOk"></button>
  <div v-if="isVisible">
    <uploadModal @submitAdd="onOk" @cancleAdd="onCancle"></uploadModal>
  </div>
</template>

emits的使用？

• emits 是用来定义一个组件可以触发哪些事件及其携带的参数。
• 1.定义emits: 在子组件的选项中定义 emits 选项来声明组件可以触发的事件名称。

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['increment']);
</script>

<template>
  <button @click="incrementCounter">Increment</button>
</template>

• 2. 触发事件: 使用 $emit 方法来触发这些事件，并传递相应的参数。

<script setup>
  ...
  const incrementCounter=()=> {
    emit('increment', 1); 
  }
</script>

• 3. 监听事件: 在父组件中使用@来监听子组件触发的事件，并执行相应的处理函数。

<script setup>
  import Child from './Child.vue';

  let count = 0;

  function updateCount(increment) {
    count += increment;
  }
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <Child @increment="updateCount" />
  </div>
</template>

写在最后

• 好好又是拖延的一周！第七周才写第六周的周报哈哈哈
• 感觉时间过得好快啊，，这周好像也没做什么东西就飞的过去咯
• 八月的第一周，又是宅的一周了~