硅谷甄选（七）属性管理模块

属性管理模块

6.1 属性管理模块的静态组件

属性管理分为上面部分的三级分类模块以及下面的添加属性部分。我们将三级分类模块单独提取出来做成全局组件

6.1.1 三级分类全局组件（静态）

注意：要在src\components\index.ts下引入。

<template><el-card><el-form inline><el-form-item label="一级分类"><el-select><el-option label="北京"></el-option><el-option label="深圳"></el-option><el-option label="广州"></el-option></el-select></el-form-item><el-form-item label="二级分类"><el-select><el-option label="北京"></el-option><el-option label="深圳"></el-option><el-option label="广州"></el-option></el-select></el-form-item><el-form-item label="三级分类"><el-select><el-option label="北京"></el-option><el-option label="深圳"></el-option><el-option label="广州"></el-option></el-select></el-form-item></el-form></el-card>
</template><script setup lang="ts"></script><style lang="" scoped></style>
6.1.2 添加属性模块（静态）
<template><!-- 三级分类全局组件--><Category></Category><el-card style="margin: 10px 0px"><el-button type="primary" size="default" icon="Plus">添加属性</el-button><el-table border style="margin: 10px 0px"><el-table-columnlabel="序号"type="index"align="center"width="80px"></el-table-column><el-table-column label="属性名称" width="120px"></el-table-column><el-table-column label="属性值名称"></el-table-column><el-table-column label="操作" width="120px"></el-table-column></el-table></el-card>
</template><script setup lang="ts"></script><style lang="scss" scoped></style>

6.2 一级分类数据

一级分类的流程时：API->pinia->组件

为什么要使用pinia呢？因为在下面的添加属性那部分，父组件要用到三级分类组件的信息（id），所以将数据放在pinia中是最方便的。

