柚子快報激活碼778899分享：前端知識點雜記

http://yzkb.51969.com/

本文章用于記錄前端學習中遇到的瑣碎問題及解決方法，歡迎大家一起學習補充~

目錄

前端如何獲取UUID發(fā)送至后端？

前端如何獲取TimeStamp？對應(yīng)Java的哪一類？

是對象，也是Map

監(jiān)聽窗口被關(guān)閉事件

el-table中如何獲取每行的對象？

vue的父子組件之間進行通訊？

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

前端如何獲取UUID發(fā)送至后端？

1. 命令行下載uuid庫

npm install uuid

2. 工程導(dǎo)入uuid庫

import { v4 as uuidv4 } from "uuid";

3. 使用方法生成uuid實例

const UUID = uuidv4();

4. 后端接收

public class Test{

@JsonProperty("UUID") // 聲明與JSON對象對應(yīng)的字段名

private String uuid;

}

MyBatis無法將java.util.UUID類與數(shù)據(jù)庫的varchar類實現(xiàn)映射，因此建議使用String類來接收uuid?

前端如何獲取TimeStamp？對應(yīng)Java的哪一類？

// 時間戳

const orderTime = +new Date();

可以使用Long類來接收時間戳，數(shù)據(jù)庫的時間戳字段也是用long類型進行映射即可

是對象，也是Map

js中不止Map()類實例可以實現(xiàn)key/value的映射，直接使用Object對象也可以實現(xiàn)key/value映射。

// 計算屬性，根據(jù)UUID分組訂單

const groupedOrders = computed(() => {

const groups = {};

props.shopList.forEach((order) => {

if (!groups[order.UUID]) {

groups[order.UUID] = [];

}

groups[order.UUID].push(order);

});

return groups;

});

如這個函數(shù)中，gruops作為對象，可以直接使用[keyName]訪問對應(yīng)的value，且可以對key對應(yīng)的value進行賦值等操作。

要刪除對應(yīng)的key/value使用delete關(guān)鍵字即可：

delete classifiedList.value[UUID];

想要獲取classifiedList的長度？可以曲線救國：

Object.entries(obj)

// 返回一個包含對象所有可枚舉屬性的鍵值對數(shù)組，所以這個方法會返回鍵值對的總數(shù)。

?使用Object.entries獲取鍵值對數(shù)組，鍵值對數(shù)組的長度即為classifiedList的長度。

Object.keys(obj)

? 或者使用Object.keys()獲取鍵的數(shù)組，鍵數(shù)組的長度即為classifiedList的長度?

監(jiān)聽窗口被關(guān)閉事件

created(async () => {

window.addEventListener('beforeunload',()=>{

//... 銷毀前邏輯

})

})

window對象監(jiān)聽'beforeunload'事件即可。?

參考文章：vue 監(jiān)聽瀏覽器關(guān)閉或刷新事件_vue監(jiān)聽瀏覽器關(guān)閉-CSDN博客

el-table中如何獲取每行的對象？

v-slot：

在Vue.js中，v-slot指令用于定義具名插槽或默認插槽，并可以用來接收作用域插槽的數(shù)據(jù)。當你看到v-slot="scope"這樣的語法，它通常指的是一個作用域插槽（Scoped Slot）的用法，其中scope是一個變量名，用于訪問父組件傳遞給插槽的數(shù)據(jù)。

作用域插槽允許子組件向父組件傳遞數(shù)據(jù)，并在父組件的模板中控制這些數(shù)據(jù)的渲染方式。scope對象包含了子組件傳遞給插槽的所有屬性和方法，這些屬性和方法可以在插槽的內(nèi)容中。

如向table表格中傳入users數(shù)組，要訪問表格每行對應(yīng)的user對象，則可以使用v-slot插槽：

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訪問每行對應(yīng)的user對象，通過scope.$index訪問每行對象對應(yīng)的數(shù)組index?

JSON參數(shù)后端接收的嚴格要求：

后端若想接收JSON數(shù)據(jù)，首先需要進行相關(guān)配置，同時只能使用@RequestBody和對象來承接JSON，不能自動映射，也不能使用@RequestParam進行映射。

vue的父子組件之間進行通訊？

需求：點擊事件彈出的對話框為一個dialog.vue子組件。父組件向子組件傳入visible=true的屬性值時，對話框可正常彈出。但是父組件傳遞給子組件的屬性值是單向數(shù)據(jù)流，子組件中不能直接修改父組件visible=false以關(guān)閉對話框。如何解決？

解決：

如果想在用戶點擊取消按鈕時修改?visible?的值以關(guān)閉對話框，你需要通過觸發(fā)一個事件來通知父組件修改?visible?的值，因為 Vue 的 props 是單向數(shù)據(jù)流，子組件不應(yīng)該直接修改傳入的 props。

子組件中加入代碼：

父組件中加入代碼：

解析：

defineEmits?是 Vue 3 中用于在?