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

news2024/11/27 11:40:39

参数管理

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

在开发功能之前先创建分支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.coloradmin.cn/o/1874639.html

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

相关文章

报餐小程序可以运用在饭堂的哪方面

随着科技的快速发展,智能化、信息化的管理方式逐渐渗透到我们日常生活的方方面面。在饭堂管理中,报餐小程序的应用为传统的餐饮管理方式带来了革命性的变革。本文将探讨报餐小程序在饭堂管理中的应用及其带来的优势。 一、报餐小程序的基本功能 报餐小程…

GIT 基于master分支创建hotfix分支的操作

基于master分支创建hotfix分支的操作通常遵循以下步骤: 切换到master分支: 首先,确保你的工作区是最新的,并且你在master分支上。如果不在master分支,你需要先切换过去。 Bash git checkout master 拉取最新的master…

鸿蒙开发设备管理:【@ohos.distributedHardware.deviceManager (设备管理)】

设备管理 本模块提供分布式设备管理能力。 系统应用可调用接口实现如下功能: 注册和解除注册设备上下线变化监听发现周边不可信设备认证和取消认证设备查询可信设备列表查询本地设备信息,包括设备名称,设备类型和设备标识 说明&#xff1a…

ATFX汇市:美国5月PCE数据来袭,EURUSD或迎剧烈波动

ATFX汇市:今日20:30,美国商务部将公布5月核心PCE物价指数年率,前值为2.8%,预期值2.6%,预期下降0.2个百分点。PCE数据是美联储进行货币政策决策的重要依据,尤其是核心PCE年率,向下波动会增加降息…

【LeetCode】一、数组相关:双指针算法 + 置换

文章目录 1、算法复杂度1.1 时间复杂度1.2 空间复杂度 2、数组3、leetcode485:最大连续1的个数4、leetcode283:移动05、leetcode27:移除元素 1、算法复杂度 1.1 时间复杂度 算法的执行时间与输入值之间的关系(看代码实际总行数的…

J2EE框架之mybatis学习——连接数据库实现查询操作

J2EE框架之mybatis学习——连接数据库实现查询操作 作业要求: 作者:杨建东 关于具体内容我正准备更新至我的CSDN【被瞧不起的神】也可移步我的公众号【猿小馆】 结合老师的课件和黑马程序员的课程学习。 因为我上课老师已经讲过了基本的概念和理解&a…

Swagger与RESTful API

1. Swagger简介 在现代软件开发中,RESTful API已成为应用程序间通信的一个标准。这种架构风格通过使用标准的HTTP方法来执行网络上的操作,简化了不同系统之间的交互。API(应用程序编程接口)允许不同的软件系统以一种预定义的方式…

西安电子科技大学微电子/集成电路801考研第一名学长经验分享

西安电子科技大学801考研经验贴 24 届上岸杭研微电子,以下是我的初试成绩,在这里给学弟学妹们分享一下初试复习经验,希望对大家有帮助,有疑问可以在会员群私聊我; 专业课杭研第一名,当时跟的研梦考研小孙学…

流水线作业模拟程序

目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 namespace 流水线作业模拟 {public partial class Form1 : Form{public Form1(){InitializeComponent();}private int Count 0;private bool IsStop false;private void uiLight1_Click(object sender, EventArgs e…

Jenkins容器的部署

本文主要是记录如何在Centos7上安装docker,以及在docker里面配置tomcat、mysql、jenkins等环境。 一、安装docker 1.1 准备工作 centos7、VMware17Pro 1.2 通过yum在线安装dokcer yum -y install docker1.3 启动docker服务 systemctl start docker.service1.4 查看docke…

Python 中的抽象语法树

Abstract Syntax Trees in Python 注:机翻,未校对。 Requirement: All examples are compatible with at least Python v3.6, except for using ast.dump() with the attribute indent which has been added in Python v3.9. 要求:所有示例至…

黑马点评的程序登录界面点击了发送验证码之后弹出红色异常框之后又返回登录页面

分析原因是因为token为null,然后执行了response.setStatus 401然后就出现这个问题,只要注释了这行就行了,就能正常登录!~

3d模型怎么一缩放模型都散了?---模大狮模型网

在3D建模和渲染中,缩放是常见的操作,用来调整模型的大小以适应不同场景或视角需求。然而,有时在进行缩放操作时,模型可能会出现不希望的散乱现象,这可能导致模型的外观和结构受到影响。模大狮将探讨为何会出现这种问题…

什么软件可以做计划 能做待办计划的app

在快节奏的现代生活中,做计划已成为许多人提高效率、管理时间的重要方法。无论是学生安排学习进度,还是职场人士规划工作任务,一份清晰的计划都能帮助我们更好地掌控生活节奏,实现目标。 选择一款好用的待办软件来做计划&#xf…

LSS论文与代码详解

本文首发于公众号【DeepDriving】,欢迎关注。 0. 前言 最近几年,BEV感知是自动驾驶领域中一个非常热门研究方向,其核心思想是把多路传感器的数据转换到统一的BEV空间中去提取特征,实现目标检测、地图构建等任务。如何把多路相机的…

Unity UGUI 实现简单两点连线功能

实现 记录鼠标点击位置为线段起点。 posStart Input.mousePosition; 创建一个Image 作为线段。 line new GameObject("line"); rtLine line.AddComponent<RectTransform>(); rtLine.pivot new Vector2(0, 0.5f); rtLine.localScale Vector3.one; img…

C语言 do while循环练习 上

do while循环 do循环语句; while&#xff08;表达式&#xff09;; 例&#xff1a; do while里的break do while里的continue 练习 1.计算n的阶乘 1*2*3*424 2.计算1&#xff01;2&#xff01;3&#xff01;.......10! 3.在一个有序数组中查找具体的某个数字h&#x…

摄影楼电子相册打开的正确方式,快来看看

​随着科技的不断发展&#xff0c;电子相册已经成为许多人存储和分享照片的重要方式。然而&#xff0c;你知道如何正确打开电子相册吗&#xff1f;今天&#xff0c;我就来教大家一下电子相册的正确打开方式&#xff0c;快来学习一下吧&#xff01; 第一步&#xff1a;选择合适的…

RedHat9 | podman容器

1、容器技术介绍 传统问题 应用程序和依赖需要一起安装在物理主机或虚拟机上的操作系统应用程序版本比当前操作系统安装的版本更低或更新两个应用程序可能需要某一软件的不同版本&#xff0c;彼此版本之间不兼容 解决方式 将应用程序打包并部署为容器容器是与系统的其他部分…

详细分析Oracle中的tnsnames.ora基本知识 以及 PLSQL如何连接(附Demo)

目录 1. tnsnames.ora2. Demo3. 实战 1. tnsnames.ora Oracle 数据库网络配置文件&#xff0c;用于配置客户端与数据库服务器之间的连接 定义网络服务名称&#xff0c;客户端可以使用这些名称连接到数据库实例 基本的路径如下&#xff1a; Windows: ORACLE_HOME\network\ad…