前言主要是最近有個專案忘記紀錄以前寫的 Code ，順便把爬蟲那段拿出來紀錄。爬蟲是透過 Response 回來後的html 並從裡面竊取資料，執行動作必須要確認當前站台是否有開放能拿取資料的設定檔，如 robots.txt 。這邊就以簡單範例為例。前置作業 Html Agility Pack : 點選我 撰寫爬蟲頁面這邊使用 “https://udn.com/news/cate/2/6644“ 聯合報新聞來做示範。 response當前頁面123456789101112131415161718192021222324using HtmlAgilityPack;namespace networkReptile{ internal class Program { static async Task Main(string[] args) { //設定爬的網站 string url = "https://udn.com/news/cate/2/6644"; ...

紀錄目的近期遇到 Web Api 處理方式是使用 TipTop Web Api，處理方式、撰寫方式也不明確，在此紀錄如何跟別人對接Web Api 方式。 使用方式TipTop 是一個非常舊版的 Web Api，執行上對新人非常不友善。下方是概念圖。 遇到不使用帳號的 API 往往都是使用內網方式串接，目前查詢呼叫方式使用 SoapUI 到目前是顯示XML比較好用的Software。 注意事項 Response 通常會在自己本機撰寫好程式碼，會告知對方使用這個Function。 可以透過得知文件進行確認 TipTop 有分兩種版本，1. 需使用帳號登入 2. 只需傳入值 Response 如果失效，通常會有顯示 Status ，[-1] 為無效、失敗; [0]則是成功。 下載支援 SoapUI

一、react auth kit是簡化身份驗證和授權在 React 應用程式中的整合過程。它提供了一種靈活的方式來管理使用者身份驗證狀態、處理登入和註銷，以及控制使用者對特定功能和資源的存取權限。 特徵 身份驗證狀態管理 身份驗證元件 存取控制 路由保護 它提供了一套強大而靈活的工具，讓你能夠輕鬆地構建安全可靠的使用者身份驗證系統。 二· 使用方式1-1 新增login 設定1234567const privateElement = (element: JSX.Element) => { return ( <RequireAuth loginPath={"/login"}> {element} </RequireAuth> );} 1-2 區分Layout 用法1-2-1 需登入頁面設定1234{/* user authrozie element */}<Route path=" ...

複習React Redux 是一個用於在 React 應用程序中管理狀態的領先狀態管理庫。它與 Redux 库密切配合，提供了一個可預測的狀態容器，並通過使用 React 的 Context API 實現了高效的狀態管理。React Redux 基於 Flux 架構，使用單向數據流模型來處理應用程序的狀態更新。 React Redux 的主要特點包括： 提供一個 Provider 組件，使整個應用程序中的組件都能夠訪問 Redux 的狀態。 通過 useSelector Hook Function和 useDispatch Hook Function，簡化了組件與 Redux 的交互。 通過使用 connect 函數，可以將組件與 Redux 的狀態和操作相連接，使它們能夠自動更新。 支持中間件，例如 Redux Thunk 或 Redux Saga，用於處理異步操作和複雜的業務邏輯。 登入1. 創建 src/store/stroe.js12345678910import { configureStore } from '@redu ...

React ReduxReact Redux 是一個用於在 React 應用程序中管理狀態的領先狀態管理庫。它與 Redux 库密切配合，提供了一個可預測的狀態容器，並通過使用 React 的 Context API 實現了高效的狀態管理。React Redux 基於 Flux 架構，使用單向數據流模型來處理應用程序的狀態更新。 React Redux 的主要特點包括： 提供一個 Provider 組件，使整個應用程序中的組件都能夠訪問 Redux 的狀態。 通過 useSelector 和 useDispatch，簡化了組件與 Redux 的交互。 通過使用 connect 函數，可以將組件與 Redux 的狀態和操作相連接，使它們能夠自動更新。 支持中間件，例如 Redux Thunk 或 Redux Saga，用於處理異步操作和複雜的業務邏輯。 useDispatchuseDispatch 是一個用於獲取 Redux store 的 dispatch 函數的鉤子函數。dispatch 函數用於觸發 Redux store 中的 action，從而更新狀態。通過 useDisp ...

