实习手记（8）：增删改查

news2024/11/15 20:11:54

上周又偷懒了没有按时写博客（扣大分啊啊！）但是好像也没有人看呢~其实最开始也只是想着记录一下实习历程，怕自己之后回过头想关于实习的都想不起来了，个人还是喜欢记录有关自己的学习生活的，就算没啥人看但回过头看不觉得这一段是空白的。

本周总结：

  • 重构
  • 新增模特弹框
  • 更多模特弹框
  • 新增场景弹框
  • 更多场景弹框

其实是重构了一个项目，老代码一个页面写了一千多行看着好费劲（密密麻麻）。然后现在是按照页面结构还有功能将其抽离成不同的组件了。当然，我，就只是写了很小一部分，大部分还是师父写的（怎么感觉我好像在拖后腿......）。这里就记录一下数据请求之增删改查和一些要注意的点了。

一、查

场景：点击不同的页码显示不同的数据

思路：获取到你点击的页码》将这些参数发送给后端》将后端返回的数据重新赋值到原来的数据》添加页码改变的回调：请求数据列表

（1）获取到你点击的页码

  • Ant Design Vue 这里用到的组件是antdv
  • 当收集相应的数据时，查找一下对应的API与事件

const tableSet = reactive({
        currentPage: 1,//默认
        perPage: 35,//默认
        totalPage: 0,
    });
......
<APagination
    v-model:current="tableSet.currentPage"
    v-model:page-size="tableSet.perPage"
    show-quick-jumper
    :total="tableSet.totalPage"
    @change="onChange"
/>

（2）将这些参数转化为后端接收的字段发送GET请求给后端，后端返回我们需要的数据

  • 这里就自己查看接口文档了看需要携带什么参数，记得将收集到的数据转化为后端需要的字段！
const sceneData = async () => {
        const path = '/resource/xxxx';
        const params = {
            per_page: tableSet.perPage,
            page: tableSet.currentPage,
        };

        const res = await Http.get(path, params);

        return {
            currentPage: res.data.list.current_page,
            perPage: res.data.list.per_page,
            totalPage: res.data.list.total,
        };
    };

（3）将后端返回的数据重新赋值到原来的数据

const getSceneLIst = async () => {
        const {currentPage, perPage, totalPage } = await sceneData();
        tableSet.currentPage = currentPage;
        tableSet.perPage = perPage;
        tableSet.totalPage = totalPage;
    };

（4）添加页码改变时的回调

const onChange = (page, pageSize) => {
    getSceneLIst();
  };

二、删

场景：点击选中需要删除的选项，将其从列表中移除，且提示删除成功

思路：获取选项id》携带参数发送请求》刷新列表

（1）获取选项id

  • 怎么删除某个选项，一定是根据他的唯一标识来代表他（当然了看后端需要什么参数我们就找）
  • 引用的自定义组件
<PicItem
  v-for="picInfo in state.dataList"
  :key="picInfo.id"
  :pic-info="picInfo"
  :checked="state.checked.id === picInfo.id"
  @update:checked="(b) => onChecked(picInfo, b)"
  @model-deleted="modelDeleted"
  />

（2）携带参数发送请求

  • 如果你想的单单是带个参数发个请求就OK了 但是不会这么简单的
  • 点击删除图标=选中选项，发送删除请求虽然把他删了，但这个选项已经是选中状态了，在最后提交的时候会把这个选项也提交上去！这是不可以的！一定要记得清空鸭
  • 最后记得刷新列表获取最新数据哦
const modelDeleted = async (sceneInfo: SceneInfo) => {
        state.remove = true;
        const path = '/resource/delete';
        const params = {
            id: sceneInfo.id,
        };
        await Http.post(path, params);

        if (sceneInfo.id === state.checked.id) {
            state.checked.id = '';
        }

        getSceneLIst();
        _message.success("sucess");
    };

const onChecked = (picInfo: SceneInfo, b: boolean) => {
    state.checked = picInfo;
};

三、增

场景：点击提交按钮将自定义的人物信息提交到列表最前方

思路：怎么收集数据发请求就不说了，重点说一下提交时候的一些细节逻辑

  • 首先记得表单校验哇
  • 为了优化用户体验，记得给点提示！提交按钮添加loading效果
  • 其实这里最后逻辑是传给了父组件一并处理的（emits('submitAdd'); 忘了是啥）
  • 设计网络请求的多使用try catch finally 更方便捕捉错误
 const submitModel = async () => {
        try {
            if (state.agreement === false) {
                _message.error("error");
            }
            await formRef.value.validate().then(validState);
            state.loading = true;
            const path = '/resource/create';
            const params = {
                name: state.name,
                type: state.type,
                age: state.ageCheckedList[0].id,
              ...
            };
            const res = await Http.post(path, params);
            emits('submitAdd');
        } catch (err) {
            console.error(err);
        } finally {
            state.loading = false;
        }
    };

