Javascript 使用 atob() 解密 base64 字串遇到的問題

這裡記錄我在使用 js 的 base64 解密功能時，因為 UTF-8 編碼與 base64 格式，會遇到的問題

Ionic 專案，無法切換頁面

我的 Ionic 專案有以下兩個 .vue 檔案（這邊僅列<template> tag 的 code）

<template>
	<ion-page>
		<ion-content class="ion-padding">
			<h1>登入</h1>
			<form ref="login-form" @submit="login">
				<ion-item>
					<ion-input name="mobile" label="手機號碼" placeholder="e.g. 0912345678" required/>
				</ion-item>

				<ion-item>
					<ion-input name="password" label="密碼" type="password" required/>
				</ion-item>
				<ion-button expand="full" class="ion-margin-top" type="submit">
					登入
				</ion-button>
			</form>
		</ion-content>
	</ion-page>

	 <ion-alert :is-open="alertButtonShow"
		header="登入失敗"
		message="帳號或密碼錯誤，請再試一次。"
		:buttons="[{
				text: 'OK',
				role: 'confirm',
				handler: () => {
					alertButtonShow = false
				},
			}
		]" />
</template>

<template>
	<ion-page>
		<ion-content >
			<ion-header :translucent="true" >
				<ion-toolbar>
					<ion-title>登入成功！</ion-title>
				</ion-toolbar>
			</ion-header>

			<ion-button @click="logout">
				登出
			</ion-button>
		</ion-content>
	</ion-page>
</template>

理想狀況下，當我點下第一個畫面的登入按鈕，會跳到第二頁；第二頁的登出按鈕會跳回第一頁

但實際情況卻是前半段可以成功，但第二頁的登出按鈕一直沒有作用

Ionic 的筆記：Ionic 要連線 Web Request

本文內容都是以 Ionic + Vue 為前題撰寫

CSS / JS 的圖形矩陣處理

眾所周知，CSS 的 transform 或是 SVG 的 transform 可以使用 translateX、rotateX、scale……等 transform functions。而裡面最為複雜的就是 matrix

參閱 MDN 的說明， matrix 有 6 個參數：matrix(a, b, c, d, tx, ty) ，以投影座標（因為我常用的 GIMP 、我當初學的都是使用投影坐標（projective coordinates），我這篇也都使用投影座標來講）來表示的話，就是：

$\left(\begin{array}{ccc}\mathrm{a}& \mathrm{c}& \mathrm{tx}\\ \mathrm{b}& \mathrm{d}& \mathrm{ty}\\ 0& 0& 1\end{array}\right)$

如果今天我 CSS 是 translateX(100px)，那相當於matrix(1, 0, 0, 1, 100, 0)，即： $\left(\begin{array}{ccc}1& 0& 1\\ 0& 100& 0\\ 0& 0& 1\end{array}\right)$

紀錄：deno 與 npm 的對應

紀錄：常用指令：查找大量有指定內容的檔案

Bash script

例如我現在要查 tomcat 的 log，查找說在 2020-01-10 ~ 2020-01-25 之間，連線 /api/foo/bar 這條 request 的資訊。

就能以以下指令來處理

$ cd {log 資料夾}
$ for i in {10..25} ; do sudo cat "localhost_access_log.2020-01-$i.txt" | grep "/api/foo/bar" ; done

$ cd {log 資料夾}
for /L %%i in (10, 1, 25) do (
	type "localhost_access_log.2020-01-%%i.txt" | findstr "/api/foo/bar"
)

git 無法刪除分支

這邊先提一下我的環境：

使用 OS 是 Windows 11

有安裝以下軟體：

• Git，版本是 git version 2.36.0.windows.1
• TortoiseGit v2.13.0
• VS Code

今天遇到的問題是，有些分支我要刪除時，跳出以下錯誤視窗

Could not delete reference
libgit2 returned: entry is not unique due to being a multivar

使用指令編譯 Android