6.2.1 APIsrc\api\product\attr\index.ts
//这里书写属性相关的API文件
import request from '@/utils/request'
//属性管理模块接口地址
enum API {//获取一级分类接口地址C1_URL = '/admin/product/getCategory1',//获取二级分类接口地址C2_URL = '/admin/product/getCategory2/',//获取三级分类接口地址C3_URL = '/admin/product/getCategory3/',
}//获取一级分类的接口方法
export const reqC1 = () => request.get<any, any>(API.C1_URL)
//获取二级分类的接口方法
export const reqC2 = (category1Id: number | string) => {return request.get<any, any>(API.C2_URL + category1Id)
}
//获取三级分类的接口方法
export const reqC3 = (category2Id: number | string) => {return request.get<any, any>(API.C3_URL + category2Id)
}
6.2.2 pinia   src\store\modules\category.ts
//商品分类全局组件的小仓库
import { defineStore } from 'pinia'
import { reqC1, } from '@/api/product/attr'
const useCategoryStore = defineStore('Category', {state: () => {return {//存储一级分类的数据c1Arr: [],//存储一级分类的IDc1Id: '',}},actions: {//获取一级分类的方法async getC1() {//发请求获取一级分类的数据const result = await reqC1()if (result.code == 200) {this.c1Arr = result.data}},},getters: {},
})export default useCategoryStore
6.2.3 Category组件src\components\Category\index.vue

注意：el-option中的:value属性，它将绑定的值传递给el-select中的v-model绑定的值

<template><el-card><el-form inline><el-form-item label="一级分类"><el-select v-model="categoryStore.c1Id"><!-- label:即为展示数据 value:即为select下拉菜单收集的数据 --><el-optionv-for="(c1, index) in categoryStore.c1Arr":key="c1.id":label="c1.name":value="c1.id"></el-option></el-select></el-form-item>。。。。。。
</template><script setup lang="ts">//引入组件挂载完毕方法import { onMounted } from 'vue'//引入分类相关的仓库import useCategoryStore from '@/store/modules/category'let categoryStore = useCategoryStore()//分类全局组件挂载完毕,通知仓库发请求获取一级分类的数据onMounted(() => {getC1()})//通知仓库获取一级分类的方法const getC1 = () => {//通知分类仓库发请求获取一级分类的数据categoryStore.getC1()}
</script><style lang="" scoped></style>

6.3 分类数据ts类型

6.3.1 API下的type

src\api\product\attr\type.ts

//分类相关的数据ts类型
export interface ResponseData {code: numbermessage: stringok: boolean
}//分类ts类型
export interface CategoryObj {id: number | stringname: stringcategory1Id?: numbercategory2Id?: number
}//相应的分类接口返回数据的类型
export interface CategoryResponseData extends ResponseData {data: CategoryObj[]
}

使用：仓库中的result，API中的接口返回的数据

6.3.2 组件下的type

src\store\modules\types\type.ts


import type { CategoryObj } from '@/api/product/attr/type'
。。。。。
//定义分类仓库state对象的ts类型
export interface CategoryState {c1Id: string | numberc1Arr: CategoryObj[]c2Arr: CategoryObj[]c2Id: string | numberc3Arr: CategoryObj[]c3Id: string | number
}

使用：仓库中的state数据类型

6.4 完成分类组件业务

分类组件就是以及组件上来就拿到数据，通过用户选择后我们会拿到id，通过id发送请求之后二级分类就会拿到数据。以此类推三级组件。我们以二级分类为例。

6.4.1 二级分类流程
  1. 绑定函数

二级分类不是一上来就发生变化，而是要等一级分类确定好之后再发送请求获得数据。于是我们将这个发送请求的回调函数绑定在了一级分类的change属性上

  1. 回调函数
//此方法即为一级分类下拉菜单的change事件(选中值的时候会触发,保证一级分类ID有了)
const handler = () => {//通知仓库获取二级分类的数据categoryStore.getC2()
}
  1. pinia
//获取二级分类的数据async getC2() {//获取对应一级分类的下二级分类的数据const result: CategoryResponseData = await reqC2(this.c1Id)if (result.code == 200) {this.c2Arr = result.data}},
  1. 组件数据展示

  1. 三级组件同理
6.4.2 小问题

当我们选择好三级菜单后，此时修改一级菜单。二、三级菜单应该清空

清空id之后就不会显示了。

//此方法即为一级分类下拉菜单的change事件(选中值的时候会触发,保证一级分类ID有了)
const handler = () => {//需要将二级、三级分类的数据清空categoryStore.c2Id = ''categoryStore.c3Arr = []categoryStore.c3Id = ''//通知仓库获取二级分类的数据categoryStore.getC2()
}
//此方法即为二级分类下拉菜单的change事件(选中值的时候会触发,保证二级分类ID有了)
const handler1 = () => {//清理三级分类的数据categoryStore.c3Id = ''categoryStore.getC3()
}
6.4.3 添加属性按钮禁用

在我们没选择好三级菜单之前，添加属性按钮应该处于禁用状态

src\views\product\attr\index.vue（父组件）

6.5 已有属性与属性值展示

6.5.1 返回type类型src\api\product\attr\type.ts
//属性值对象的ts类型
export interface AttrValue {id?: numbervalueName: stringattrId?: numberflag?: boolean
}//存储每一个属性值的数组类型
export type AttrValueList = AttrValue[]
//属性对象
export interface Attr {id?: numberattrName: stringcategoryId: number | stringcategoryLevel: numberattrValueList: AttrValueList
}
//存储每一个属性对象的数组ts类型
export type AttrList = Attr[]
//属性接口返回的数据ts类型
export interface AttrResponseData extends ResponseData {data: Attr[]
}
6.5.2 API发送请求
//这里书写属性相关的API文件
import request from '@/utils/request'
import type { CategoryResponseData, AttrResponseData, Attr } from './type'
//属性管理模块接口地址
enum API {。。。。。。。//获取分类下已有的属性与属性值ATTR_URL = '/admin/product/attrInfoList/',
}
。。。。。。
//获取对应分类下已有的属性与属性值接口
export const reqAttr = (category1Id: string | number,category2Id: string | number,category3Id: string | number,
) => {return request.get<any, AttrResponseData>(API.ATTR_URL + `${category1Id}/${category2Id}/${category3Id}`,)
}
6.5.3 组件获取返回数据并存储数据

注意：通过watch监听c3Id，来适时的获取数据。src\views\product\attr\index.vue

<script setup lang="ts">
//组合式API函数
import { watch, ref } from 'vue'
//引入获取已有属性与属性值接口
import { reqAttr } from '@/api/product/attr'
import type { AttrResponseData, Attr } from '@/api/product/attr/type'
//引入分类相关的仓库
import useCategoryStore from '@/store/modules/category'
let categoryStore = useCategoryStore()
//存储已有的属性与属性值
let attrArr = ref<Attr[]>([])
//监听仓库三级分类ID变化
watch(() => categoryStore.c3Id,() => {//获取分类的IDgetAttr()},
)
//获取已有的属性与属性值方法
const getAttr = async () => {const { c1Id, c2Id, c3Id } = categoryStore//获取分类下的已有的属性与属性值let result: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id)console.log(result)if (result.code == 200) {attrArr.value = result.data}
}
</script>
6.5.4 将数据放入模板中
<el-card style="margin: 10px 0px"><el-buttontype="primary"size="default"icon="Plus":disabled="categoryStore.c3Id ? false : true">添加属性</el-button><el-table border style="margin: 10px 0px" :data="attrArr"><el-table-columnlabel="序号"type="index"align="center"width="80px"></el-table-column><el-table-columnlabel="属性名称"width="120px"prop="attrName"></el-table-column><el-table-column label="属性值名称"><!-- row：已有的属性对象 --><template #="{ row, $index }"><el-tagstyle="margin: 5px"v-for="(item, index) in row.attrValueList":key="item.id">{{ item.valueName }}</el-tag></template></el-table-column><el-table-column label="操作" width="120px"><!-- row：已有的属性对象 --><template #="{ row, $index }"><!-- 修改已有属性的按钮 --><el-button type="primary" size="small" icon="Edit"></el-button><el-button type="primary" size="small" icon="Delete"></el-button></template></el-table-column></el-table></el-card>
6.5.5 小问题

当我们获取数据并展示以后，此时修改一级分类或者二级分类，由于watch的存在，同样会发送请求。但是此时没有c3Id，请求会失败。因此将watch改为如下

//监听仓库三级分类ID变化
watch(() => categoryStore.c3Id,() => {//清空上一次查询的属性与属性值attrArr.value = []//保证三级分类得有才能发请求if (!categoryStore.c3Id) return//获取分类的ID getAttr()},
)

6.6 添加属性页面的静态展示

当点击添加属性后：

6.6.1 定义变量控制页面展示与隐藏
//定义card组件内容切换变量
let scene = ref<number>(0) //scene=0,显示table,scene=1,展示添加与修改属性结构

6.6.2 表单

6.6.3 按钮

6.6.4 表格

6.6.5按钮

6.6.6 三级分类禁用

当点击添加属性之后，三级分类应该被禁用。因此使用props给子组件传参

子组件：

二三级分类同理。

6.7 添加属性&&修改属性的接口类型

6.7.1修改属性

6.7.2 添加属性

6.7.3 type
//属性值对象的ts类型
export interface AttrValue {id?: numbervalueName: stringattrId?: numberflag?: boolean
}//存储每一个属性值的数组类型
export type AttrValueList = AttrValue[]
//属性对象
export interface Attr {id?: numberattrName: stringcategoryId: number | stringcategoryLevel: numberattrValueList: AttrValueList
}
6.7.4 组件收集新增的属性的数据
//收集新增的属性的数据
let attrParams = reactive<Attr>({attrName: '', //新增的属性的名字attrValueList: [//新增的属性值数组],categoryId: '', //三级分类的IDcategoryLevel: 3, //代表的是三级分类
})

6.8 添加属性值

一个操作最重要的是理清楚思路。添加属性值的总体思路是：收集表单的数据（绑定对应的表单项等）->发送请求（按钮回调函数，携带的参数）->更新页面

6.8.1 收集表单的数据（attrParams）
  1. 属性名称（attrName）

  1. 属性值数组（attrValueList）

我们给添加属性值按钮绑定一个回调，点击的时候会往attrParams.attrValueList中添加一个空数组。我们根据空数组的数量生成input框，再将input的值与数组中的值绑定。

//添加属性值按钮的回调
const addAttrValue = () => {//点击添加属性值按钮的时候,向数组添加一个属性值对象attrParams.attrValueList.push({valueName: '',flag: true, //控制每一个属性值编辑模式与切换模式的切换})
}

  1. 三级分类的id（categoryId）

三级分类的id（c3Id）在页面1的添加属性按钮之前就有了，因此我们把它放到添加属性按钮的回调身上

注意：每一次点击的时候,先清空一下数据再收集数据。防止下次点击时会显示上次的数据

//添加属性按钮的回调
const addAttr = () => {//每一次点击的时候,先清空一下数据再收集数据Object.assign(attrParams, {attrName: '', //新增的属性的名字attrValueList: [//新增的属性值数组],categoryId: categoryStore.c3Id, //三级分类的IDcategoryLevel: 3, //代表的是三级分类})//切换为添加与修改属性的结构scene.value = 1
}
  1. categoryLevel（固定的，无需收集）
6.8.2 发送请求&&更新页面

//保存按钮的回调
const save = async () => {//发请求let result: any = await reqAddOrUpdateAttr(attrParams)//添加属性|修改已有的属性已经成功if (result.code == 200) {//切换场景scene.value = 0//提示信息ElMessage({type: 'success',message: attrParams.id ? '修改成功' : '添加成功',})//获取全部已有的属性与属性值（更新页面）getAttr()} else {ElMessage({type: 'error',message: attrParams.id ? '修改失败' : '添加失败',})}
}

6.9 属性值的编辑与查看模式

6.9.1 模板的切换

在input下面添加了一个div，使用flag来决定哪个展示。

注意：flag放在哪？由于每一个属性值对象都需要一个flag属性，因此将flag的添加放在添加属性值的按钮的回调上。（注意修改属性值的type）

//添加属性值按钮的回调
const addAttrValue = () => {//点击添加属性值按钮的时候,向数组添加一个属性值对象attrParams.attrValueList.push({valueName: '',flag: true, //控制每一个属性值编辑模式与切换模式的切换})}

src\api\product\attr\type.ts

6.9.2 切换的回调
//属性值表单元素失却焦点事件回调
const toLook = (row: AttrValue, $index: number) => {。。。。。。//相应的属性值对象flag:变为false,展示divrow.flag = false
}//属性值div点击事件
const toEdit = (row: AttrValue, $index: number) => {//相应的属性值对象flag:变为true,展示inputrow.flag = true。。。。。。
}
6.9.3 处理非法属性值
//属性值表单元素失却焦点事件回调
const toLook = (row: AttrValue, $index: number) => {//非法情况判断1if (row.valueName.trim() == '') {//删除调用对应属性值为空的元素attrParams.attrValueList.splice($index, 1)//提示信息ElMessage({type: 'error',message: '属性值不能为空',})return}//非法情况2let repeat = attrParams.attrValueList.find((item) => {//切记把当前失却焦点属性值对象从当前数组扣除判断if (item != row) {return item.valueName === row.valueName}})if (repeat) {//将重复的属性值从数组当中干掉attrParams.attrValueList.splice($index, 1)//提示信息ElMessage({type: 'error',message: '属性值不能重复',})return}//相应的属性值对象flag:变为false,展示divrow.flag = false
}

6.10 表单聚焦&&删除按钮

表单聚焦可以直接调用input提供foces方法：当选择器的输入框获得焦点时触发

6.10.1 存储组件实例

使用ref的函数形式，每有一个input就将其存入inputArr中

//准备一个数组:将来存储对应的组件实例el-input
let inputArr = ref<any>([])

6.10.2 点击div转换成input框后的自动聚焦

注意：使用nextTick是因为点击后，组件需要加载，没办法第一时间拿到组件实例。所以使用nextTick会等到组件加载完毕后才调用，达到聚焦效果。

//属性值div点击事件
const toEdit = (row: AttrValue, $index: number) => {//相应的属性值对象flag:变为true,展示inputrow.flag = true//nextTick:响应式数据发生变化,获取更新的DOM(组件实例)nextTick(() => {inputArr.value[$index].focus()})
}
6.10.3 添加属性值自动聚焦
//添加属性值按钮的回调
const addAttrValue = () => {//点击添加属性值按钮的时候,向数组添加一个属性值对象attrParams.attrValueList.push({valueName: '',flag: true, //控制每一个属性值编辑模式与切换模式的切换})//获取最后el-input组件聚焦nextTick(() => {inputArr.value[attrParams.attrValueList.length - 1].focus()})
}
6.10.4 删除按钮

6.11属性修改业务

6.11.1属性修改业务

修改业务很简单：当我们点击修改按钮的时候，将修改的实例（row）传递给回调函数。回调函数：首先跳转到第二页面，第二页面是根据attrParams值生成的，我们跳转的时候将实例的值传递给attrParams

//table表格修改已有属性按钮的回调
const updateAttr = (row: Attr) => {//切换为添加与修改属性的结构scene.value = 1//将已有的属性对象赋值给attrParams对象即为//ES6->Object.assign进行对象的合并Object.assign(attrParams, JSON.parse(JSON.stringify(row)))
}
6.11.2 深拷贝与浅拷贝

深拷贝和浅拷贝的区别

1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

这里存在一个问题，也就是当我们修改属性值后，并没有保存（发请求），但是界面还是改了。这是因为我们的赋值语句：Object.assign(attrParams, row)是浅拷贝。相当于我们在修改服务器发回来的数据并展示在页面上。服务器内部并没有修改。

解决：将浅拷贝改为深拷贝：Object.assign(attrParams, JSON.parse(JSON.stringify(row)))

6.12 删除按钮&&清空数据

6.12.1删除按钮
  1. API
//这里书写属性相关的API文件
import request from '@/utils/request'
import type { CategoryResponseData, AttrResponseData, Attr } from './type'
//属性管理模块接口地址
enum API {。。。。。。//删除某一个已有的属性DELETEATTR_URL = '/admin/product/deleteAttr/',
}
。。。。。。//删除某一个已有的属性业务
export const reqRemoveAttr = (attrId: number) =>request.delete<any, any>(API.DELETEATTR_URL + attrId)
  1. 绑定点击函数&&气泡弹出框

  1. 回调函数（功能实现&&刷新页面）
//删除某一个已有的属性方法回调
const deleteAttr = async (attrId: number) => {//发相应的删除已有的属性的请求let result: any = await reqRemoveAttr(attrId)//删除成功if (result.code == 200) {ElMessage({type: 'success',message: '删除成功',})//获取一次已有的属性与属性值getAttr()} else {ElMessage({type: 'error',message: '删除失败',})}
}
6.12.2路由跳转前清空数据
//路由组件销毁的时候，把仓库分类相关的数据清空
onBeforeUnmount(() => {//清空仓库的数据categoryStore.$reset()
})

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

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

相关文章

完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示

完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示

摘要&#xff1a;本文通过分析完美日记在营销中利用社会基础设施升级红利、网红与新流量平台、KOL 和私域流量等策略取得成功的案例&#xff0c;探讨其对开源 AI 智能名片 2 1 链动模式 S2B2C 商城小程序在营销推广、用户获取与留存、提升复购率等方面的启示&#xff0c;为商城…
阅读更多...
【Hive sql 面试题】统计Top3歌单以及每个Top3歌单下的Top3歌曲（难）

【Hive sql 面试题】统计Top3歌单以及每个Top3歌单下的Top3歌曲（难）

表数据如下&#xff1a; 1 1 经典老歌 1 月亮代表我的心 2 1 经典老歌 1 月亮代表我的心 3 1 经典老歌 3 夜来香 4 1 经典老歌 4 我只在乎你 5 1 经典老歌 5 千言万语 6 1 经典老歌 5 千言万语 7 2 流行金曲 7 突然好想你 8 2 流行金曲 8 后来 9 2 流行金曲 9 童话 10 2 流行金…
阅读更多...
深入剖析卷积神经网络中的卷积核

深入剖析卷积神经网络中的卷积核

深入剖析卷积神经网络中的卷积核 前言一、卷积核的数学基础代码示例&#xff1a;简单的2D卷积操作 二、卷积核的类型与作用1. 边缘检测卷积核代码示例&#xff1a;Sobel算子 2. 模糊与平滑卷积核代码示例&#xff1a;高斯滤波器 三、卷积核的实际应用四、卷积核的初始化与学习五…
阅读更多...
【GIT】-git常见指令

【GIT】-git常见指令

概念 远程仓库和本地仓库 常用指令&#xff1a; ls/ll查看当前目录cat查看文件内容touch创建文件vivi编辑器 备注&#xff1a; git GUI&#xff1a;是git提供的图形化工具 GIT Bash&#xff1a;Git提供的命令行工具 在安装GIT后要配置用户和账号&#xff01; 配置用户信息 …
阅读更多...
高效实现聚水潭·奇门售后数据集成MySQL案例详解

高效实现聚水潭·奇门售后数据集成MySQL案例详解

聚水潭奇门数据集成到MySQL的技术案例分享 在现代企业的数据管理中&#xff0c;如何高效、准确地实现不同系统之间的数据对接和集成是一个关键问题。本文将聚焦于一个具体的系统对接集成案例&#xff1a;将聚水潭奇门平台的售后单数据集成到MySQL数据库中&#xff0c;方案名称…
阅读更多...
软件测试八股文个人总结

软件测试八股文个人总结

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前面看到了一些面试题&#xff0c;总感觉会用得到&#xff0c;但是看一遍又记不住&#xff0c;所以我把面试题都整合在一起&#xff0c;都是来自各路大佬的分享&am…
阅读更多...
python读取视频并转换成gif图片

python读取视频并转换成gif图片

1. 安装三方库 moviepy 将视频转换成gif&#xff0c;需要使用 moviepy库 确保已经安装了moviepy库 pip install moviepy2. 代码实现&#xff1a; from moviepy.editor import VideoFileClipmyclip VideoFileClip("video.mp4") myclip2 myclip.subclip(0, 10).re…
阅读更多...
k8s部署redis远程连接示例

k8s部署redis远程连接示例

一、环境 节点 IP 服务 master 192.168.126.46 docker、kubeadm、kubelet、kubectl、flannel、telnet node1 192.168.126.47 docker、kubeadm、kubelet、kubectl、flannel、telnet node2 192.168.126.48 docker、kubeadm、kubelet、kubectl、flannel、telnet ubunt…
阅读更多...
UI自动化测试 —— CSS元素定位实践！

UI自动化测试 —— CSS元素定位实践！

前言 自动化测试元素定位是指在自动化测试过程中&#xff0c;通过特定的方法或策略来准确识别和定位页面上的元素&#xff0c;以便对这些元素进行进一步的操作或断言。这些元素可以是文本框、按钮、链接、图片等HTML页面上的任何可见或不可见的组件。 在自动化测试中&#xf…
阅读更多...
【含开通报告+文档+源码】基于SpringBoot的新能源充电桩管理系统的设计与实现

【含开通报告+文档+源码】基于SpringBoot的新能源充电桩管理系统的设计与实现

开题报告 近年来&#xff0c;随着全球对环境问题的关注和新能源汽车的普及&#xff0c;新能源充电桩的需求显著增加[1]。为了满足大量新能源车辆的充电需求&#xff0c;各地纷纷建设新能源充电桩站点。然而&#xff0c;随着充电桩数量的增加&#xff0c;管理和运营充电桩也面临…
阅读更多...
Unity引擎材质球残留贴图引用的处理

Unity引擎材质球残留贴图引用的处理

大家好&#xff0c;我是阿赵。   这次来分享一下Unity引擎材质球残留贴图引用的处理 一、 问题 在使用Unity调整美术效果的时候&#xff0c;我们很经常会有这样的操作&#xff0c;比如&#xff1a; 1、 同一个材质球切换不同的Shader、 比如我现在有2个Shader&#xff0c;…
阅读更多...
一行代码实现垂直居中

一行代码实现垂直居中

实现元素垂直居中的方案有很多&#xff0c;比如定位、伸缩盒子、行高等等。 但在 2024 年的Chrome 123 版本中&#xff0c; CSS 原生可以使用 1 个 CSS 属性 align-content: center进行垂直居中。 如何使用 <!DOCTYPE html> <html lang"en"> <head&…
阅读更多...
云计算作业一

云计算作业一

目录 0. 前置准备 0.1 安装虚拟机 0.2 Linux统一设置 1. Hadoop安装配置 1.1 环境准备 1.2 Hadoop伪分布式安装 1.3 Hadoop集群安装 2. HDFS实验&#xff0c;包括Shell命令操作和Java接口访问 2.1 HDFS操作命令 2.2 通过Java项目访问HDFS 2.3 使用winutils解决警告信…
阅读更多...
C# 结构型设计模式----适配器模式

C# 结构型设计模式----适配器模式

1、简介 简单的说就是将一个类的接口转换成客户希望的另一个接口。 举例理解: 你买了一个苹果手机&#xff0c;但是家里的数据线都是安卓的&#xff0c;你想用安卓的线充你的苹果手机&#xff0c;那你就需要一个转接头。适配器模式就是适用于这种情况。 适配的本质就是转换…
阅读更多...
感受野是什么？有什么用？从感受野的角度理解，FCN要堆叠卷积层

感受野是什么？有什么用？从感受野的角度理解，FCN要堆叠卷积层

参考&#xff1a;感受野 1.感受野是什么 感受野(receptive field)这一概念来自于生物神经科学&#xff0c;是指感觉系统中的任一神经元&#xff0c;其所受到的感受器神经元的支配范围。感受器神经元就是指接收感觉信号的最初级神经元。 而在卷积神经网络中&#xff0c;感受野…
阅读更多...
C++基础三（构造函数，形参默认值，函数重载，单例模式，析构函数，内联函数，拷贝构造函数）

C++基础三（构造函数，形参默认值，函数重载，单例模式，析构函数，内联函数，拷贝构造函数）

C有六个默认函数&#xff0c;分别是&#xff1a; 1、默认构造函数; 2、默认拷贝构造函数; 3、默认析构函数; 4、赋值运算符; 5、取址运算符; 6、取址运算符const; 构造函数 构造函数(初始化类成员变量)&#xff1a; 1、属于类的成员函数之一 …
阅读更多...
LEADTOOLS 版本 23 现已发布，引入了 Excel API等众多新功能！

LEADTOOLS 版本 23 现已发布，引入了 Excel API等众多新功能！

LEADTOOLS 以其在全世界主要国家中占有的市场领导地位&#xff0c;在数码图象开发工具领域中已成为既定的全球领导者&#xff0c;其不断发展和扩展功能&#xff0c;以帮助开发人员构建更好、更强大的应用程序。最新发布的 LEADTOOLS 版本 23引入了许多新功能&#xff0c;包括新…
阅读更多...
鸿蒙系统的优势 不足以及兼容性与未来发展前景分析

鸿蒙系统的优势 不足以及兼容性与未来发展前景分析

2024 年 10 月 22 日&#xff1a;华为正式发布原生鸿蒙操作系统 HarmonyOS next&#xff0c;并正式命名为 HarmonyOS 5&#xff0c;这是鸿蒙系统史上最大的升级&#xff0c;实现了国产操作系统从底层架构到应用生态的全面自主可控。 鸿蒙系统与安卓、iOS 相比&#xff0c;具有…
阅读更多...
Hive 2.x 的安装与配置

Hive 2.x 的安装与配置

Hive 2.x 的安装与配置 1 简介 基于Hadoop的一个数据仓库工具&#xff0c;可将结构化数据文件映射为一张数据库表&#xff0c;并提供简单[SQL]查询&#xff0c;可将SQL语句转换为MapReduce任务进行运行。 优点 学习成本低&#xff0c;可通过类SQL语句快速实现简单的MapReduce统…
阅读更多...
关于图像客观指标的调试总结

关于图像客观指标的调试总结

1、问题背景 工作中经常有调试图像客观指标的需求&#xff0c;很容易遇到我们自己的环境测试是过的&#xff0c; 但客户那边的环境就是测不过&#xff0c;这时候该怎么办呢&#xff1f; 2、问题分析 首先要改变以往的工作思路&#xff0c;在调试的过程中不能说指标过了就完了&a…
阅读更多...
最新文章

Copyright @ 2022~2023