说完了增删改查再来看一下其他比较麻烦的点吧。

四、选择变换

场景：选择不同的性别类型切换对应的年龄选项以及要展示的人物图片。

思路1：先说说之前一个比较笨的想法，给这两种类型对应的菜品写两个数组存放，通过v-if判断控制显示隐藏；对应的图片使用选择的回调来显示，但是这样的话要写九种不同的选择对应的九张图片，其实实际场景会有更多图片！

  • 可以看到这样写逻辑很繁琐，代码也很冗长
<script setup>
  const womanFileUrl =
    'https://images.pexels.com/photos/22708188/pexels-photo-22708188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2';
  const womanFile = await urlToFile(womanFileUrl);
  const KidFileUrl = 'https://cdn.pixabay.com/photo/2022/11/09/21/12/candle-7581472_1280.jpg';
  console.log('kidGirl444444');
  const kidFile = await urlToFile(KidFileUrl);
  console.log('kidGirl555555');
  const selectFile = ref(womanFile);
  const updateFile = () => {
    console.log('kidGirl66666');
    console.log('state.sexCheckedList[0]', state.sexCheckedList[0]);
    console.log('state.ageCheckedList[0]', state.ageCheckedList[0]);
    // 业务
    // 代码
    if (!state.sexCheckedList.length || !state.ageCheckedList.length) return (selectFile.value = womanFile);
    if (state.sexCheckedList[0].id === 'Woman' && state.ageCheckedList[0].id === 'Youth') {
      selectFile.value = womanFile;
    } else if (state.sexCheckedList[0].id === 'KidGirl' && state.ageCheckedList[0].id === 'Infant') {
      console.log('kidGirl');
      selectFile.value = kidFile;
    }
  };
  const selectFile = ref();
  const updateFile = async () => {
    selectFile.value = await getDigitModelFile(state.sexCheckedList[0]?.id, state.ageCheckedList[0]?.id);
  };
</script>
<template>
      <Upload
        :file="selectFile"
        />
</template>

思路2：第二种是通过枚举和映射的方式

  • 枚举类型定义：定义了 AgeType 枚举，用于表示不同的年龄段。
  • 数据结构映射：创建了一个 data 对象，用于映射性别和年龄到图片路径
  • 图片获取函数：定义异步函数 getDigitModelFile，根据传入的性别和年龄返回对应的图片文件

（1）枚举类型定义

enum AgeType {
    Youth = 'Youth',
    YoungAdult = 'YoungAdult',
    Adult = 'Adult',
    Elderly = 'Elderly',
    Infant = 'Infant',
    Toddler = 'Toddler',
    Child = 'Child',
}

export default AgeType;

sexType同理。

（2）数据结构映射

import AgeType from '../definition/AgeType';
import SexType from '../definition/SexType';
import digit_kidboy_africa from '../../assets/digit_kidboy_africa.png';
......
import { localToFile, urlToFile } from '@software/tools/file';

const data = {
    [SexType.Woman]: {
        [AgeType.Youth]: digit_kidboy_asia,
    },
};

/**
 * 返回一个 对应特定性别和年龄的图片
 * @param sex
 * @param age
 * @returns
 */
export const getDigitModelFile = async (sex?: SexType, age?: AgeType): Promise<File> => {
    if (!sex || !age) return await localToFile(digit_kidboy_africa);
    const path = data?.[sex]?.[age];
    return await localToFile(path);
};

（3）使用

这里堆砌的代码就少了很多！

<script setup>
  const selectFile = ref();
  const updateFile = async () => {
    selectFile.value = await getDigitModelFile(state.sexCheckedList[0]?.id, state.ageCheckedList[0]?.id);
  };
</script>
<template>
  <Upload
    :file="selectFile"
    />
</template>

五、用户体验优化

(一) 中间自适应布局，超出的使用scorlloy

  • 上方是一个表单名称以及选择框，下方是两个按钮。如果上下也随页面滚动的话，会找不到选择项和按钮，优化体验，应该将上下固定，中间展示区域可以滑动查看。
<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh; 
  }

  .header {
    height: 60px; /* 固定高度 */
  }

  .content {
    display:flex;
    flex: 1;
    flex-direction: column;
    height: calc(100vh); 
    overflow: hidden;

    .scrollable-content {
      flex: 1;
      overflow-y: scroll; 
    }
  }

  .footer {
    height: 60px; 
  }


</style>

