前端知识点杂记

Landy_Jay

已于 2024-06-18 20:48:02 修改

阅读量1.9k

点赞数 36

文章标签：前端

于 2024-05-28 21:03:47 首次发布

本文链接：https://blog.csdn.net/Landy_Jay/article/details/139114580

版权

本文章用于记录前端学习中遇到的琐碎问题及解决方法，欢迎大家一起学习补充~

前端如何获取UUID发送至后端？

前端如何获取TimeStamp？对应Java的哪一类？

config文件中配置使@符号可以表示src根路径

前端如何获取UUID发送至后端？

1. 命令行下载uuid库

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"这样的语法，它通常指的是一个作用域插槽（Scoped Slot）的用法，其中scope是一个变量名，用于访问父组件传递给插槽的数据。

作用域插槽允许子组件向父组件传递数据，并在父组件的模板中控制这些数据的渲染方式。scope对象包含了子组件传递给插槽的所有属性和方法，这些属性和方法可以在插槽的内容中。

<el-table :data="users" border style="width: 100%" />

如向table表格中传入users数组，要访问表格每行对应的user对象，则可以使用v-slot插槽：

<template v-slot="scope">
    <el-button type="danger" @click="deleteUser(scope)">删除</el-button>
</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>  
            </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" />

解析：

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"

这段代码 @update:visible="visible = $event" 表示监听一个名为 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 来构建绝对路径  
      }  
    },
})