前端知识点杂记
Landy_Jay 2024-07-19 09:33:01 阅读 75
本文章用于记录前端学习中遇到的琐碎问题及解决方法，欢迎大家一起学习补充~
目录
前端如何获取UUID发送至后端？
前端如何获取TimeStamp？对应Java的哪一类？
是对象，也是Map
监听窗口被关闭事件
el-table中如何获取每行的对象？
vue的父子组件之间进行通讯？
config文件中配置使@符号可以表示src根路径
前端如何获取UUID发送至后端？
1. 命令行下载uuid库
<code>npm install uuid
2. 工程导入uuid库
import { v4 as uuidv4 } from "uuid";
3. 使用方法生成uuid实例
const UUID = uuidv4();
4. 后端接收
public class Test{
@JsonProperty("UUID") // 声明与JSON对象对应的字段名
private String uuid;
}
MyBatis无法将java.util.UUID类与数据库的varchar类实现映射，因此建议使用String类来接收uuid
前端如何获取TimeStamp？对应Java的哪一类？
// 时间戳
const orderTime = +new Date();
可以使用Long类来接收时间戳，数据库的时间戳字段也是用long类型进行映射即可
是对象，也是Map
js中不止Map()类实例可以实现key/value的映射，直接使用Object对象也可以实现key/value映射。
// 计算属性，根据UUID分组订单
const groupedOrders = computed(() => {
const groups = {};
props.shopList.forEach((order) => {
if (!groups[order.UUID]) {
groups[order.UUID] = [];
}
groups[order.UUID].push(order);
});
return groups;
});
如这个函数中，gruops作为对象，可以直接使用[keyName]访问对应的value，且可以对key对应的value进行赋值等操作。
要删除对应的key/value使用delete关键字即可：
delete classifiedList.value[UUID];
想要获取classifiedList的长度？可以曲线救国：
Object.entries(obj)
// 返回一个包含对象所有可枚举属性的键值对数组，所以这个方法会返回键值对的总数。
使用Object.entries获取键值对数组，键值对数组的长度即为classifiedList的长度。
Object.keys(obj)
或者使用Object.keys()获取键的数组，键数组的长度即为classifiedList的长度
监听窗口被关闭事件
created(async () => {
window.addEventListener('beforeunload',()=>{
//... 销毁前逻辑
})
})
window对象监听'beforeunload'事件即可。
参考文章：vue 监听浏览器关闭或刷新事件_vue监听浏览器关闭-CSDN博客
el-table中如何获取每行的对象？
v-slot：
在Vue.js中，v-slot指令用于定义具名插槽或默认插槽，并可以用来接收作用域插槽的数据。当你看到v-slot="scope"code>这样的语法，它通常指的是一个作用域插槽（Scoped Slot）的用法，其中scope是一个变量名，用于访问父组件传递给插槽的数据。
作用域插槽允许子组件向父组件传递数据，并在父组件的模板中控制这些数据的渲染方式。scope对象包含了子组件传递给插槽的所有属性和方法，这些属性和方法可以在插槽的内容中。
<el-table :data="users" border style="width: 100%" />code>
如向table表格中传入users数组，要访问表格每行对应的user对象，则可以使用v-slot插槽：
<template v-slot="scope">code>
<el-button type="danger" @click="deleteUser(scope)">删除</el-button>code>
</template>
scope对象中包含了如下信息：
$index: 2
cellIndex: 3
column: {order: '', id: 'el-table_8_column_32', type: 'default', property: undefined, align: 'is-center', …}
expanded: false
row: Proxy(Object) {userPhone: 'admin', userPassword: 'admin', userName: 'admin', userType: 'admin'}
store: {ns: {…}, assertRowKey: ƒ, updateColumns: ƒ, scheduleLayout: ƒ, isSelected: ƒ, …}
_self: {uid: 369, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
[[Prototype]]: Object
如可以通过scope.row访问每行对应的user对象，通过scope.$index访问每行对象对应的数组index
JSON参数后端接收的严格要求：
后端若想接收JSON数据，首先需要进行相关配置，同时只能使用@RequestBody和对象来承接JSON，不能自动映射，也不能使用@RequestParam进行映射。
vue的父子组件之间进行通讯？
需求：点击事件弹出的对话框为一个dialog.vue子组件。父组件向子组件传入visible=true的属性值时，对话框可正常弹出。但是父组件传递给子组件的属性值是单向数据流，子组件中不能直接修改父组件visible=false以关闭对话框。如何解决？
解决：
如果想在用户点击取消按钮时修改 visible 的值以关闭对话框，你需要通过触发一个事件来通知父组件修改 visible 的值，因为 Vue 的 props 是单向数据流，子组件不应该直接修改传入的 props。
子组件中加入代码：
<template>
<!-- ...（其他代码保持不变）... -->
<template #footer>
<div>
<!-- 修改取消按钮的事件处理 -->
<el-button @click="handleCancel">取消</el-button> code>
</div>
</template>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['update:visible']);
function handleCancel() {
// 触发自定义事件，通知父组件关闭对话框
emit('update:visible', false);
}
</script>
父组件中加入代码：
<modyfiy-dialog :visible="visible" @update:visible="visible = $event" />code>
解析：
defineEmits 是 Vue 3 中用于在 <script setup> 模式下声明组件可以发出哪些事件的函数。这有助于提供更好的类型检查和更清晰的组件接口。在 <script setup> 中使用，通常位于文件的顶部。它接受一个字符串数组或一个对象，用于定义组件可以发出的事件。
update:visible 的命名含义是：子组件希望通过触发update这个事件来更新父组件中名为 visible 的 prop 值。update:visible 这种命名方式在 Vue 中用于实现父子组件之间的双向数据绑定，允许子组件更新父组件中的 prop 值。虽然 Vue 3 对 .sync 的处理方式有所改变，但这种命名约定仍然被保留并用于相同的目的。
共有两种声明方式：
1. 字符串数组定义
const emit = defineEmits(['update:visible']);
2. 对象方式定义
const emit = defineEmits({
'update:visible': (value) => typeof value === 'boolean',
});
这种方式更加详细和灵活。它不仅声明了事件，还为每个事件提供了一个验证函数。在这个例子中，'update:visible' 事件的验证函数检查传递的值是否为布尔类型。如果尝试触发该事件并传递一个非布尔值，Vue 将在控制台中发出警告，指出参数不符合验证函数的要求。
emit 函数用于在 Vue 3 组件中触发自定义事件并传递必要的参数。emit 允许子组件向父组件发送消息，这是实现父子组件通信的一种重要方式。
function handleCancel() {
emit('update:visible', false);
}
调用handleCancel函数便可以利用emit触发 'update:visible' 事件，并传递 false 作为参数。
@update:visible="visible = $event"code>
这段代码 @update:visible="visible = $event"code> 表示监听一个名为 update:visible 的事件，并在该事件被触发时执行一段代码。具体来说， 当 update:visible 事件被触发时，父组件会执行 visible = $event 这个表达式。这里，visible 是父组件中的一个响应式数据属性，而 $event 包含了子组件触发事件时传递的值。这个表达式的执行会将父组件中的 visible 属性的值更新为子组件传递过来的新值。
config文件中配置使@符号可以表示src根路径
先引入resolve，再在defineConfig中配置
import {resolve} from 'path'
export default defineConfig({
plugins: [
//...
],
// 声明别名，使相对路径可以通过@来表示
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 使用 path.resolve 来构建绝对路径
}
},
})
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。