本章開始接入后端開發，實現作品的預覽，保存，自動保存，發布和渠道編輯等一系列功能。
- 17-1 添加編輯器 Header
- 17-2 前后端分離開發簡介
- 17-3 分析后端接口和需求
- 17-4 使用 vuex action 發送請求
- 17-5 JSON server 的簡介和安裝使用
- 17-6 JSON server 自定義接口URL 和 返回數據結構
- 17-7 JSON Server 實現 JWT 驗證 - 生成 token
- 17-8 JSON Server 實現 JWT 驗證 - 實現路由保護
- 17-9 使用 AForm 完成表單驗證
- 17-10 使用 AForm 完成提交時驗證的兩種方法
- 17-11 完成獲取驗證碼的功能
- 17-12 完成用戶登陸過程
- 17-13 使用高階函數 actionWrapper 包裝 action 通用邏輯
- 17-14 AForm 源代碼解析 ：Form 組件 和 FormItem 完成驗證
- 17-15 AForm 源代碼解析 ：使用 useForm 完成驗證
- 17-16 添加全局讀取狀態 - 整體通用讀取狀態
- 17-17 添加全局讀取狀態 - 細粒度讀取狀態
- 17-18 處理全局錯誤處理
- 17-19 將全局讀取和錯誤添加至根組件
- 17-20 登陸狀態持久化
- 17-21 路由權限驗證 第一部分 - 功能分析
- 17-22 路由權限驗證 第二部分 - 編碼實現
- 17-23 編輯器獲取作品 第一部分 - 發送并且改進 action
- 17-24 編輯器獲取作品 第二部分 - 根據數據渲染至畫布
- 17-25 添加編輯器 Header
- 17-26 保存作品數據
- 17-27 添加自動保存功能
- 17-28 跳轉路由前提示保存
- 17-29 提取和整合保存作品邏輯
- 17-30 總結
僅僅掌握一個基礎的編譯器，可能并不能滿足大家的胃口。所以在本章中，我們將深入編譯器邏輯，從響應性處理、多層渲染、指令這三個方面入手，幫助大家深入編譯器邏輯。
- 15-1 前言
- 15-2 響應性數據的編輯器處理：響應性數據的處理邏輯
- 15-3 響應性數據的編輯器處理：AST 解析邏輯
- 15-4 響應性數據的編輯器處理：JavaScript AST 轉化邏輯
- 15-5 響應性數據的編輯器處理：render 轉化邏輯分析
- 15-6 響應性數據的編輯器處理：generate 生成 render 函數
- 15-7 響應性數據的編輯器處理：render 函數的執行處理
- 15-8 多層級模板的編輯器處理：多層級的處理邏輯
- 15-9 基于編輯器的指令(v-xx)處理：指令解析的整體邏輯
- 15-10 困難-基于編輯器的指令(v-xx)處理：AST 解析邏輯
- 15-11 困難-基于編輯器的指令(v-xx)處理：JavaScript AST ，構建 vif 轉化模塊
- 15-12 基于編輯器的指令(v-xx)處理：JavaScript AST ，transform 的轉化邏輯
- 15-13 基于編輯器的指令(v-xx)處理：生成 render 函數
- 15-14 總結
本章通過從前端構建可拖拽的組件列表，所見即所得的頁面布局編輯器和區塊屬性和數據表單等逐漸梳理清楚需要的 API，處理復雜的頁面區塊的增刪改等操作。同時深入了解了級聯操作，前端如何設計現代的路由等知識。
- 9-1 前端圖片數據列表界面和編輯彈出界面
- 9-2 重定向，子路由，嵌套路由
- 9-3 作業布置：實現運營管理后臺前端界面的路由和布局
- 9-4 作業回顧：實現運營管理后臺前端界面的路由和布局
- 9-5 前端 Flutter 拖拽初步，child, feedback 和 childWhenDragging
- 9-6 拖放目標 DragTarget 和拖拽的數據處理
- 9-7 重構設計界面，對 DragTarget 組件的進一步了解
- 9-8 前端實現移動區塊順序，確定保存的邏輯
- 9-9 添加區塊工具欄，規劃事件，重構確認對話框
- 9-10 完成前端區塊配置表單的布局和樣式
- 9-11 重置表單，新建數據表單的初步結構
- 9-12 前端圖片數據列表界面和編輯彈出界面
- 9-13 圖片編輯界面集成圖片管理的功能
- 9-14 根據前端需求修改后端模型，重構區塊的數據結構
- 9-15 移動區塊排序 API 的實現
- 9-16 重構區塊排序邏輯，添加數據排序接口
- 9-17 重構區塊 API，分離添加和更新的VM，重新認識級聯關系
- 9-18 作業布置：完成畫布頁面的添加，修改和刪除圖片區塊和圖片區塊數據
- 9-19 作業回顧：完成畫布頁面中添加，修改和刪除圖片區塊和圖片區塊數據
- 9-20 完成區塊配置表單的事件處理，修復 title 的類型轉換問題
- 9-21 使用函數層層剝離，重構區塊列表組件（上）
- 9-22 使用函數層層剝離，重構區塊列表組件（下）
- 9-23 作業布置：修復前端刪除引發的排序問題和添加 API 文檔
- 9-24 作業回顧：修復前端刪除引發的排序問題和添加 API 文檔
- 9-25 作業布置：完成輪播圖區塊的在畫布的拖放和編輯
- 9-26 作業回顧：完成輪播圖區塊的在畫布的拖放和編輯
- 9-27 構建商品查詢 API，Example 查詢和 Query 查詢的區別
- 9-28 作業布置：前端添加 ProductAdminRepository 和重構區塊數據的 VM
- 9-29 作業回顧：前端添加 ProductAdminRepository 和重構區塊數據的 VM
- 9-30 搭建商品數據表單編輯布局
- 9-31 改造 LeftPane 用于構建商品區塊默認數據
- 9-32 前端使用 showSearch 完成商品搜索和選擇
- 9-33 實現類目查詢 API，使用函數實現查詢并優化性能
- 9-34 作業布置：完成前端瀑布流區塊的顯示和編輯
- 9-35 作業回顧：完成前端瀑布流區塊的顯示和編輯
- 9-36 完成瀑布流區塊沉底邏輯，唯一性錯誤提示，List 與 Set 的區別
- 9-37 區塊移動 API 和前端對于瀑布流的處理
- 9-38 創建驗證服務，減少冗余的驗證方法
- 9-39 后端增加頁面布局狀態檢查，重構前端自定義異常
- 9-40 自定義時間范圍的驗證注解和驗證器
- 9-41 發布頁面布局 API 日期沖突校驗邏輯
本章節主要涉及前端項目的講解，包括前端項目的模塊劃分、插件的集成、業務的具體實現、路由管理的實現方案、狀態管理的實現方案、組件的封裝等等。該前端項目是一個標準的VUE3的項目，該項目的架構也完全是按照商業級的產品模塊劃分水準來做，內容豐富，可學性極強。
本章將實現菜單權限新增和編輯表單開發，及其對應的后端API開發，并完成開發過程中各種問題修復和優化。
本章主要開發商城前端登錄， 商城前端登錄采用的是手機號+驗證碼方式進行登錄，利用redis來做驗證碼失效時間，并且采用token+redis來處理通用化登錄解決方案，它能適用于各種終端。在本章中還會教大家如何編寫接口文檔，如何和前后端聯調開發等。
- 7-1 發送短信驗證碼API邏輯編寫以及布置的作業
- 7-2 商城前端用戶表設計
- 7-3 阿里云短信介紹以及sdk獲取
- 7-4 lib庫下發送短信驗證碼類庫封裝
- 7-5 發送短信驗證碼API邏輯編寫以及布置的作業
- 7-6 短信驗證碼記錄到redis中
- 7-7 剔除common公共方法思想以及新思想引入做到代碼高度可維護和管理
- 7-8 日志是問題定位的關鍵
- 7-9 如何根據日志來分析當前qps高點和低點
- 7-10 短信驗證碼lib層優化-引入工廠模式
- 7-11 代碼高度優化-利用反射機制處理工廠模式做到真正的高大上思想
- 7-12 關于短信驗證碼預留的2個作業
- 7-13 前端用戶登錄邏輯開發（一）
- 7-14 前端用戶登錄邏輯開發（二）
- 7-15 前端用戶登錄邏輯開發-基于redis+token
- 7-16 token登錄需要注意的點以及登錄代碼優化
- 7-17 利用authbase處理登錄攔截器
- 7-18 獲取登錄用戶基本信息數據
- 7-19 個人中心數據修改以及預留的作業
- 7-20 退出登錄
- 7-21 代碼第一次入代碼倉庫
- 7-22 前后端整體聯調測試
通過完成文章的編輯和刪除功能，引出了之前組件留下的幾個 bug，通過解決bug 帶給大家持續優化的思路和方案，最后完成了一個通用 Modal 組件的編碼過程。
對于一個復雜前端項目，在編碼之前，分析過程可謂是“磨刀不誤砍柴工”，本周我們來給大家講解怎樣一步步抽絲剝繭，從需求到難點，再到系統整體設計。
本章將演示代碼生成器的制作，學習模板引擎freemarker的使用。通過代碼生成器可以快速生成dto、service、controller和vue界面代碼，再配合上mybatis generator，可以快速完成單表的增刪改查管理功能，極大的提高開發效率。另外，本章的知識也可應用于靜態頁面生成、導出復雜excel等涉及文件生成的場景。
本章將完成github+gitee API接入，并完成下載器的實現流程設計
實現微前端框架基礎功能，包括：應用注冊、路由攔截、主應用生命周期添加、微前端生命周期添加、加載和解析html、加載和解析js、渲染、執行腳本文件等內容。
面試官給出一個項目需求或者功能，讓候選人做技術方案設計，考察綜合能力。本章將通過多個面試題，講解如何進行項目設計，包括抽象數據模型，總結功能和流程，制定技術方案等。
- 10-1 -設計一個H5編輯器的數據模型和核心功能-錯誤答案展示
- 10-2 擴展：如果你是一個項目的前端技術負責人，你的主要職責是什么？
- 10-3 -開始-學習要點和注意事項
- 10-4 -如何設計一個前端統計SDK-分析功能范圍
- 10-5 -如何設計一個前端統計SDK-代碼結構演示
- 10-6 -【連環問】sourcemap有何作用，如何配置
- 10-7 -SPA和MPA應該如何選擇
- 10-8 -設計一個H5編輯器的數據模型和核心功能-錯誤答案展示
- 10-9 擴展知識補充：何時應該使用 SSR ，何時不用？
- 10-10 -設計一個H5編輯器的數據模型和核心功能-演示正確答案
- 10-11 -設計一個“用戶-角色-權限”的模型和功能
- 10-12 -簡單描述hybrid模板的更新流程
- 10-13 -開發一個H5抽獎頁，需要后端提供哪些接口
- 10-14 -如果你是前端技術負責人，將如何做技術選型
- 10-15 -設計實現一個H5圖片懶加載SDK
- 10-16 擴展知識補充：我們常說的 B 端和 C 端，有什么區別
- 10-17 重點及注意事項總結
本周從編輯器開始開發，完成編輯器的基本布局，并且分析組件屬性和修改組件屬性的對應關系，創建業務組件庫的第一個組件，并且完成最簡單的編輯器交互，最后提出了業務組件實時實現編輯更新的解決方案。
- 6-1 將編輯器數據結構添加至 vuex store
- 6-2 將編輯器數據結構添加至 vuex store
- 6-3 LText 組件初步實現
- 6-4 LText 添加通用屬性
- 6-5 LText 使用 hooks 重用邏輯
- 6-6 完成點擊模版列表添加到畫布的行為
- 6-7 為業務組件屬性添加類型的利弊
- 6-8 獲取正在編輯的元素的屬性
- 6-9 添加屬性和表單的基礎對應關系并展示
- 6-10 添加更多簡單對應關系并展示
- 6-11 添加更多復雜對應關系并展示
- 6-12 分析展示和編輯屬性的“金科玉律
- 6-13 添加編輯表單并更新界面 第一部分
- 6-14 添加編輯表單并更新界面 第二部分
- 6-15 提出優化需求，以及組件返回的真相
- 6-16 將文本轉換為 vNode
- 6-17 方案一：使用 JSX 重寫 PropsTable 組件
- 6-18 方案二：使用 render 函數實現橋梁
- 6-19 本周重點內容回顧和總結
本章介紹了Web前端開發者職業發展和學習內容，包括不同等級工程師發展的能力要求、前端開發的技術范疇、學習步驟和學習內容、日常前端開發的工具和工作全流程、與同事協作的方法。介紹了Web網頁基礎知識，包括HTML、CSS、JS三大核心技術，瀏覽器兼容和頁面布局，Dom技術，Ajax。理解大規模前端開發涉及的工程化、組件化，熟悉常用開發必備的框架。最后展望了前端發展趨勢，了解大前端、微前端、低代碼平臺的概念和關鍵技術點。
- 6-1 常用瀏覽器及內核，為什么要瀏覽器兼容
- 6-2 前端學習指南：入門方法與學習策略
- 6-3 前端開發全流程詳解：從設計到上線
- 6-4 前端開發工具與Bug調試技巧大揭秘
- 6-5 HTML、CSS、JavaScript：前端三大核心技術精講
- 6-6 常用瀏覽器及內核，為什么要瀏覽器兼容
- 6-7 前端流行的布局方式，屏幕適配實戰技巧
- 6-8 ES、JS、TS關系梳理：前端語言的進化之路
- 6-9 DOM操作、事件處理與Ajax異步應用深入解析
- 6-10 前端高效開發之道：工程化、模塊化與組件化實踐
- 6-11 主流前端框架詳解：React、Angular、Vue必備指南
- 6-12 Node.js后端技術棧：前端開發的擴展領域
- 6-13 前端、后端、移動端、桌面端、小程序是什么
- 6-14 小程序開發實踐：從零到一構建你的應用
- 6-15 前端工程優化與發布流程：質量與效率的雙重保障
- 6-16 大前端趨勢展望：前端技術的未來發展
- 6-17 微前端架構探索：引領前端未來的新方向
- 6-18 大廠前端開發標準與流程揭秘
- 6-19 低代碼平臺：前端前沿開發模式探索
本章從 前后端分離和 RESTful 概念入手，介紹了為學生提供的 swagger 調試工具如何使用，然后引入 axios，通過 vuex action 的添加，實現 async 改造 和 axios 攔截器的基本用法，最后還抽象出一個 Loader 組件的編碼和實現過程。
- 7-1 前后端分離開發是什么
- 7-2 RESTful API 設計理念
- 7-3 使用 swagger在線文檔查看接口詳情
- 7-4 axios 的基本用法和獨家后端API 使用（必看）
- 7-5 后端Icode終極使用方案
- 7-6 使用vuex action 發送異步請求
- 7-7 使用vuex action 發送異步請求第二部分
- 7-8 CreatePost 頁面 ColumnId 類型報錯的解決方案
- 7-9 使用 async 和 await 改造異步請求
- 7-10 使用axios攔截器添加loading效果
- 7-11 Loader 組件編碼第一部分 - 基本實現
- 7-12 Loader 組件編碼第二部分 - 使用 Teleport 進行改造
漸進式地構建前端項目，開箱即用，與三方類庫實現高內聚低耦合，打造高效的開發體驗，方便項目后期升級以及其他技術型改造。
本章完成雙閉環之“鑒權”閉環，經典的RBAC角色權限模型設計與實現，完成權限守衛功能開發。對接前端菜單頁面，創建接口請求，實現不同用戶角色登錄之后訪問不同的角色內容。
- 12-1 前端內容頁：動態Form組件&封裝新增編輯模態框
- 12-2 前端內容頁：創建角色頁面（創建路由）
- 12-3 前端內容頁：創建角色頁面&菜單管理內容頁面
- 12-4 前端內容頁：封裝刪除模態框組件（有作業）
- 12-5 前端內容頁：封裝useModal方法
- 12-6 前端內容頁：動態Form組件&封裝新增編輯模態框
- 12-7 前端內容頁：完成動態Form組件及模態框數據傳遞
- 12-8 前端內容頁：菜單&角色新增與編輯模態框(作業)
- 12-9 [擴展]Form雙向數據綁定邏輯
- 12-10 后端開發：菜單及接口訪問控制思想
- 12-11 創建角色：CURD控制器及服務對接數據庫(nest-cli作業)
- 12-12 創建菜單及數據對接：數據庫migrations相關（非常重要）
- 12-13 權限控制：RABC權限關聯路由與控制器
- 12-14 基于策略的控制：流行的casl策略庫介紹
- 12-15 權限控制：與casl集成并完成策略權限控制（挑戰）
- 12-16 權限控制：與casl集成完成自定義裝飾器與守衛
- 12-17 權限控制：與casl集成并完成策略權限控制(作業與獎勵)
本章將詳細分析菜單權限的實現原理，并開發后端菜單權限API，核心原理涉及vue-router的動態路由機制。
AST 抽象語法樹、JavaScript AST、render 函數生成。在我們了解了整個編譯的大步驟之后，接下來我們就需要深入各個步驟，來掌握編譯器的執行過程了。
- 14-1 源碼閱讀：編譯器第三步：生成 render 函數
- 14-2 擴展知識：JavaScript與有限自動狀態機
- 14-3 擴展知識：掃描 tokens 構建 AST 結構的方案
- 14-4 源碼閱讀：編譯器第一步：依據模板，生成 AST 抽象語法樹
- 14-5 框架實現：構建 parse 方法，生成 context 實例
- 14-6 框架實現：構建有限自動狀態機解析模板，掃描 token 生成 AST 結構
- 14-7 框架實現：生成 AST，構建測試
- 14-8 擴展知識：AST 到 JavaScript AST 的轉化策略和注意事項
- 14-9 源碼閱讀：編譯器第二步：轉化 AST，得到 JavaScript AST 對象
- 14-10 框架實現：轉化 JavaScript AST，構建深度優先的 AST 轉化邏輯
- 14-11 框架實現：構建 transformXXX 方法，轉化對應節點
- 14-12 框架實現：處理根節點的轉化，生成 JavaScript AST
- 14-13 擴展知識：render 函數的生成方案
- 14-14 源碼閱讀：編譯器第三步：生成 render 函數
- 14-15 框架實現：構建 CodegenContext 上下文對象
- 14-16 框架實現：解析 JavaScript AST，拼接 render 函數
- 14-17 框架實現：新建 compat 模塊，把 render 轉化為 function
- 14-18 總結
由于是前后端分離項目，包含前端，前端源碼直接提供的噢~ 本章節會手把手帶著大家把前端運行好，可以正常和手機互通，所以沒接觸過前端的小伙伴們不用怕的喲~
面試官給出一個項目需求或者功能，讓候選人做技術方案設計，考察綜合能力。本章將通過多個面試題，講解如何進行項目設計，包括抽象數據模型，總結功能和流程，制定技術方案等。
- 33-1 -設計一個H5編輯器的數據模型和核心功能-錯誤答案展示
- 33-2 擴展：如果你是一個項目的前端技術負責人，你的主要職責是什么？
- 33-3 -開始-學習要點和注意事項
- 33-4 -如何設計一個前端統計SDK-分析功能范圍
- 33-5 -如何設計一個前端統計SDK-代碼結構演示
- 33-6 -【連環問】sourcemap有何作用，如何配置
- 33-7 -SPA和MPA應該如何選擇
- 33-8 -設計一個H5編輯器的數據模型和核心功能-錯誤答案展示
- 33-9 擴展知識補充：何時應該使用 SSR ，何時不用？
- 33-10 -設計一個H5編輯器的數據模型和核心功能-演示正確答案
- 33-11 -設計一個“用戶-角色-權限”的模型和功能
- 33-12 -簡單描述hybrid模板的更新流程
- 33-13 -開發一個H5抽獎頁，需要后端提供哪些接口
- 33-14 -如果你是前端技術負責人，將如何做技術選型
- 33-15 -設計實現一個H5圖片懶加載SDK
- 33-16 擴展知識補充：我們常說的 B 端和 C 端，有什么區別
- 33-17 重點及注意事項總結
理解實時通信，使用netty的websocket編寫服務端啟動類、子處理器以及助手類。 理解JS相關的websocket api，簡單使用hbuilder編寫通信頁面與netty交互并且使用web瀏覽器與手機端瀏覽器進行測試數據交互
本章將帶領大家進行商品添加、更新以及搜索展示等相關模塊的開發。同時，我們會對代碼進行優化重構。
深入學習Nestjs的常用裝飾器，了解接口開發中的CURD操作（增刪改查）從前端到后端的整個過程，同時在本章搭建前端項目，完成Vue3+Pinia+Vue-router全家桶與Boostrap 5.x的集成，實操前后端請求與響應的流程。
- 10-1 前端表單及模態框：創建新增、編輯、刪除模態框
- 10-2 好用到飛起的前端HTTP Client：請求庫Axios封裝
- 10-3 前端登錄頁面：介紹Boostrap的柵格系統，完成登錄頁面(作業)
- 10-4 表單校驗：登錄表單Bootstrap校驗，模擬發送請求
- 10-5 前端內容頁：完成頁面布局（創建路由）
- 10-6 前端詳情頁：完成表格布局（分頁、篩選表單）
- 10-7 創建控制器：定義用戶模塊并創建控制器
- 10-8 進階：使用 @Param 和 @Body 解析請求
- 10-9 查詢：創建讀取列表服務(業務分析&SQL基礎)
- 10-10 查詢：對接數據庫查詢操作（作業）
- 10-11 查詢進階：queryBuilder及幾種JOIN的學習（1）
- 10-12 查詢進階：queryBuilder及幾種JOIN的學習（2）
- 10-13 創建用戶：創建及異常處理邏輯TypeORMFilter
- 10-14 (重要)remove&delete區別：控制器&服務&存儲庫命名規則
- 10-15 更新：操作&數據庫更新對接
- 10-16 前端表單及模態框：創建新增、編輯、刪除模態框
- 10-17 前后端聯調：頁面CURD操作及接口響應(作業)
