使用 ASP.NET Core 6 提供的 Minimal APIs 新框架建置一個極簡的 Web API 服務

github Source code 本篇筆記中將紀錄如何使用 ASP.NET Core 6 提供的 Minimal APIs 新框架建置一個使用 Token-base 身份驗證的 Web API 網站。 建立新專案 $ dotnet new webapi -o JwtAuthDemo -minimal 範本「ASP.NET Core Web API」已成功建立。 正在處理建立後的動作... 正在 /home/egs/cal-data/tech-test/webapi/Minimal/JwtAuthDemo/JwtAuthDemo.csproj 上執行 'dotnet restore'... 正在判斷要還原的專案... 已還原 /home/egs/cal-data/tech-test/webapi/Minimal/JwtAuthDemo/JwtAuthDemo.csproj (214 ms 內)。 還原成功。 $ cd JwtAuthDemo $ ls -al 總用量 32 drwxrwxr-x 4 egs egs 4096 五 13 18:36 . drwxrwxr-x 7 egs egs 4096 五 13 18:36 .. -rw-rw-r-- 1 egs egs 127 五 13 18:36 appsettings....

May 13, 2022 · 6 min · Theme PaperMod

使用 Snowpack + Typescript 來建置一個 Web App

Snowpack 號稱是更快速的前端建構工具,在開發 Web 應用程式的工作流程中,它可以替代更重、更複雜的打包工具,如 webpack 或 Parcel。 在此不會討論 Snowpack 的設計細節,只紀錄如可快速的使用 Snowpack 來建置一個由 Typescript 支援網頁程式。由撰寫 Typescript 的過程中了解到強型別(及與搭配 vscode 編輯器)所帶來的好處。 使用 create-snowpack-app 建立專案 $ mkdir doto-list && cd todo-list $ $ npx create-snowpack-app . --template @snowpack/app-template-blank-typescript --force $ npm install $ code . 産生的程式結構如下: package.json 的內容: { "scripts": { "start": "snowpack dev", "build": "snowpack build", "test": "echo \"This template does not include a test runner by default.\" && exit 1", "format": "prettier --write \"src/**/*....

May 1, 2022 · 5 min · Theme PaperMod

使用 Node.js + express 建立一個電子商務後端服務的 REST API

github Source code #tag: restapi_nodejs KEYWORD: MongoDB Cloud Services、Node.js、REST API、JWT、加解密、MongoDB Compass、Postman、express、cryptojs、dotenv、jsonwebtoken、mongoose 設置專案環境 $ node --version # 檢測環境已裝妥 node.js (若已安裝會顯示目前安裝的版本) $ mkdir ecommerceapi && cd ecommerceapi # 建立一個專案目錄 $ npm init -y # 産一專案設定檔 package.json $ touch index.js # 産生一個新檔案 $ yarn add express mongoose dotenv # 加入相依套件 $ yarn add --dev nodemon # 加入開發時期相依套件 $ git init $ echo 'node_modules/' > .gitignore # 新增 git ignore 設定檔,並設定 node_modules/ 目錄不加入版控 $ git add ....

April 25, 2022 · 8 min · Theme PaperMod

透過範例了解 Javascript Rest & Spread 運算符有何不同

rest 和 spread 之間的主要區別在於,rest 運算符將使用者提供的特定的值的“其餘”部分放入 JavaScript 陣列中。但是擴展語法將可疊代物件擴展為各別的元素。 rest 的範例 // 將使用者提供的某些值放入陣列中 function myBio(firstName, lastName, ...otherInfo) { return otherInfo; } // 呼叫 myBio 功能時傳入五個參數值: myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male"); // 回傳以下陣列: ["CodeSweetly", "Web Developer", "Male"] // 宣告二個一般變數及一個 rest 變數,再使用 destructruing 方式給值: const [firstName, lastName, ...otherInfo] = [ "Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male" ]; console.log(otherInfo); // 結果: ["CodeSweetly", "Web Developer", "Male"] // ES7+的物件屬性其餘運算符 const {a, b, ...rest} = {a:1, b:2, c:3, d:4} //a=1, b=2, rest={c:3, d:4} let options = { title: "Menu", height: 200, width: 100 }; // title = property named title // rest = object with the rest of properties let {title, ....

April 12, 2022 · 3 min · Theme PaperMod

透過範例了解 Javascript Destructuring (解構指定值)

物件解構 指定值給已存在的變數 const superHero = { name : "Spiderman", power : "Spider Sense", color : "red" }; const { name, power, color } = superHero; console.log("name:", name); // Spiderman console.log("color:", color); // red console.log("power:", power); // Spider Sense 重新指定值的用法 const superMan = { name : "Superman", power : "Super Sense", color : "blue" }; ({ name, power, color } = superMan); console.log("name:", name); console.log("color:", color); console.log("power:", power); 指定值給新的變數 const superHero = { name : "Spiderman", power : "Spider Sense", color : "red" }; const { name : n, power : p, color : c } = superHero; console....

April 11, 2022 · 3 min · Theme PaperMod