第25個冬天

  在此都先假定你已經環境安裝好vs2022,.net6以上 以及nodejs,npm, vue3 cli 等諸多工具了 https://coolmandiary.blogspot.com/2022/01/vuejs12vue-cli.html 尚未安裝的在補安裝好vue cli npm install -g @vue/cli 在Vue3開發專案的創建方式有以下幾種 方法1.藉由vue-cli vue create 專案名稱(也會自動建立目錄) 要運行在透過npm run serve即可 方法2.透過visual studio ide來創建(背後也是透過方法1.藉由vue-cli) 在空方案中右鍵新增vue專案(可搜尋關鍵字vue)找到獨立的 其他preview是有和asp.net core整併的專案版本 在此要勾消若有勾選擇代表會把asp.net core整併一起 基本上背後也是透過vue cli在幫我們create專案而且產生的專案目錄也一樣 基本上可直接按綠色執行撥放按鍵來跑專案 方法3.會自動安裝並執行create-vue 這是vue官網cli工具，會透過Vite來創建 npm init vue@latest 可能暫時就不討論此方式 在空方案中去新建另一個asp.net core web api專案 接著要來配置後端web api的跨域 前端已經是8080的埠號 後端部分也要固定好埠號 這裡專案給的是44037 由於瀏覽器存在同源政策的機制 因此會將相異port應用之間存取默認是不被允許的 至Program.cs中 builder.Services.AddControllers(); 的上方去配置 允許所有請求Header與Method 以及相應中間件的設置 Program.cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(options => { options.AddDefaultPolicy( ...

  之前有分享過 分頁寫法 這次遇到其他種分頁作法 舊系統分頁查詢SP 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Create proc [dbo].[SSP_GetPage] ( @sqlstr nvarchar( 4000 ), @pagepos int = 1 , @pagesize int = 99999999 , @recsize int output ) as begin set nocount on declare @P1 int ,@P2 int ,@P3 int ,@reccount int set @pagepos=(@pagepos- 1 )*@pagesize+ 1 exec sp_cursoropen @P1 output , @sqlstr , 1 , 8193 , @recsize output exec sp_cursorfetch @P1, 16 ,@pagepos,@pagesize exec sp_cursorclose @P1 end 這段程式碼定義了一個名為 SSP_GetPage 的存儲過程。該過程接受四個參數： @sqlstr：一個字符串參數，用於指定將要執行的 SQL 陳述式。 @pagepos：一個整數參數，指定要檢索的記錄起始位置，默認為 1。 @pagesize：一個整數參數，指定要檢索的記錄數目，默認為 99999999。 @recsize：一個輸出參數，指定檢索到的記錄數目。 在存儲過程的主體中，首先使用 set nocount on 語句來禁用向客戶端返回計數信息的功能。 然後聲明了四個整型變量 @P1、@P2、@P3 和 @reccount。 接下來，根據 @pagepos 和 @pagesize 計算要檢索的記錄起始位置，然後執行 sp_cursoropen 系統存儲過程來打開游標，使用 sp...

  在Blazor當中若要去設定事件的callback寫法很單純 針對Button前端的元素我們可以加上@onclick後頭捕上 lambda expression的匿名方法或者具名方法 而元件封裝跟過去webform時代的ascx 其實很像 額外定義一個razor元件 ~\Pages\Alert.razor 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 @if (Show) { <div class= "dialog-container" > <div class= "dialog" > <div> @ChildContent </div> <div> <button @onclick= "OnOk" > OK </button> </div> </div> </div> } @code { [Parameter] public bool Show { get ; set ; } [Parameter] public EventCallback OnOk { get ; set ; } [Parameter] public RenderFragment ChildContent { get ; set ; } } [Parameter]修飾的屬性 則代表可從父元件傳遞進來給當前這個子元件的意思 EventCallback 則是對外可去指定要呼叫的客製化委派(也就是方法回呼) RenderFragment 則代表這個子元件也就是open/close tag裡面你可以填入取代的內文block 你可以從父元件傳入新型的子元...

 multi-thread(多執行緒/多線程) ->就好比如一個分工很細而且彼此沒默契的工作團隊，每個任務都分別拆分給不同人處裡，而且 彼此無法互相cover，各人自掃門前雪，莫管他家瓦上霜，效率也就較差， 通常都是全部人力都上場。 電腦系統中每隻運作的程式會視為一個process 每個process中會包含一或多個thread(預設只有單一個thread) 每個threadd可被分配不同任務 一個(單核)CPU在同一個時刻只能運行一個thread, 但多核CPU則可在同一個時刻能運行多個thread thread通常又可分為 前景執行緒(一般在winform俗稱的UI Thread) 背景執行緒(又俗稱worker thread) thread-pool(執行緒集區,執行緒池/線程池) ->就好比一個彼此都熟悉各自業務也很有默契可隨時互相cover的team，類似球隊，而通常 團隊非必要不會全部人力都上場，會留一些坐板凳的替補選手,真的都很忙人手不足再替補上場。 也就是Thread的集合，對CPU而言每個資源都很寶貴。 若每個任務你都重新產生thread,每個thread都會占用CPU資源， 過多thread會導致資源耗竭。 因此可將建立的Thread放於這個池子中統一控管 若池中某thread任務執行完成，不將其回收而是設為空閒狀態。 當有新的額外任務時，再將任務交給thread-pool中空閒的thread去處理。 若thread-pool中沒有空閒的thread才去產生新的thread。

  More than one DbContext was found. Specify which one to use. Use the '-Context' parameter for PowerShell commands and the '--context' parameter for dotnet commands. 這代表專案可能包含兩種資料庫上下文的Class (繼承自DbContext的衍生類別) 若專案有用到Identity也算一種 這時就要多串-context 指定相應DbContext子類名稱 An error occurred using the connection to database '{資料庫名稱}' on server 'localhost'. 這代表資料庫連線配置錯誤喔!!

  若接獲有人給的visual studio專案 如出現此錯誤訊息 LIB002 "cdnjs" 提供者無法解析 "jquery@3.6.1" 程式庫 LIB002 "cdnjs" 提供者無法解析 "twitter-bootstrap@5.2.2" 程式庫 LIB002 "cdnjs" 提供者無法解析 "font-awesome@6.2.0" 程式庫 .... LIB002 "cdnjs" 提供者無法解析 "XXXXXX" 程式庫 不外乎就是缺乏這些前端套件 有經驗的開發者 我們都知道 libman 主要就是一套前端庫管控的工具 基本上可切至套件管理器主控台中 下command 先確認libman cli可運行正常 查看已安裝的CLI 版本 libman --version 若要查看詳細幫助可輸入 libman --help libman help說明 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Usage: libman [options] [ command ] Options: --help|-h Show help information --version Show version information Commands: cache 列出或清除 libman 快取內容 clean 從專案刪除 libman.json 中定義的所有程式庫檔案 config 取得或進行組態設定 init 建立新的 libman.json install 將程式庫定義新增到 LibMan.json 檔案，並將程式庫下載到指定的位置 restore 從提供者下載所有檔案，並將其儲存到指定的目的地 uninstall 從指定的目的地刪除指定程式庫的所有檔案，然後從 libman.json 移除指定的程式庫定義 update 更新指定的程式庫 Use "libman [command] --help" for more ...

  後端寫好的API之後前端要如何知道有哪些路由可以存取? 因此Swagger 文檔這套API文件生成工具就可方便讓我們提供給前端參考。 Swagger 強大的地方在於，只需要寫一個 json 檔，就可以動產生出 API document 在網頁上瀏覽，還可以直接發送 http request 來測試 API。 以Foreca 此網站來看，就有提供 API 供開發者串接， 所以 API  document 就需要十分清楚透明 https://developer.foreca.com/#Forecasts 新建一個NodeJs Express專案 我們這裡的進入點是index.js cd. > index.js npm install express npm install nodemon 多下載此套件來直接將我們的 json 轉換為 API document npm install swagger-ui-express code1: 1 2 3 4 5 6 7 8 const express = require( "express" ); const app = express(); const PORT = 3000 ; app.listen(PORT,()=>{ console.log( 'Server is listen on port ' + PORT); }); 那預設express專案配置起來會預設安置好的port -> 3000，這裡是可自行定義的。 就類似對應的鑰匙門房號或是密鑰，知道正確結果的就可以進行存取。 那port 連接埠、協定埠 (protocol port)就好比如電腦的各式各樣服務的門，也是一種識別應用服務的代號，範圍從0~65535。 但預設有已經有相應功能的port 以下的就要避免用到專用port 80: HTTP服務 443:HTTPS服務 21:FTP服務 23:SSH服務 3306:MySQL預設port (若有兩個以上會額外定義) 27017:MongoDB預設port(若有兩個以上會額外定義) 編寫get請求方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const express = requir...