前言IndexedDb 是一個瀏覽器內建的資料庫，可以透過 Javascript 進行操作，並且可以在瀏覽器關閉後，資料依然存在，因此可以用來做離線儲存的功能。實際應用上通常是紀錄暫存資料，按下存檔後一次檢查、存檔讓資料可以不用平凡使用在API 傳送的一項工具。 前陣子，需要用到暫存資料的功能，因此就研究了一下 IndexedDb 的使用方式，而初期使用的確不好學習。此範例會用簡單的CRUD製作。 實作 CRUD 範例在開始之前，不論是問 chatGPT 或是 其他教學文章，都會逃不了裝套件的問題。所以這邊就不用套件示範，直接使用原生的方式來實作。 1. 製作 Service 環境下方程式碼中，IDBDatabase為內建Interface可以不用特別引入。稍微補充下面程式碼，因為使用v16版本是強制要帶入預設值，所以 private db: IDBDatabase | null = null; 才會這樣寫。 初始化資料庫作法如下 : 建立資料庫 : indexedDB.open( 資料庫名稱 , 資料庫版本 );。 版本更新 : request.onupgradeneeded ...

IndexedDB 是一個強大的瀏覽器內本地資料庫技術，它允許網頁應用程式在客戶端存儲和檢索大量資料，而無需依賴傳統的伺服器資料庫。在本文中，我們將深入瞭解 IndexedDB，包括它的特點、用途以及如何使用它來增強網頁應用程式的功能。 什麼是 IndexedDB？IndexedDB 是一個 Web API，用於在瀏覽器中存儲大量結構化資料。它提供了一個類似於資料庫的環境，允許網頁應用程式創建、讀取、更新和刪除資料。這種資料庫是基於 JavaScript 的，不依賴於任何伺服器端資料庫，因此可以在離線狀態下工作。 IndexedDB 的特點 非同步操作：IndexedDB 是一個非同步資料庫，這意味著它可以在後台執行長時間運行的操作而不會阻止網頁應用程式的其他部分。這有助於保持應用程式的反應性。 支援索引：IndexedDB 允許您為資料建立索引，這有助於快速查詢資料，而無需掃描整個資料庫。 大容量資料儲存：您可以存儲大量資料（通常以兆字節為單位），這對於需要離線存儲或高性能本地資料庫的應用程式非常有用。 跨瀏覽器支援：IndexedDB 是一個標準的 Web API，支援大多數 ...

前言近期專案遇到一個當不是使用公用的component情況下，如何把 component 的資料傳遞到其他 component 中，確保已經有加入到暫存檔中。遇到這問題不用讓chatGpt 詢問答案，只需要執行方向就可以解決問題。 解決方向 BehaviorSubject : 這個是一個可以讓資料傳遞的方式，可以讓資料傳遞到其他 component 中，也是在創建angular 會產生的 rsjx 套件。 localstorage : 這個是瀏覽器的暫存檔，可以讓資料傳遞到其他 component 中，但是這個方式會有一個問題，就是當資料量大的時候，會造成瀏覽器的效能問題 (備註 : 預設為5 ~ 10 MB 範圍大小)。 IndexedDB : 這是 網頁瀏覽器 提供的資料暫緩區，不會遇到資料太大無法存檔的問題 (因為時間問題之後再研究)。 最終解決方案因為專案時程關係，我會選擇比較能確認可行性的做法執行，BehaviorSubject + localstorage 是我最後選擇的方案。 BehaviorSubject 會因為瀏覽器關閉、重新整理會造成資料消失，因此需要 local ...

近期會去整理一下歷經多年的NPOI文章，意外露寫了一小段章節。因此，我這邊特別把這段章節補完整一點，讓Excel的讀寫可以更加完整。 Excel 寫入Excel 在 NPOI 時候，必須知道自己的Excel 版本需要使用哪個版本、Sheet 頁面要用幾個、畫面樣式之類問題。這篇只著重Excel 匯出Table 方式，如果要參考寫入哪個Sheet 歡迎參考【C#】NPOI (一) 如何使用NPOI Excel。 設定情境創建 table 方式有很多種，這邊設計我會依據 list 泛型的方式，來解決table 的問題。 首先，我們先創建一個 class，裡面有一些屬性，用來存放資料。因為只需要簡單例子就不用創太多了。 12345678public class Demo{ [DisplayName("名稱")] public string name { get; set; } [DisplayName("日期")] public DateTime date { get; set;  ...

