本章節(jié)主要涉及前端項目的講解,包括前端項目的模塊劃分、插件的集成、業(yè)務(wù)的具體實現(xiàn)、路由管理的實現(xiàn)方案、狀態(tài)管理的實現(xiàn)方案、組件的封裝等等。該前端項目是一個標(biāo)準(zhǔn)的VUE3的項目,該項目的架構(gòu)也完全是按照商業(yè)級的產(chǎn)品模塊劃分水準(zhǔn)來做,內(nèi)容豐富,可學(xué)性極強(qiáng)。
- 13-1 前端項目的狀態(tài)管理神器-pinia
- 13-2 前端項目整體介紹
- 13-3 前端項目的核心路由神器-VUE Router
- 13-4 前端項目的狀態(tài)管理神器-pinia
- 13-5 前端項目頁面跳轉(zhuǎn)流程解析
- 13-6 前端列表頁面詳解
- 13-7 前端預(yù)覽頁面詳解
- 13-8 前端分享預(yù)覽頁面詳解
- 13-9 準(zhǔn)備前后端聯(lián)調(diào)
- 13-10 前后端整體聯(lián)調(diào)-用戶模塊
- 13-11 前后端整體聯(lián)調(diào)-文件模塊
- 13-12 前后端整體聯(lián)調(diào)-回收站模塊
- 13-13 前后端整體聯(lián)調(diào)-分享模塊
- 13-14 第十三章總結(jié)
本章將演示代碼生成器的制作,學(xué)習(xí)模板引擎freemarker的使用。通過代碼生成器可以快速生成dto、service、controller和vue界面代碼,再配合上mybatis generator,可以快速完成單表的增刪改查管理功能,極大的提高開發(fā)效率。另外,本章的知識也可應(yīng)用于靜態(tài)頁面生成、導(dǎo)出復(fù)雜excel等涉及文件生成的場景。
本章將完成github+gitee API接入,并完成下載器的實現(xiàn)流程設(shè)計
本章我們將進(jìn)行前端展示系統(tǒng)的開發(fā),同時教會大家運用sui mobile做平滑的分頁效果。
了解微前端的應(yīng)用場景,并對市面上的多種微前端基數(shù)方案進(jìn)行比較,加深對微前端架構(gòu)思想的理解
實現(xiàn)微前端框架基礎(chǔ)功能,包括:應(yīng)用注冊、路由攔截、主應(yīng)用生命周期添加、微前端生命周期添加、加載和解析html、加載和解析js、渲染、執(zhí)行腳本文件等內(nèi)容。
本章介紹了Web前端開發(fā)者職業(yè)發(fā)展和學(xué)習(xí)內(nèi)容,包括不同等級工程師發(fā)展的能力要求、前端開發(fā)的技術(shù)范疇、學(xué)習(xí)步驟和學(xué)習(xí)內(nèi)容、日常前端開發(fā)的工具和工作全流程、與同事協(xié)作的方法。介紹了Web網(wǎng)頁基礎(chǔ)知識,包括HTML、CSS、JS三大核心技術(shù),瀏覽器兼容和頁面布局,Dom技術(shù),Ajax。理解大規(guī)模前端開發(fā)涉及的工程化、組件化,熟悉常用開發(fā)必備的框架。最后展望了前端發(fā)展趨勢,了解大前端、微前端、低代碼平臺的概念和關(guān)鍵技術(shù)點。
- 6-1 常用瀏覽器及內(nèi)核,為什么要瀏覽器兼容
- 6-2 前端學(xué)習(xí)指南:入門方法與學(xué)習(xí)策略
- 6-3 前端開發(fā)全流程詳解:從設(shè)計到上線
- 6-4 前端開發(fā)工具與Bug調(diào)試技巧大揭秘
- 6-5 HTML、CSS、JavaScript:前端三大核心技術(shù)精講
- 6-6 常用瀏覽器及內(nèi)核,為什么要瀏覽器兼容
- 6-7 前端流行的布局方式,屏幕適配實戰(zhàn)技巧
- 6-8 ES、JS、TS關(guān)系梳理:前端語言的進(jìn)化之路
- 6-9 DOM操作、事件處理與Ajax異步應(yīng)用深入解析
- 6-10 前端高效開發(fā)之道:工程化、模塊化與組件化實踐
- 6-11 主流前端框架詳解:React、Angular、Vue必備指南
- 6-12 Node.js后端技術(shù)棧:前端開發(fā)的擴(kuò)展領(lǐng)域
- 6-13 前端、后端、移動端、桌面端、小程序是什么
- 6-14 小程序開發(fā)實踐:從零到一構(gòu)建你的應(yīng)用
- 6-15 前端工程優(yōu)化與發(fā)布流程:質(zhì)量與效率的雙重保障
- 6-16 大前端趨勢展望:前端技術(shù)的未來發(fā)展
- 6-17 微前端架構(gòu)探索:引領(lǐng)前端未來的新方向
- 6-18 大廠前端開發(fā)標(biāo)準(zhǔn)與流程揭秘
- 6-19 低代碼平臺:前端前沿開發(fā)模式探索
進(jìn)行實戰(zhàn)項目的技術(shù)棧選型,確定使用微前端框架micro-app,并闡明它的優(yōu)勢
由于是前后端分離項目,包含前端,前端源碼直接提供的噢~ 本章節(jié)會手把手帶著大家把前端運行好,可以正常和手機(jī)互通,所以沒接觸過前端的小伙伴們不用怕的喲~
本章將專注于:將開發(fā)完成的代碼發(fā)布到線上,包含阿里云玩法,線上服務(wù)器配置、線上域名解析、nginx配置、線上環(huán)境驗證,故障排查與解決等內(nèi)容,讓我們的開發(fā)結(jié)果跑在真實的生產(chǎn)環(huán)境。讓你輕松+愉快地把自己的項目發(fā)布到線上可供隨時訪問。
本章將完成前后端功能整合,集成HTTP組件Axios,解決前后端分離架構(gòu)中常見的問題,如跨域、參數(shù)傳遞、多環(huán)境配置等。
本章開始接入后端開發(fā),實現(xiàn)作品的預(yù)覽,保存,自動保存,發(fā)布和渠道編輯等一系列功能。
- 17-1 前后端分離開發(fā)簡介
- 17-2 前后端分離開發(fā)簡介
- 17-3 分析后端接口和需求
- 17-4 使用 vuex action 發(fā)送請求
- 17-5 JSON server 的簡介和安裝使用
- 17-6 JSON server 自定義接口URL 和 返回數(shù)據(jù)結(jié)構(gòu)
- 17-7 JSON Server 實現(xiàn) JWT 驗證 - 生成 token
- 17-8 JSON Server 實現(xiàn) JWT 驗證 - 實現(xiàn)路由保護(hù)
- 17-9 使用 AForm 完成表單驗證
- 17-10 使用 AForm 完成提交時驗證的兩種方法
- 17-11 完成獲取驗證碼的功能
- 17-12 完成用戶登陸過程
- 17-13 使用高階函數(shù) actionWrapper 包裝 action 通用邏輯
- 17-14 AForm 源代碼解析 :Form 組件 和 FormItem 完成驗證
- 17-15 AForm 源代碼解析 :使用 useForm 完成驗證
- 17-16 添加全局讀取狀態(tài) - 整體通用讀取狀態(tài)
- 17-17 添加全局讀取狀態(tài) - 細(xì)粒度讀取狀態(tài)
- 17-18 處理全局錯誤處理
- 17-19 將全局讀取和錯誤添加至根組件
- 17-20 登陸狀態(tài)持久化
- 17-21 路由權(quán)限驗證 第一部分 - 功能分析
- 17-22 路由權(quán)限驗證 第二部分 - 編碼實現(xiàn)
- 17-23 編輯器獲取作品 第一部分 - 發(fā)送并且改進(jìn) action
- 17-24 編輯器獲取作品 第二部分 - 根據(jù)數(shù)據(jù)渲染至畫布
- 17-25 添加編輯器 Header
- 17-26 保存作品數(shù)據(jù)
- 17-27 添加自動保存功能
- 17-28 跳轉(zhuǎn)路由前提示保存
- 17-29 提取和整合保存作品邏輯
- 17-30 總結(jié)
除了MySQL和Redis要使用集群外,業(yè)務(wù)的節(jié)點的部署也要使用集群方案,才能保證高性能、高負(fù)載和高可用。這一章我們將學(xué)習(xí)打包前端VUE項目和后端SpringBoot項目,以集群的方式部署在Docker容器內(nèi)。
逐一對主、子應(yīng)用進(jìn)行交互、打包優(yōu)化,進(jìn)一步提升巨石應(yīng)用整體性能
本章主要開發(fā)商城前端登錄, 商城前端登錄采用的是手機(jī)號+驗證碼方式進(jìn)行登錄,利用redis來做驗證碼失效時間,并且采用token+redis來處理通用化登錄解決方案,它能適用于各種終端。在本章中還會教大家如何編寫接口文檔,如何和前后端聯(lián)調(diào)開發(fā)等。
- 7-1 利用authbase處理登錄攔截器
- 7-2 商城前端用戶表設(shè)計
- 7-3 阿里云短信介紹以及sdk獲取
- 7-4 lib庫下發(fā)送短信驗證碼類庫封裝
- 7-5 發(fā)送短信驗證碼API邏輯編寫以及布置的作業(yè)
- 7-6 短信驗證碼記錄到redis中
- 7-7 剔除common公共方法思想以及新思想引入做到代碼高度可維護(hù)和管理
- 7-8 日志是問題定位的關(guān)鍵
- 7-9 如何根據(jù)日志來分析當(dāng)前qps高點和低點
- 7-10 短信驗證碼lib層優(yōu)化-引入工廠模式
- 7-11 代碼高度優(yōu)化-利用反射機(jī)制處理工廠模式做到真正的高大上思想
- 7-12 關(guān)于短信驗證碼預(yù)留的2個作業(yè)
- 7-13 前端用戶登錄邏輯開發(fā)(一)
- 7-14 前端用戶登錄邏輯開發(fā)(二)
- 7-15 前端用戶登錄邏輯開發(fā)-基于redis+token
- 7-16 token登錄需要注意的點以及登錄代碼優(yōu)化
- 7-17 利用authbase處理登錄攔截器
- 7-18 獲取登錄用戶基本信息數(shù)據(jù)
- 7-19 個人中心數(shù)據(jù)修改以及預(yù)留的作業(yè)
- 7-20 退出登錄
- 7-21 代碼第一次入代碼倉庫
- 7-22 前后端整體聯(lián)調(diào)測試
利用Vite工具,從零搭建Vue3.0+TypeScript項目,整合ElementPlus組件庫和SVG庫,配置Router路由,封裝公共Ajax函數(shù)和表單驗證函數(shù)。設(shè)計404頁面、MIS端和業(yè)務(wù)端的Frame頁面。
- 3-1 前端封裝鑒權(quán)和前端驗證函數(shù)
- 3-2 用Vite創(chuàng)建Vue3.0前端項目
- 3-3 為前端Vue3.0項目配置router路由
- 3-4 前端Vue3.0項目整合ElementPlus
- 3-5 前端Vue3.0項目整合SVG庫
- 3-6 定義404頁面
- 3-7 利用JQuery封裝同步異步Ajax函數(shù)
- 3-8 前端封裝鑒權(quán)和前端驗證函數(shù)
- 3-9 設(shè)計業(yè)務(wù)端Frame頁面的導(dǎo)航區(qū)(一)
- 3-10 設(shè)計業(yè)務(wù)端Frame頁面的導(dǎo)航區(qū)(二)
- 3-11 設(shè)計業(yè)務(wù)端Frame頁面Footer區(qū)域
- 3-12 設(shè)計MIS端Login頁面
- 3-13 設(shè)計MIS端Frame頁面
- 3-14 設(shè)計MIS端Frame頁面菜單欄
- 3-15 設(shè)計MIS端Frame頁面內(nèi)容區(qū)
- 3-16 實現(xiàn)MIS端Frame頁面動態(tài)Tabs
- 3-17 實現(xiàn)MIS端Home歡迎頁面
- 3-18 實現(xiàn)MIS端Frame頁面內(nèi)容區(qū)適配
- 3-19 實現(xiàn)MIS端Frame頁面Tabs切換與關(guān)閉
- 3-20 本章總結(jié)
隨著web3.0的到來,技術(shù)的不斷迭代,前端技術(shù)在越來越多的地方發(fā)光發(fā)熱,前端未來的前景一片大好。本章帶你快速從零認(rèn)識前端。
本章系統(tǒng)講解SSE(Server-Sent Events)的原理與實現(xiàn),手把手帶你基于SpringBoot構(gòu)建SSE服務(wù)端,實現(xiàn)消息推送、跨域處理及廣播功能。結(jié)合服務(wù)接口連接客戶端,并在H5頁面中完成前端代碼梳理與SpringAI聯(lián)調(diào)測試,全面掌握前后端實時通信開發(fā)技能。
本章將通過無界微前端框架對項目進(jìn)行微前端架構(gòu)升級和改造,實現(xiàn)主應(yīng)用和子應(yīng)用分離。
本章將重點帶大家分析管理后臺前端的登錄流程,包括路由注冊、路由守衛(wèi)、登錄API實現(xiàn)等業(yè)務(wù)邏輯細(xì)節(jié)。
本課程的案例既可以部署在本地,也可以部署在云平臺,本章我們將比較阿里云、騰訊云、百度云的特點,以阿里云為例,介紹云主機(jī)的購買和使用,以及在阿里云ECS主機(jī)上部署本課程的相關(guān)程序。
本章從 前后端分離和 RESTful 概念入手,介紹了為學(xué)生提供的 swagger 調(diào)試工具如何使用,然后引入 axios,通過 vuex action 的添加,實現(xiàn) async 改造 和 axios 攔截器的基本用法,最后還抽象出一個 Loader 組件的編碼和實現(xiàn)過程。
- 7-1 前后端分離開發(fā)是什么
- 7-2 RESTful API 設(shè)計理念
- 7-3 使用 swagger在線文檔查看接口詳情
- 7-4 axios 的基本用法和獨家后端API 使用(必看)
- 7-5 后端Icode終極使用方案
- 7-6 使用vuex action 發(fā)送異步請求
- 7-7 使用vuex action 發(fā)送異步請求第二部分
- 7-8 CreatePost 頁面 ColumnId 類型報錯的解決方案
- 7-9 使用 async 和 await 改造異步請求
- 7-10 使用axios攔截器添加loading效果
- 7-11 Loader 組件編碼第一部分 - 基本實現(xiàn)
- 7-12 Loader 組件編碼第二部分 - 使用 Teleport 進(jìn)行改造
漸進(jìn)式地構(gòu)建前端項目,開箱即用,與三方類庫實現(xiàn)高內(nèi)聚低耦合,打造高效的開發(fā)體驗,方便項目后期升級以及其他技術(shù)型改造。
本章節(jié)將前端vue和后端微服務(wù)進(jìn)行聯(lián)調(diào),通過聯(lián)調(diào)來發(fā)現(xiàn)接口開發(fā)的問題以及修改這些問題
前端工程化是如何一步步發(fā)展到今天的?它在現(xiàn)階段開發(fā)中的起到了怎樣關(guān)鍵的影響和作用?本章將借助前端工程化的發(fā)展歷史,帶大家重新認(rèn)識前端工程化的應(yīng)用場景、適用范圍和其中的關(guān)鍵技術(shù),如:CommonJS、ESModule、npm、webpack等
- 2-1 前端工程化發(fā)展歷史
- 2-2 前端工程化發(fā)展歷史
- 2-3 前端工程化的應(yīng)用場景
- 2-4 前端工程化關(guān)鍵技術(shù)之模塊化詳解(上)
- 2-5 前端工程化關(guān)鍵技術(shù)之模塊化詳解(中)
- 2-6 前端工程化關(guān)鍵技術(shù)之模塊化詳解(下)
- 2-7 前端工程化關(guān)鍵技術(shù)之CommonJS規(guī)范詳解(上)
- 2-8 前端工程化關(guān)鍵技術(shù)之CommonJS規(guī)范詳解(下)
- 2-9 前端工程化關(guān)鍵技術(shù)之ESModule規(guī)范詳解(上)
- 2-10 前端工程化關(guān)鍵技術(shù)之ESModule規(guī)范詳解(下)
- 2-11 前端工程化關(guān)鍵技術(shù)之npm+webpack原理
- 2-12 ZBestPC工程化改造需求分析
扮演研發(fā)團(tuán)隊A角色,使用Nuxt2技術(shù)棧構(gòu)建子應(yīng)用,詳解Nuxt2子應(yīng)用如何接入微前端體系,最終實現(xiàn)了【首頁】業(yè)務(wù)模塊相關(guān)功能
本章將綜合介紹微前端技術(shù)框架的背景和實現(xiàn)原理,主要包括single-spa的應(yīng)用和源碼分析。
帶你以全局視角進(jìn)行開發(fā)環(huán)境的準(zhǔn)備并完成前后端環(huán)境聯(lián)調(diào)。進(jìn)行基礎(chǔ)網(wǎng)絡(luò)請求的封裝;完成路由信息的配置。
本章將演示代碼生成器的制作,學(xué)習(xí)模板引擎freemarker的使用。通過代碼生成器可以快速生成dto、service、controller和vue界面代碼,再配合上mybatis generator,可以快速完成單表的增刪改查管理功能,極大的提高開發(fā)效率。另外,本章的知識也可應(yīng)用于靜態(tài)頁面生成、導(dǎo)出復(fù)雜excel等涉及文件生成的場景。