六、写在最后

  • 本周感觉稍微好了一丢丢丢，开心哈哈哈但我写的还是好慢呐！
  • 现在有点困，but第二篇还没写啊救救我~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2071983.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RabbitMQ 基础总结

RabbitMQ 基础总结

一、前言 我们一般的项目过程都是同步通信&#xff0c;及一个服务结束后在执行另一个服务这会让总体时间变得很长&#xff0c;尤其是在高并发的时候用户体验感很不好&#xff0c;且在调用一个服务期间cup内存等都处于空闲状态造成资源浪费 。如果调用其中某一个服务时…
阅读更多...
LVS+Keepalived集群（主、备）

LVS+Keepalived集群（主、备）

1、Keepalived及其工作原理 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用&#xff08;HA&#xff09;方案&#xff0c;可以解决静态路由出现的单点故障问题。 keepalived 高可用之间是通过VRRP进行通信&#xff0c;VRRP是通过竞选的来确定主备&#xff0c;主优先级高…
阅读更多...
学习之appium的简单使用

学习之appium的简单使用

使用之前需要先安装一下依赖 1、安装jdk&#xff1a;暂时为整理笔记以后补充 2、安装nodejs:https://blog.csdn.net/qq_42792477/article/details/141363957?spm1001.2014.3001.5501 3、安装SDk&#xff08;安卓篇&#xff09;&#xff1a;https://blog.csdn.net/qq_42792477…
阅读更多...
＜数据集＞Visdrone数据集＜目标检测＞

＜数据集＞Visdrone数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;8629张 标注数量(xml文件个数)&#xff1a;8629 标注数量(txt文件个数)&#xff1a;8629 标注类别数&#xff1a;10 标注类别名称&#xff1a;[pedestrian,people,bicycle,car,van,truck,tricycle,awning-tricycle…
阅读更多...
HubSpot 自动化营销平台助力出海企业精准获客与转化 | 自动化营销

HubSpot 自动化营销平台助力出海企业精准获客与转化 | 自动化营销

HubSpot 提供了多个开源 cms 和一体化且全面的解决方案&#xff0c;可帮助出海企业优化内容营销策略 HubSpot 自动化营销加速国际化 随着全球化的推进&#xff0c;越来越多的企业开始寻求拓展国际市场&#xff0c;而在这个过程中&#xff0c;有效的客户关系管理和营销自动化成…
阅读更多...
ActiveMQ指南

ActiveMQ指南

入门 官网&#xff1a; http://activemq.apache.org/ ActiveMQ 是Apache出品&#xff0c;最流行的&#xff0c;能力强劲的开源消息总线。ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现。 JMS JMS即Java消息服务&#xff08;Java Message Service&#xf…
阅读更多...
Linux自旋锁和读写锁

Linux自旋锁和读写锁

在前面的文章中我们已经介绍了有关互斥锁的概念与使用&#xff0c;本篇将开始介绍在 Linux 中的自旋锁和读写锁。这三种锁分别用于在不同的应用场景之中&#xff0c;其中互斥锁最为常用&#xff0c;但是我们需要了解一下其他的锁。 对于自旋锁和读写锁都介绍了其原理以及接口使…
阅读更多...
【信创】麒麟KylinOS V10打开root登录桌面权限

【信创】麒麟KylinOS V10打开root登录桌面权限

原文链接&#xff1a;【信创】麒麟KylinOS V10打开root登录桌面权限 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于在麒麟KYLINOS V10上如何打开root用户登录桌面的文章。在大多数Linux发行版中&#xff0c;出于安全考虑&#xff0c;root用户默认情况下是禁止直…
阅读更多...
KRTS网络模块:TCP服务端、客户端实例

KRTS网络模块:TCP服务端、客户端实例

KRTS网络模块:TCP服务端、客户端实例 目录 KRTS网络模块:TCP服务端、客户端实例TCP简介KRST服务端简介核心特性界面设计核心代码 KRTS客户端简介核心特性界面设置核心代码 运行实例 Socket模块基于Packet模块&#xff0c;实时提供更高的协议&#xff0c;如RAW-IP、TCP 和 UDP(参…
阅读更多...
【求助帖】用PyTorch搭建MLP网络时遇到奇怪的问题

【求助帖】用PyTorch搭建MLP网络时遇到奇怪的问题

求助&#xff1a;我在测试自己搭建的通用MLP网络时&#xff0c;发现它与等价的参数写死的MLP网络相比效果奇差无比&#xff0c;不知道是哪里出了问题&#xff0c;请大佬们帮忙看下。 我写的通用MLP网络&#xff1a; class MLP(nn.Module):def __init__(self, feature_num, cl…
阅读更多...
3、Unity【基础】Resources资源场景动态加载