在上一篇文章中，我們已經討論了如何將 index.js 與其他版面分開，這次我們要延續這個主題，並稍微提到元件的使用方式。 元件元件的概念是將 head、body、footer 等區塊拆分開來，以便後續功能的延伸或擴充。通常我會進一步細分，例如使用者功能清單、目錄、公用樣板 (如 Card 和 Page Title) 等。這樣做可以提升開發的可讀性，減少多行程式碼難以辨識的問題。 Layout本次的範例如下圖所示。我特別使用顏色框出那些功能，以展示它們是如何被拆分為元件的方式進行撰寫。 簡易引用元件 - Header這邊只顯示一部份，若要看完整請到 github(StartFMS.Backend.Web)。 解釋為什麼要怎樣拆開 Header Title 。 彈性化 : 利用Ajax方式取得需要的 page 客製化 : 可能有不同客戶需求樣板可另外擴充 Header.tsx 12345678910111213141516171819202122232425262728293031323334353637383940import { Link } from &# ...

前言好一段時間沒有發表學習文了，主要是因為我花了兩個禮拜的時間研究這個東西，終於找到了原因和使用方式。雖然有ChatGPT的幫助，但還是沒有解決我現在要特別標記的主題。 (P.S. 這次的主題是我卡了很久的一個技術問題。) React Router 中 Outlet在父路由元素中，應該使用 來呈現其子路由元素。這樣，當子路由被渲染時，嵌套的使用者介面就能夠顯示出來。如果父路由完全匹配，它會渲染一個子索引路由，如果沒有索引路由，則不會呈現任何內容。 1. 類型聲明 (Type declaration)123456interface OutletProps { context?: unknown;}declare function Outlet( props: OutletProps): React.ReactElement | null; 2. 參考官方作法1234567891011121314151617181920212223242526function Dashboard() { return ( <div> < ...

前言在上一篇文章中，我們介紹了如何操作 components 與 router，這篇文章將教你如何在你的專案中加入 AdminLTE3 的 CSS 樣式，讓你的專案能夠擁有漂亮的 UI 設計。 AdminLTE是一個基於 Bootstrap 框架的免費管理儀表板模板，可以快速建立具有相應外觀和功能的後台管理系統。AdminLTE 3 是其最新版本，提供了大量的 UI 元件、各種頁面佈局和功能，例如表格、圖表、表單、地圖、日曆等等，也可以輕鬆自訂主題樣式。 AdminLTE 3AdminLTE 3 支援多種框架和平台，包括 Angular、React、Vue、ASP.NET Core、Laravel 等等，因此非常適合用於各種 Web 開發項目。此外，AdminLTE 3 的文件非常完整，提供了詳細的使用說明和示例，方便開發者快速入門和使用。 區分定義起手前，請依據這個大區塊方式切割。後期時候可以再把裡面內容再次切割，後續工作就不會太複雜。 需要的動作 創建 components/@Shared 資料夾 安裝 admin-lte 3 npm i admin-lte 備 ...

前言完成作業初期，你可能會疑惑如何增加多個頁面或佈局，這些問題都需要使用到路由器（router）。前端架構將依賴路由器進行所需頁面和佈局之間的切換。而組件（component）則可以看作是我們的視圖，是可重複使用的程式碼塊，用於呈現單一元件的內容。在上一篇文章中，我們已經實現了組件的基礎並且理解了它的重要性。 React Router安裝 Router首先，安裝 React Router：在命令行中執行 npm install react-router-dom。 創建 component加入 template-page 下方可以使用範本來快速建檔，如下 : 12345678910111213141516171819202122232425262728// Home.tsximport React from 'react';const Home = () => { return ( <div> <h1>Home</h1> <p>Welcome to my home page ...

前言近期會慢慢研究 react 使用方式，今後會使用 TS 來完成專案，並包含其他前端架購。本篇使用以下版本，若無法正常執行請確認版本再進行作業。 設定檔12345678910111213141516//package.json "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.26", "@types/react": "^18.2.6", "@typ ...