onShow()?{
?uni.checkSession({
?????success:?(data)?=>?{
?????????this.getSessionId()
?????},
?????fail:?()?=>?{
?????????this.getSessionId()
?????}
?})
},
//?獲取用戶的手機號
getPhoneNumber(info)?{
????let?wxAuth?=?{
????????encryptedData:?info.detail.encryptedData,
????????iv:?info.detail.iv,
????????sessionId:?uni.getStorageSync("sessionId")
????}
????this.$http("/user/authLogin",?"post",?wxAuth).then((res)?=>?{
????????if?(res.data.code?==?0?&&?res.data.data.token)?{
????????????uni.setStorage({
????????????????key:?'token',
????????????????data:?res.data.data.token,
????????????????success:?function({
????????????????????uni.reLaunch({
????????????????????????url:?'../home/home?isLogin=true'
????????????????????})
????????????????}
????????????})
????????}?else?{
????????????uni.showToast({
????????????????title:?res.data.message,
????????????????icon:?"none"
????????????})
????????}
????})
},
//?獲取sessionId
getSessionId()?{
????uni.login({
????????provider:?'weixin',
????????success:?(res3)?=>?{
????????????this.$http("/user/getSessionId",?"get",?{
????????????????code:?res3.code
????????????}).then(res2?=>?{
????????????????if?(res2.data.data.sessionId)?{
????????????????????uni.setStorageSync("sessionId",?res2.data.data.sessionId)
????????????????}
????????????})
????????}
????})
}
UserController.java
@RestController
@RequestMapping("user")
public?class?UserController?{
????
????@Autowired
????private?UserService?userService;
????//?getSessionId
????@GetMapping("getSessionId")
????public?Result?getSessionId(String?code)?{
????????return?userService.getSessionId(code);
????}
}
service?UserService.java
@Service
public?class?UserService?{
????
????@Autowired
????private?StringRedisTemplate?redisTemplate;
????
????@Value("${wxmini.secret}")
????private?String?secret;
????
????@Value("${wxmini.appid}")
????private?String?appid;
????
????public?Result?getSessionId(String?code)?{
????????//
????}
}npm i --save-dev @types/websocket
特定的錯誤信息 "Invalid argument" 表明可能存在一個參數(shù)傳遞給數(shù)據(jù)庫加載過程中的問題。
要解決這個問題，您可以考慮以下步驟：
檢查加載數(shù)據(jù)庫的代碼，并檢查是否存在傳遞錯誤或無效的參數(shù)。
驗證數(shù)據(jù)庫所需的依賴項或庫是否已正確安裝并更新。
確保數(shù)據(jù)庫配置（如連接設置或文件路徑）準確有效。
檢查最近是否有代碼、依賴項或環(huán)境的更改或更新可能導致此問題。
查找任何相關的錯誤日志或堆棧跟蹤，提供關于錯誤的更詳細信息。這有助于確定問題的具體原因。
如果根據(jù)提供的信息無法解決問題，請?zhí)峁└嘣敿毿畔?，例如與數(shù)據(jù)庫加載過程相關的具體代碼和任何相關的錯誤日志或消息。
一、brew 安裝腳本 （自動選擇軟件源）
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
二、brew 卸載腳本
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/HomebrewUninstall.sh)"
三、常用命令
安裝軟件：brew install xxx
卸載軟件：brew uninstall xxx
搜索軟件：brew search xxx
更新軟件：brew upgrade xxx
查看列表：brew list
更新brew：brew update
清理所有包的舊版本：brew cleanup
清理指定包的舊版本：brew cleanup $FORMULA
查看可清理的舊版本包，不執(zhí)行實際操作：brew cleanup -n
Brotli 是一種數(shù)據(jù)壓縮算法，它能夠提供高效的壓縮和解壓縮性能。它由谷歌開發(fā)，并于2015年發(fā)布。Brotli 壓縮算法在壓縮比率和壓縮速度方面都具有很好的表現(xiàn)，尤其在處理文本和網(wǎng)絡傳輸數(shù)據(jù)時效果顯著。
在 macOS 上，Homebrew（brew）是一個常用的包管理器，用于安裝和管理各種開源軟件包。brew brotli 是用于在 macOS 上安裝 Brotli 壓縮算法的 Homebrew 命令。通過運行該命令，您可以方便地從 Homebrew 倉庫中獲取 Brotli 并進行安裝。
要安裝 Brotli，請打開終端并運行以下命令：
brew?install?brotli這將下載 Brotli 的二進制文件，并將其安裝到您的 macOS 系統(tǒng)中。安裝完成后，您可以使用 Brotli 命令行工具執(zhí)行壓縮和解壓縮操作。
例如，要壓縮文件，可以使用以下命令：
brotli?-o?compressed_file.br?original_file要解壓縮文件，可以使用以下命令：
brotli?-d?-o?decompressed_file?original_file.br通過使用 brew brotli 命令安裝 Brotli，您可以輕松地在 macOS 上使用該壓縮算法，并將其應用于您的項目或數(shù)據(jù)處理需求。
壓縮文件：
brotli?-o?compressed_file.br?original_file這將使用 Brotli 壓縮算法將 original_file 文件壓縮，并將壓縮后的結果保存為 compressed_file.br。
解壓縮文件：
brotli?-d?-o?decompressed_file?original_file.br這將使用 Brotli 壓縮算法解壓縮 original_file.br 文件，并將解壓縮后的結果保存為 decompressed_file。
請確保在運行以上命令時，將 original_file 替換為要壓縮或解壓縮的實際文件名，并提供適當?shù)哪繕宋募?/p>
Name? Status? User? ? File
redis started jeskson ~/Library/LaunchAgents/homebrew.mxcl.redis.plist
安裝 Redis 之后，你可以使用以下命令來啟動 Redis 服務：
brew?services?start?redis這將啟動 Redis 服務，并使其在后臺運行。你可以通過以下命令來檢查 Redis 服務是否正在運行：
brew?services?list你應該看到 Redis 服務的狀態(tài)為 "started"。
一旦 Redis 服務正在運行，你可以使用以下命令來連接到 Redis 服務器：
redis-cli這將打開 Redis 命令行界面，你可以在其中執(zhí)行各種 Redis 命令和操作。例如，你可以使用以下命令來設置和獲取鍵值對：
set?mykey?"Hello,?Redis"
get?mykey這些命令將設置鍵名為 "mykey" 的鍵值對，并從 Redis 中獲取它的值。
當你完成使用 Redis 后，可以使用以下命令來停止 Redis 服務：
brew?services?stop?redis這將停止 Redis 服務，并使其不再運行。
const?connectWebSocket?=?()?=>?{
????socket.value?=?new?WebSocket('')?//?替換為你的?WebSocket?服務器地址
????socket.value.onopen?=?()?=>?{
????????console.log('WebSocket?連接已建立')
????????const?message?=?JSON.stringify({
????????})
????????socket.value.send(message)
????}
????socket.value.onmessage?=?(event:?{?data:?any?})?=>?{
????????console.log('接收到?WebSocket?消息:',?event.data)
????????//?處理接收到的消息
????}
????socket.value.onclose?=?()?=>?{
????????console.log('WebSocket?連接已關閉')
????}
????socket.value.onerror?=?(error:?any)?=>?{
????????console.error('WebSocket?錯誤:',?error)
????}
}重新連接
如果 WebSocket 連接斷開，可以通過重新創(chuàng)建 WebSocket 實例來重新連接。
socket.value.onclose?=?()?=>?{
??console.log('WebSocket?disconnected');
??//?重新連接
??socket.value?=?useWebSocket('wss://example.com/socket');
};為了保持 WebSocket 連接的活躍狀態(tài)，可以使用心跳機制定期發(fā)送心跳消息。
//?心跳消息
const?heartbeatMessage?=?'ping'
//?定時發(fā)送心跳消息
setInterval(()?=>?{
????socket.value.send(heartbeatMessage)
},?5000000000)
//?監(jiān)聽消息事件
socket.value.onmessage?=?(event:?{?data:?any?})?=>?{
????const?message?=?event.data
????console.log('定時發(fā)送心跳消息:',?event.data)
????if?(message?===?heartbeatMessage)?{
????????//?收到心跳消息，做相應處理
????}?else?{
????????//?處理其他消息
????}
}定期發(fā)送心跳消息，并在收到心跳消息時進行相應處理。
微信小程序登錄流程前后端描述，小程序通過wx.login()獲取code，如0f14dT0w3P2bT03Pgz0w3ugqsE44dxxx，
const?{?code?}:?any?=?await?uni.login({
????provider:?'weixin'
})
const?data?=?await?mnpLogin({
????code
})
loginHandle(data)通過wx.request()發(fā)送code，后端的接口帶入?yún)?shù)code，獲取getSessionId，后端通過登錄憑證校驗接口 appid + appsecret + code 去微信接口服務拿取數(shù)據(jù) 如：session_key+openid等 然后 后端 可以（自定義登錄態(tài)）與openid，session_key關聯(lián)，返回前端-返回自定義登錄態(tài) （不關緊要的內(nèi)容：自定義登錄狀態(tài)存入storage，wx.request()發(fā)起業(yè)務請求，攜帶 自定義登錄態(tài)，后端通過自定義登錄態(tài)，查詢openid和session_key，返回業(yè)務數(shù)據(jù)）
server?{
????listen????8080;
????????#?用戶訪問?ip:8080/test?下的所有路徑代理到?github
????????location?/test?{
?????????proxy_pass???https://github.com;
????????}
????????#?所有?/api?下的接口訪問都代理到本地的?8888?端口
????????#?例如你本地運行的?java?服務的端口是?8888，接口都是以?/api?開頭
????????location?/api?{
????????????proxy_pass???http://127.0.0.1:8888;
????????}
}反向代理
我們最常說的反向代理的是通過反向代理解決跨域問題。
其實反向代理還可以用來控制緩存（代理緩存 proxy cache），進行訪問控制等等，以及后面說的負載均衡其實都是通過反向代理來實現(xiàn)的。
server?{
????listen????8080;
????????#?用戶訪問?ip:8080/test?下的所有路徑代理到?github
????????location?/test?{
?????????proxy_pass???https://github.com;
????????}
????????#?所有?/api?下的接口訪問都代理到本地的?8888?端口
????????#?例如你本地運行的?java?服務的端口是?8888，接口都是以?/api?開頭
????????location?/api?{
????????????proxy_pass???http://127.0.0.1:8888;
????????}
}負載均衡
通過負載均衡充利用服務器資源，nginx 目前支持自帶 4 種負載均衡策略，還有 2 種常用的第三方策略。
輪詢策略（默認）
每個請求按時間順序逐一分配到不同的后端服務器，如果有后端服務器掛掉，能自動剔除。但是如果其中某一臺服務器壓力太大，出現(xiàn)延遲，會影響所有分配在這臺服務器下的用戶。
http?{
????upstream?test.com?{
????????server?192.168.1.12:8887;
????????server?192.168.1.13:8888;
????}
????server?{
????????location?/api?{
????????????proxy_pass??http://test.com;
????????}
????}
}根據(jù)服務器權重
例如要配置：10 次請求中大概 1 次訪問到 8888 端口，9 次訪問到 8887 端口：
http?{
????upstream?test.com?{
????????server?192.168.1.12:8887?weight=9;
????????server?192.168.1.13:8888?weight=1;
????}
????server?{
????????location?/api?{
????????????proxy_pass??http://test.com;
????????}
????}
}客戶端 ip 綁定（ip_hash）
來自同一個 ip 的請求永遠只分配一臺服務器，有效解決了動態(tài)網(wǎng)頁存在的 session 共享問題。例如：比如把登錄信息保存到了 session 中，那么跳轉(zhuǎn)到另外一臺服務器的時候就需要重新登錄了。
所以很多時候我們需要一個客戶只訪問一個服務器，那么就需要用 ip_hash 了。
http?{
????upstream?test.com?{
?????ip_hash;
????????server?192.168.1.12:8887;
????????server?192.168.1.13:8888;
????}
????server?{
????????location?/api?{
????????????proxy_pass??http://test.com;
????????}
????}
}最小連接數(shù)策略
將請求優(yōu)先分配給壓力較小的服務器，它可以平衡每個隊列的長度，并避免向壓力大的服務器添加更多的請求。
http?{
????upstream?test.com?{
?????least_conn;
????????server?192.168.1.12:8887;
????????server?192.168.1.13:8888;
????}
????server?{
????????location?/api?{
????????????proxy_pass??http://test.com;
????????}
????}
}最快響應時間策略（依賴于第三方 NGINX Plus）
依賴于 NGINX Plus，優(yōu)先分配給響應時間最短的服務器。
http?{
????upstream?test.com?{
?????fair;
????????server?192.168.1.12:8887;
????????server?192.168.1.13:8888;
????}
????server?{
????????location?/api?{
????????????proxy_pass??http://test.com;
????????}
????}
}Provide/Inject 調(diào)用
main.ts
import?axios?from?'axios'
import?VueAxios?from?'vue-axios'
app.use(VueAxios,?axios)
app.provide('axios',?app.config.globalProperties.axios)?
App.vue
const?axios:?any?=?inject('axios')??//?inject?axios
axios({url,data,...其他配置}).then()?//?同上什么是?hook??
在?React?中的意思是將一個以?use?開頭，含react?狀態(tài)和 effect 純函數(shù)的外部代碼掛入到它的節(jié)點當中。
<template>
????<div?class="demo1-container">
????????<div?ref="sectionRef"?class="ref-section"></div>
????</div>
</template>
<script?setup?lang="ts">
import?{ref}?from?'vue'
const?sectionRef?=?ref()
</script><template>
????<div?class="demo1-container">
????????<p>通過ref直接拿到dom</p>
????????<div?ref="sectionRef"?class="ref-section"></div>
????????<button?@click="higherAction"?class="btn">變高</button>
????</div>
</template>
<script?setup?lang="ts">
import?{ref}?from?'vue'
const?sectionRef?=?ref()
let?height?=?100;
const?higherAction?=?()?=>?{
????height?+=?50;
????sectionRef.value.style?=?`height:?${height}px`;
}
</script>
<style?lang="scss"?scoped>
.demo1-container?{
????width:?100%;
????height:?100%;
????.ref-section?{
????????width:?200px;
????????height:?100px;
????????background-color:?pink;
????????transition:?all?.5s?ease-in-out;
????}
????.btn?{
????????width:?200px;
????????height:?50px;
????????background-color:?gray;
????????color:?#fff;
????????margin-top:?100px;
????}
}
</style><template>
????<div?class="demo2-container">
????????<p>通過父容器遍歷拿到dom</p>
????????<div?ref="listRef"?class="list-section">
????????????<div?@click="higherAction(index)"?class="list-item"?v-for="(item,?index)?in?state.list"?:key="index">
????????????????<span>{{item}}</span>
????????????</div>
????????</div>
????</div>
</template>
<script?setup?lang="ts">
import?{?ref,?reactive?}?from?'vue'
const?listRef?=?ref()
const?state?=?reactive({
????list:?[1,?2,?3,?4,?5,?6,?7,?8]
})
const?higherAction?=?(index:?number)?=>?{
????let?height?=?listRef.value.children[index].style.height???listRef.value.children[index].style.height?:?'20px';
????height?=?Number(height.replace('px',?''));
????listRef.value.children[index].style?=?`height:?${height?+?20}px`;
}
</script>
<style?lang="scss"?scoped>
.demo2-container?{
????width:?100%;
????height:?100%;
????.list-section?{
????????width:?200px;
????????.list-item?{
????????????width:?200px;
????????????height:?20px;
????????????background-color:?pink;
????????????color:?#333;
????????????transition:?all?.5s?ease-in-out;
????????????display:?flex;
????????????justify-content:?center;
????????????align-items:?center;
????????}
????}
}
</style><template>
??<img?alt="Vue?logo"?src="./assets/logo.png"?/>
??<p>{{?message?}}</p>
??<button?@click="changeMsg">更改?message</button>
</template>
<script?setup?lang="ts">
import?{?ref,?watch?}?from?"vue";
const?message?=?ref("小豬課堂");
watch(message,?(newValue,?oldValue)?=>?{
??console.log("新的值:",?newValue);
??console.log("舊的值:",?oldValue);
});
const?changeMsg?=?()?=>?{
??message.value?=?"張三";
};
</script>第一次渲染頁面的時候，watch?監(jiān)聽器里面的回調(diào)函數(shù)就執(zhí)行一遍。
watchEffect?也是一個監(jiān)聽器，只不過它不會像?watch?那樣接收一個明確的數(shù)據(jù)源，它只接收一個回調(diào)函數(shù)。而在這個回調(diào)函數(shù)當中，它會自動監(jiān)聽響應數(shù)據(jù)，當回調(diào)函數(shù)里面的響應數(shù)據(jù)發(fā)生變化，回調(diào)函數(shù)就會立即執(zhí)行。
如果我們想要在回調(diào)函數(shù)里面獲取更新后的?DOM，非常簡單，我們只需要再給監(jiān)聽器多傳遞一個參數(shù)選項即可：flush: 'post'
const?unwatch?=?watchEffect(()?=>?{})?//?...當該偵聽器不再需要時?unwatch()加群聯(lián)系作者vx：xiaoda0423文章來源：http://www.zghlxwxcb.cn/news/detail-520896.html
倉庫地址：https://github.com/webVueBlog/WebGuideInterview文章來源地址http://www.zghlxwxcb.cn/news/detail-520896.html
到了這里，關于前端系列20集-vue3，微信小程序，brew，redis，WebSocket的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
