【Next.js】Issue Tracker - Part 2

閱讀時間約 1 分鐘


上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。


Dashboard

在儀錶板這頁由三個區塊組成:

  • 左上方各狀態的Issue牌卡統計
  • 左下方圖表
  • 右側呈現建立時間最近的5項Issue牌卡


Issue

在排卡列表增加下列功能:

  • 根據標題、狀態、建立時間進行排序
  • 分頁檢視


後記

請求處理,基本上透過框架都大同小異;cache機制等優化方式,大多也跟框架做了配套, 不需要自己另外刻重送等邏輯;markdown編輯器呈現跟圖表,也是仰賴其他現有套件,之前還看過做miro clone的專案,也是有現成的依賴可以引入做結合。

專案資料夾架構因為跟路由相關,所以整體分層也不算太亂,一方面也是因為跟著做個段落就進行重構,重複的項目抽出來獨立組件,每層組件也盡量拆分單一職責。

其實跟著教學做,不光只是為了完成功能,更多時候是在參考如何設計出好維護、更加有彈性的專案架構。

12會員
59Content count
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
留言0
查看全部
發表第一個留言支持創作者!
Err500 的其他內容
原本的計畫是寫系列文,一天嗑一點,雖然完整影片約17小時,分批消化卻花了我近10天,現在回去看我第一天寫的草稿,編輯時間已經是半年前...。
前年第一次藉公司機會,參加了DevOpsDay的活動。雖然devOps一詞各自表述,大多狀況還是偏向維運會遇到的技術為主,做為平時開發、跟使用者訪談需求的工作內容來說,參加聚會如果沒有一定的知識,對講者所提到的狀況比較難有共鳴...
學習Spring Boot是Java工程師必備技能,文章分享瞭如何自學並快速上手Spring Boot開發,包括架構、開發工具、專案建立以及實作過程。
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。
巨集(Macro)是什麼? 第一次聽到這個詞是出現在excel,按下錄製鍵後,畫面上進行的操作會被記錄下來,可以重複回放執行前述操作。之後接觸C語言的#define,巨集又跟函數類似...
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
原本的計畫是寫系列文,一天嗑一點,雖然完整影片約17小時,分批消化卻花了我近10天,現在回去看我第一天寫的草稿,編輯時間已經是半年前...。
前年第一次藉公司機會,參加了DevOpsDay的活動。雖然devOps一詞各自表述,大多狀況還是偏向維運會遇到的技術為主,做為平時開發、跟使用者訪談需求的工作內容來說,參加聚會如果沒有一定的知識,對講者所提到的狀況比較難有共鳴...
學習Spring Boot是Java工程師必備技能,文章分享瞭如何自學並快速上手Spring Boot開發,包括架構、開發工具、專案建立以及實作過程。
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。
巨集(Macro)是什麼? 第一次聽到這個詞是出現在excel,按下錄製鍵後,畫面上進行的操作會被記錄下來,可以重複回放執行前述操作。之後接觸C語言的#define,巨集又跟函數類似...
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
Thumbnail
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
Thumbnail
當你有客製化的字型在Google Font裡面,但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
Thumbnail
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
說是開發過程的筆記,應該是撞牆心血錄,因為各式各樣的原因,所以為前後端串接困擾了很久⋯⋯
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
現在您已經安裝了 WooCommerce 的 WordPress 網站,是時候配置 WooCommerce 並開始添加一些要銷售的產品了! 配置 WooCommerce 設置 在您的 WordPress 站點中,單擊 WooCommerce 菜單選項並轉到Settings。在設置頁面中,將在不同選項
Thumbnail
好久沒看這麼讓人舒心的實境秀了,服裝設計師們的比拚真是讓人眼花撩亂讚嘆不已。沒有太多不必要、讓人頭疼的Drama要素,大部分的設計師專注於作品上而且相處和睦愉快,互相欣賞,情誼真摯,讓人感動。 一開始兩兩一組對一個創作者來說是一大挑戰,溝通與妥協似乎本質上和藝術有所偏差,看著他們合作有的順利有的不斷
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
Thumbnail
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
Thumbnail
當你有客製化的字型在Google Font裡面,但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
Thumbnail
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
說是開發過程的筆記,應該是撞牆心血錄,因為各式各樣的原因,所以為前後端串接困擾了很久⋯⋯
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
現在您已經安裝了 WooCommerce 的 WordPress 網站,是時候配置 WooCommerce 並開始添加一些要銷售的產品了! 配置 WooCommerce 設置 在您的 WordPress 站點中,單擊 WooCommerce 菜單選項並轉到Settings。在設置頁面中,將在不同選項
Thumbnail
好久沒看這麼讓人舒心的實境秀了,服裝設計師們的比拚真是讓人眼花撩亂讚嘆不已。沒有太多不必要、讓人頭疼的Drama要素,大部分的設計師專注於作品上而且相處和睦愉快,互相欣賞,情誼真摯,讓人感動。 一開始兩兩一組對一個創作者來說是一大挑戰,溝通與妥協似乎本質上和藝術有所偏差,看著他們合作有的順利有的不斷