問題以前遇到排版時候，預設排版無法對參數方式排版，例如 12<ngx-card [title]="'title'" [subtitle]="'subtitle'" [content]="'content'"></ngx-card> 這時候就需要 prettier 這個套件來幫忙排版。 解決方式 安裝工具: Prettier - Code formatter 開啟 settings.json 後，輸入以下指令 12345678910111213141516{ "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": t ...

前言近期想要用 Cli 執行專案遇到 Port 不是自己當初設定的Port，因此想要記錄一下。 dotnet rundotnet run 有含 –urls 參數可以將網址設定進去，如下方範例。 1dotnet run --urls=http://localhost:5000 補充 launchSettings 使用方式可以透過 Properties > launchSettings.json 進行設定並執行，如下方範例。 12345678910111213{ "profiles": { "WebApplication1": { "commandName": "Project", "dotnetRunMessages": "true", "launchBrowser": true, "applicationUrl": "http://lo ...

css 在各家公司無法脫離存在，但是 css 本身的語法不夠強大，因此有了 scss 的誕生，scss 是 css 的超集合，也就是說 scss 可以完全兼容 css 的語法，但是 css 不行。 一、SCSSSCSS，或稱為Sass（Syntactically Awesome Stylesheets），是一種CSS的擴展語言，它引入了一些功能和語法，以使樣式表更具結構、可讀性和可維護性。以下是SCSS的由來： 1-1 起源Sass最初是由哈馬德·卡瑟姆（Hampton Catlin）於2006年創建的，最初是一個Ruby的Gem，用於簡化和改進CSS的書寫。 Sass引入了變數、巢狀規則和混合等功能，以減少代碼的冗長性和提高可維護性。 1-2 演進SCSS（Sassy CSS）則是對Sass的一種新語法的引入，它更接近傳統的CSS語法。SCSS允許開發者使用原生的CSS語法，同時利用Sass提供的功能，使得轉換和遷移變得更加容易。SCSS的語法更接近CSS，因此對於那些熟悉CSS的開發者而言，學習曲線相對較低。 1-3 功能和語法的引入SCSS引入了許多功能，例如變數、嵌套規則、混合 ...

為了再次學習之前學一半的Docker ，重新再次安裝 Docker Desktop 。安狀完成以為可以正常使用，發生 “Hardware assisted virtualization and data execution protection must be enabled in the BIOS” 錯誤訊息，急忙地排除這問題。 問題排除一、指令方式排除來源 Stock Overflow 第一次使用安裝使用，先馬上看有沒有要開啟項目。從下方指令明顯看到對象是Hyper-V，看來只要針對這個項目開放因該可以成功。 一、SOLUTION A (If Hyper-V is totally disabled or not installed) Open PowerShell as administrator and Enable Hyper-V with 1dism.exe /Online /Enable-Feature:Microsoft-Hyper-V /All 二、SOLUTION B (If Hyper-V feature is already enabled but does ...

前言@Input 、@Output 用於公用模組時最常見的一個功能，透過 @Input 來接收父元件傳遞的資料，並且在子元件中使用。本篇就來簡單介紹 @Input、@Oupt 的使用方式。 @Input vs @Output@Input 和 @Output 是 Angular 中用於實現父子組件之間通信的重要裝飾器，它們用於在組件之間傳遞資料和觸發事件。以下是它們的使用時機和主要差異： 1. @Input： 使用時機：@Input 主要用於從父組件向子組件傳遞資料。當你需要將資料從父組件傳遞到子組件以供子組件使用時，通常會使用 @Input。 主要作用：@Input 用於聲明子組件的屬性，以允許外部傳遞資料給這些屬性。子組件可以讀取這些屬性的值並在其模板中使用。 示例：通過 @Input，可以將父組件的資料傳遞到子組件，例如傳遞文本、配置選項，或任何需要在子組件中顯示或使用的資料。 12// 子組件@Input() inputData: string; 12<!-- 父組件模板 --><app-child [inputData]="parentData& ...

Discord Bot 是一個很好玩的東西，可以讓你的 Discord 伺服器更加的有趣，而且可以自己寫程式來控制機器人。本人已經玩過幾次，想要將爬蟲功能加入在伺服器當中。這篇文章會教你如何製作一個 Discord Bot，並且讓他加入你的伺服器。 前置作業工具 Visual Studio 2022 Visual Studio Code 套件 Discord.Net.WebSocket HtmlAgilityPack Discord Bots前往網站、填寫資料下方網址是前往 Discord Developer Portal 的網址，目的是要設定 Discord Bot 的資料，包含名稱、圖片、說明等等。設定方式會比 line bot 簡單很多，可以參考下方圖片。 Discord Developer Portal 1. 創建 Bot填寫bot 名稱，並且選擇創建。 備註 : APPLICATION ID、PUBLIC KEY 目前本篇不會用到，之後看情況再補充。 2. 設定權限接下來，需要設定bot允許的權限。 當然，目前只需要讓他輸入文字，勾選輸入文字的選項即可。選擇完 ...