3、Unity【基础】Resources资源场景动态加载

文章目录 一、Resources资源动态加载1、Unity中特殊文件夹1、工程路径获取2、Resources资源文件夹3、StreamingAssets流动资源文件夹4、persistentDataPath持久数据文件夹5、Plugins插件文件夹6、Editor编辑器文件夹7、默认资源文件夹StandardAssets 2、Resources同步加载1、Re…
阅读更多...
Auto-Editor

Auto-Editor

文章目录 一、关于 Auto-Editor安装系统兼容性版权 二、切割自动切割的方法看看自动编辑器删掉了什么 三、导出到编辑器命名时间线按 Clip 分割 四、手工编辑五、更多的选择 一、关于 Auto-Editor github : https://github.com/WyattBlue/auto-editor (2.8k star – 2408)主页…
阅读更多...
ubuntu 20.04系统安装pytorch

ubuntu 20.04系统安装pytorch

1.1 安装gcc 安装cuda之前&#xff0c;首先应该安装gcc&#xff0c;安装cuda需要用到gcc&#xff0c;否则报错。可以先使用下方指令在终端查看是否已经安装gcc。 gcc --version 如果终端打印如下则说明已经安装。 如果显示“找不到命令 “gcc”......”使用下方指令安装 su…
阅读更多...
阅读笔记5：董超底层视觉之美|时空的交错与融合——论视频超分辨率

阅读笔记5：董超底层视觉之美|时空的交错与融合——论视频超分辨率

原文链接&#xff1a;https://mp.weixin.qq.com/s/pmJ56Y0-dbIlYbHbJyrfAA 1. 多帧超分和时空超分 视频超分的本质就是多帧超分&#xff0c;多帧超分的历史远早于视频超分。 在早期&#xff0c;Super Resolution专指多帧超分&#xff0c;因为只有多帧超分才能补充进入真实的信…
阅读更多...
Golang | Leetcode Golang题解之第368题最大整除子集

Golang | Leetcode Golang题解之第368题最大整除子集

题目&#xff1a; 题解&#xff1a; func largestDivisibleSubset(nums []int) (res []int) {sort.Ints(nums)// 第 1 步&#xff1a;动态规划找出最大子集的个数、最大子集中的最大整数n : len(nums)dp : make([]int, n)for i : range dp {dp[i] 1}maxSize, maxVal : 1, 1fo…
阅读更多...
对讲模块升级的重要性-OTA空中升级与串口升级

对讲模块升级的重要性-OTA空中升级与串口升级

在现代通信设备的设计中&#xff0c;灵活的升级能力已成为评估模块性能的重要标准。无论是在开发过程中&#xff0c;还是在产品的生命周期内&#xff0c;支持OTA和串口升级的模块可以极大地提高设备的可维护性和适应性。 SA618F30&#xff0c;作为一款高性价比、高集成度的大功…
阅读更多...
SSRF 302跳转攻击redis写入ssh公钥实现远程登录

SSRF 302跳转攻击redis写入ssh公钥实现远程登录

目录 SSRF漏洞 SSRF攻击Redis 302跳转 漏洞复现&#xff1a; index.html: index.php: 攻击步骤&#xff1a; 1.生成ssh公钥数据&#xff1a; 2.用SSH公钥数据伪造Redis数据&#xff1a; 3.在自己的服务器上写302跳转&#xff1a; 4.最后尝试在.ssh目录下登录&#…
阅读更多...
Golang | Leetcode Golang题解之第371题两整数之和

Golang | Leetcode Golang题解之第371题两整数之和

题目&#xff1a; 题解&#xff1a; func getSum(a, b int) int {for b ! 0 {carry : uint(a&b) << 1a ^ bb int(carry)}return a }
阅读更多...
MySQL主从复制之GTID模式

MySQL主从复制之GTID模式

目录 1 MySQL 主从复制 GTID 模式介绍 2 传统复制模式与GTID复制模式的区别 3 GTID模式核心参数 4 GTID 实现自动复制原理 4.1 GTID基本概念 4.2 GTID复制流程 5 GTID 实现自动定位 5.1 配置 my.cnf 5.2 配置 SLAVE 实现自动定位 5.3 测试 6 GTID 模式 故障转移的方法流程 6.1…
阅读更多...
如何使用ssm实现宠物领养系统+vue

如何使用ssm实现宠物领养系统+vue

TOC ssm103宠物领养系统vue 课题背景 在当今的社会&#xff0c;可以说是信息技术的发展时代&#xff0c;在社会的方方面面无不涉及到各种信息的处理。信息是人们对客观世界的具体描述&#xff0c;是人们进行交流与联系的重要途径。人类社会就处在一个对信息进行有效合理的加…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023