紀錄一下如何純粹使用終端機指令，編譯 android APK

事前準備

1. Java，儘量使用最新版的 Java
2. Android SDK
   • 如果已經安裝 Android Studio，那就不用另外安裝
   • 如果不想安裝 Android Studio，那可以到Android Studio 下載頁下方的《僅限指令列工具》那可以下載。但使用這方法，要另行設 ANDROID_HOME 的環境變數
   • 如果是用 CI/CD， Github Action 已經有人寫好了：android-actions/setup-android
   • 使用 Docker ，可以使用thyrlian/android-sdk

Ionic 筆記：建立專案、編譯成 APK

最近試著玩玩看幾個跨平台框架，其中之一就是 Ionic

以下是我自己在編譯 Ionic 的筆記

Vue.js 狀況：onMount 更新變數後，畫面沒有進行變動

狀況

以下是我的 Vue code

<script setup>
let menuTabs = ref([
	{name: "會員", checked: false},
	{name: "客戶", checked: false},
	{name: "站點", checked: false},
])



let selectedMember = ref({name: null, id: null})
let selectedCustomer = ref({name: null, id: null})
let selectedStation = ref({name: null, id: null})

/** 根據當前選擇的 tab 來決定顯示的內容 */
let selectedData = computed(function(){
	if(menuTabs.value[0].checked){
		return selectedMember.value
	}
	if(menuTabs.value[1].checked){
		return selectedCustomer.value
	}
	if(menuTabs.value[2].checked){
		return selectedStation.value
	}
	return {name: null, id: null}
})

/** 切換 menu tab */
function changeMenuTab(index){
	for(let i = 0; i < menuTabs.value.length; i++){
		menuTabs.value[i].checked = i == index
	}
}

</script>
<template>
	<div class="tabs">
  		<div role="tablist" aria-label="Sample Tabs">
			<button v-for = "(tab, index) in menuTabs"
				role="tab"
				:aria-selected="tab.checked"
				:aria-controls="`panel-${index}`"
				:id="`tab-${index}`"
				:tabindex="tab.checked ? 0 : -1" 
				@click="changeMenuTab(index)"
				v-text="tab.name"/>
		</div>
	</div>


	<div class="tab-content">
		<div>
			{{selectedData.name}}
			<template v-if="!!selectedData.id">
				（{{selectedData.id}}）
			</template>
		</div>


		<div v-for = "(tab, index) in menuTabs"
			role="tabpanel"
			:aria-labelledby="`tab-${index}`"
			:id="`panel-${index}`"
			:aria-hidden="!tab.checked"
			:tabindex="0"
			:hidden="!tab.checked">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus, congue vel laoreet ac, dictum vitae odio.
		</div>
	</div>
</template>

練習：建立一個使用 GZ 壓縮的頁面

使用 Intl.DateTimeFormat() constructor 將日期格式化成 ISO 8601 格式

如題，因為現在 JS 有 Intl.DateTimeFormat 了，使用 Intl.DateTimeFormat 來將日期以 ISO 8601 格式化

Vue.js：ref 對象更動後，要如何在 DOM 的變更結束後，執行 function

我這邊有段 vue code：

<script setup lang="ts">
interface CartItem {
	id: any;
	itemID: any;
	name: string;
	price: number;
	count: number;
}
let cartItem = ref<CartItem[]>([])


</script>
<template>
	<aside>
		<div class="cart-item" v-for="(item) in cartItem">
			<span v-text="item.name"/>
			<span v-text="'$' + item.price"/>
			<input type="number" v-model="item.count" />

		</div>
	</aside>
</template>

這段 code，每次 cartItem 新增一個項目後，就會自動建立一組 <div class="cart-item" />；反之，每刪除一個項目，就會刪掉一個<div class="cart-item" />。

我現在要的，是每新增或刪除完一個項目後，自動執行一段 function。

例如新增完畢後，自動 focus 到最新的 input 中。