【前端项目笔记】6 参数管理

参数管理

效果展示:
在这里插入图片描述
在这里插入图片描述

在开发功能之前先创建分支goods_params
cls 清空终端
git branch 查看所有分支
git checkout -b goods_params 新建分支goods_params
git push -u origin goods_params 把本地的新分支推送到云端origin并命名为goods_params

参数管理需要维护动态参数以及静态属性
在这里插入图片描述

通过路由方式显示分类参数页面

在这里插入图片描述
在这里插入图片描述

渲染分类参数界面的基本结构

面包屑导航+卡片视图区域(头部提示注意项+选择商品分类的级联选择框+tab页签(选择不同参数))
在这里插入图片描述
在这里插入图片描述

获取商品分类列表数据

需要一次性将所有分类和其所有等级数据都获取到
在这里插入图片描述

渲染商品分类的级联选择框

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

控制级联选择框的选择范围:
只允许选择三级分类,不允许选择一级、二级分类
在这里插入图片描述

渲染动态参数和静态属性的tab页签

按需注册Tabs、Tabpane组件
在这里插入图片描述
在这里插入图片描述
tab页签:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

渲染添加参数的按钮和添加属性的按钮

同时控制它们的禁用和启用的状态:
当没有选择三级分类时两个按钮都处于禁用状态,如果选择了任意一个三级分类,则处于启用状态。(可通过级联选择框的选中项id长度判断是否符合三级分类的要求)
通过定义一个计算属性isBtnDisabled从而返回一个布尔值来控制按钮的启用与禁用:
在这里插入图片描述
在这里插入图片描述

获取参数的数据

根据选中的三级商品分类和参数类型,获取对应Table表格数据
在这里插入图片描述
在这里插入图片描述
准备好参数发起请求
在这里插入图片描述
一个bug:面板切换但是请求未发起
handleChange()属于级联选择器,只有级联选择框选中项变化,才会触发这个函数。
解决方法:应该改为无论是级联选择器的选中项发生变化还是面板发生变化都要发起请求。把函数内容取出独立为一个新函数,在级联选择器的选中项发生变化时或者面板发生变化都进行调用。
在这里插入图片描述
将获取到的数据挂载给不同的表格:
在这里插入图片描述
在这里插入图片描述

渲染动态参数和静态属性的Table表格

  1. 渲染动态参数表格
    在这里插入图片描述

  2. 渲染静态属性表格
    在这里插入图片描述

完成添加参数和添加属性的功能

由于两者结构基本相同,需要提高复用性
在这里插入图片描述
在这里插入图片描述
添加表单验证规则:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
完成参数的添加操作(分析api文档,表单预校验+发起请求向服务器添加参数):
在这里插入图片描述
在这里插入图片描述

完成修改参数和修改属性的功能

Ctrl + D可选中相同字符,连续按可一次选中多个同时进行修改。

  1. 定义修改参数对话框即相关表单验证规则
    在这里插入图片描述
    在这里插入图片描述
  2. 修改按钮绑定显示对话框事件
    在这里插入图片描述
    在这里插入图片描述
  3. 监听对话框关闭事件,重置表单数据
    在这里插入图片描述
  4. 完成参数信息的获取(在弹出修改对话框后要显示修改前的参数信息)
    在这里插入图片描述
    在这里插入图片描述
  5. 完成修改参数的实际功能(预校验+发送请求修改参数)
    在这里插入图片描述
    在这里插入图片描述

完成删除参数和删除属性的功能

在这里插入图片描述
在这里插入图片描述

渲染参数下的可选项

将attr_vals从字符串根据空格进行分割组成新的数组,并将数组for循环放到展开行中,添加可清除属性。
在这里插入图片描述
在这里插入图片描述
一个bug:对于新添加的参数,展开行显示一个空的参数如下
在这里插入图片描述
因为空字符串通过空格分割后会形成一个包含空字符串的数组
在这里插入图片描述
添加三元表达式判断item.attr_vals字符串是否为空,不为空就分割,为空直接返回空数组
在这里插入图片描述
在这里插入图片描述

控制添加按钮与输入文本框之间的切换形式

点击按钮,按钮消失,变成输入文本框
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
解决两个问题:

  1. 打开两个不同参数的展开行,发现输入某行数据时,另一行也会同时更新
    因为每渲染一个展开行,他们都共用了inputVisible和inputValue。解决此问题需要给每一行数据单独提供上面两个值。
    在这里插入图片描述
    删除data中的inputVisible和inputValue
    在这里插入图片描述
    在这里插入图片描述
  2. 当点击按钮使会展示一个文本输入框,我们希望输入框会自动显示一个焦点

input是一个原生的dom对象,通过focus函数可直接获得焦点
在这里插入图片描述
在这里插入图片描述

实现按钮与文本框之间的切换

点击按钮会展示文本框(已实现),当文本框失去焦点时应该再次展示按钮(未实现)
优化:
如果输入的内容不合法,失去焦点时应立即重置
在JavaScript中,字符串对象的 trim() 方法用于去除字符串两端的空格(包括空格、制表符和换行符),并返回处理后的新字符串。
在这里插入图片描述
在这里插入图片描述

完成参数项的添加操作

这里的attr_vals需要将数组内容拼接成字符串,用join函数
在这里插入图片描述
效果展示:
在这里插入图片描述

数组内容拼接转为字符串:
法一:arr.join('-')参数默认是逗号,可以是其他形式的分隔符

var arr = ['yanggb', 'yanggb1', 'yanggb2'];
var arrJoinString =arr.join();console.log(arrJoinString);//"yanggb,yanggb1,yanggb2"

法二:arr.toString()以逗号分隔,不支持自定义分隔符,除非重写该原型方法。

var arrJoinString =arr.toString();console.log(arrJoinString);//"yanggb,yanggb1,yanggb2"

另外要注意的是,如果数组中包括了对象(非简单类型),那么调用这两个方法所出来的结果,无论该元素的内容是什么,都是显示[object Object]字符串。

var arr = [{yanggb: 'yanggb'}, 'yanggb1', 'yanggb2'];
console.log(arr.toString());//"[object Object],yanggb1,yanggb2"
console.log(arr.join()); //"[object Object],yanggb1,yanggb2"

在实际的场景中,join()方法使用得较多。

实现参数项的删除操作

发现需要重复使用的代码抽出来单独写成一个函数,提高代码复用率
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
splice函数用法:
splice():在数组中插入元素(会修改原数组)
删除:2个参数,开始位置 结束位置(左闭右开)
插入:3个参数,开始位置 删除元素数量(一般为0) 插入元素
替换:3个参数,开始位置 删除元素数量 插入任意多个元素

let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red,只有一个元素的数组
removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
alert(colors); // green,yellow,orange,blue
alert(removed); // 空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两个值,删除一个元素
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow,只有一个元素的数组

解决一个小bug:在没有选择三级分类时,下面的table仍旧显示之前三级分类的参数内容。应该立即将表格数据清空
在这里插入图片描述
之前均是对动态参数表格展开行进行操作,要对静态属性进行操作,只需要将动态参数表格展开行的代码复制到静态属性表格中即可。
在这里插入图片描述

提交分类参数代码到git中

Ctrl+` 打开终端面板

git代码回顾:
git branch 查看当前所有分支
git status 查看当前项目文件修改状态
git add . 将所有修改添加到暂存区
git commit -m "完成了分类参数开发" 把当前修改提交到本地仓库中
git push 将本地分支推送到云端
goods_params已是最新,还需要更新master
将goods_params合并到master
git checkout master 切换到master分支
git merge goods_params 主动合并goods_params到master中
git push 将主分支上的代码页推动到云端保存

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一个易于使用、与Android系统良好整合的多合一游戏模拟器

大家好,今天给大家分享的是一个易于使用、与Android系统良好整合的多合一游戏模拟器 Lemuroid。 Lemuroid 是一个专为Android平台设计的开源游戏模拟器项目,它基于强大的Libretro框架,旨在提供广泛的兼容性和卓越的用户体验。 项目介绍 Lem…

如何安装多版本CUDA?

首先聊一个题外话:前几天在csdn上看到的一个话题”安装pytorch一定要去nvidia官网下载安装cuda和cudnn吗?“ 我相信任何一个刚开始接触或者从事深度学习的炼丹者都会从安装cuda开始,现在网上随便一搜如何安装pytorch,蹦出来教程提…

pd虚拟机 Parallels Desktop 19 for Mac 破解版小白安装使用指南

Parallels Desktop 19 for Mac 乃是一款适配于 Mac 的虚拟化软件。它能让您在 Mac 计算机上同时运行多个操作系统。您可借此创建虚拟机,并于其中装设不同的操作系统,如 Windows、Linux 或 macOS。使用 Parallels Desktop 19 mac 版时,您可在 …

无线麦克风推荐哪些品牌,一文揭秘无线麦克风领夹哪个牌子好!

​究竟该如何选择麦克风呢?又该如何挑选无线麦克呢?询问我关于麦克风选择问题的人着实不少。对于那些仅仅是想要简单地自我娱乐的朋友而言,着实没必要去折腾,直接使用手机自带的麦克风便可以了。 但若是处于想要直播、拍摄短视频…

【Termius】详细说明MacOS中的SSH的客户端利器Termius

希望文章能给到你启发和灵感~ 如果觉得有帮助的话,点赞+关注+收藏支持一下博主哦~ 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境二、软件的安装2.1 Termius界面介绍2.1.1 Hosts 主机列表2.1.2 SFTP 文件传输2.1.3 Port ForWarding 端口转发2.1.4 Snippets 片…

为什么带货主播,他突然就不吃香了?

为什么带货主播他突然就不吃香了?工资骤降50%。 相比 2023 年初主播的平均薪资降了50%,那不管你是头部主播还是腰部主播,全部都降薪了。那尾部主播就更不用说了,有的主播他的时薪已经低到 20 块钱一个小时,还不如大学…

U-boot相关基础知识

U-boot和Bootloader之间的关系 U-Boot是Bootloader的一种实现,它专门用于嵌入式系统,特别是那些基于ARM、MIPS等处理器的系统。U-Boot提供了丰富的硬件支持和功能,使得开发者能够轻松地初始化硬件、加载操作系统内核,并进行一些基…

【漏洞复现】安美数字酒店宽带运营系统——命令执行漏洞(CNVD-2021-37784)

声明:本文档或演示材料仅供教育和教学目的使用,任何个人或组织使用本文档中的信息进行非法活动,均与本文档的作者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 安美数字酒店宽带运营系统 server_ping.php 存在远程命令执行漏洞&#…

一文带你了解什么是【点击劫持】

点击劫持,意思就是你点击网页的时候,有人劫持你,对没错,劫持你的信息,甚至劫持你的马内,劫持你的理想,劫持你的肉体,劫持你的灵魂。就是这么可怕。 目录 1 如何实现假网站 1.1 if…

“未来独角兽” | 安全狗入选福建省数字经济核心产业创新企业名单

近日,福建省数据管理局公布了入选2024年度全省数字经济核心产业创新企业名单。 作为国内云原生安全领导厂商,安全狗凭借自身在云安全领域的卓越表现和创新实力入选,获得“未来独角兽”称号。 据悉,此次对“未来独角兽”的评选条件…

计算机视觉(CV)技术:优势、挑战与前景

摘要 计算机视觉作为人工智能的关键领域之一,正迅速改变我们的生活和工作方式。本文将探讨CV技术的主要优势、面临的挑战以及未来的发展方向。 关键词 计算机视觉, 人工智能, 数据处理, 自动化, 伦理问题 目录 引言计算机视觉技术的优势计算机视觉技术的挑战实…

内网穿透小工具

内网穿透小工具 前言 当在本地或者虚拟机,内网搭建了项目,数据库。可是在外网无法访问。下面的两款小工具可以暂时实现内网穿透能力。(不支持自定义域名,但是不限制隧道数量!且免费!免费!免费…

云主机相比物理机有哪些优势

随着信息技术的飞速发展,云计算技术逐渐成为现代企业的核心驱动力。其中,云主机作为云计算的重要组成部分,以其高性能、高可用性和灵活便捷的特性,成为企业IT架构的新选择。今天我们就来了解探讨云主机相比传统主机,有…

#### 广告投放 ####

以巨量引擎为例: 计费模式 eCPM(expected Cost Per Mile,估计千次展示收入) 概括: ecpm为千次展示的预估收益,是广告平台用来给广告排序的指标。 注意是展示而不是千次点击收益,展示了可能不…

文献解读-基因编辑-第十二期|《CRISPR-detector:快速、准确地检测、可视化和注释基因组编辑事件引起的全基因组范围突变》

关键词:基因组变异检测;全基因组测序;基因编辑; 文献简介 标题(英文):CRISPR-detector: fast and accurate detection, visualization, and annotation of genome-wide mutations induced by g…

Zynq7000系列FPGA中的DMA控制器——PL外设请求接口

图9-4中展示了PL外设请求接口主要由两部分组成:PL外设请求总线和DMAC确认总线。这两部分分别使用特定的前缀进行标识,具体如下: PL外设请求总线(PL Peripheral Request Bus): 前缀:DR功能&…

免费Logo在线生成:必试的6款工具

logo对企业来说非常重要。一个好的logo免费设计在线生成器往往会给企业带来无形的利润。因此,许多企业非常重视自己公司的logo。作为一名设计师,如果能找到一个好的logo免费设计在线生成器,势必会给实际的logo设计带来事半功倍的效果。本文精…

RNN循环卷积神经网络

1.定义 RNN (Recurrent Neural Network,RNN)循环卷积神经网络,用于处理序列数据。 序列数据:按照一定的顺序排列的数据,可以是时间顺序、空间顺序、逻辑顺序。 eg:电影、语言 2.特点 传统神经网络模型无法…

gin数据解析,绑定和渲染

一. 数据解析和绑定 1.1 Json数据解析和绑定 html文件&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…

grpc学习golang版( 五、多proto文件示例)

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 第五章 多proto文件示例 第六章 服务器流式传输 文章目录 一、前言二、定义proto文件2.1 公共proto文件2.2 语音唤醒proto文件2.3 人脸唤醒proto文件2.4 生成go代码2.…