廣東WEB前端編程攻城獅培訓(xùn)班

【技術(shù)介紹】

1.深入全面、著重實(shí)戰(zhàn)

技術(shù)體系全:

包含了主流的前后端技術(shù)，開發(fā)者根據(jù)體系內(nèi)容的學(xué)習(xí)掌握,可以獨(dú)立完成整個(gè)項(xiàng)目的前后端工作。體系中涵蓋了，web前端的基礎(chǔ)部分、響應(yīng)式頁面布局、動(dòng)態(tài)特效制作、Vue、Uniapp、React框架全家桶、PHP、MySQL、面向?qū)ο?、ThinkPHP框架、FastAdmin后端敏捷開發(fā)、Laravel框架，Memcached和Redis緩存應(yīng)用，以及項(xiàng)目上線部署等相關(guān)開發(fā)核心知識，同時(shí)我們嵌入了AI模塊,在日常開發(fā)中熟練使用AI工具幫助我們解決各種開發(fā)層面的難題，在課程體系中帶入了市面上的一些主流的AI模型，無論是在代碼編程中還是在運(yùn)行端都利用AI工具進(jìn)行輔助讓我們的程序更加有效率，以顯著提升學(xué)員的競爭力和適應(yīng)未來開發(fā)需求的能力。

技術(shù)內(nèi)容:

各模塊知識內(nèi)容全方面細(xì)致講解、各種語法詳細(xì)剖析、插件/組件一步一步封裝、每個(gè)開發(fā)框架實(shí)現(xiàn)原理詳細(xì)解讀。

項(xiàng)目實(shí)踐多:

講師一邊解讀課程內(nèi)容，一邊讓學(xué)生練習(xí)掌握知識點(diǎn)，全程指導(dǎo)。

【適合人群】

【訓(xùn)練目的】

能獨(dú)立完成大型實(shí)訓(xùn)項(xiàng)目

【技術(shù)大綱】

AI模塊: AI輔助工具搭建與運(yùn)用

主流AI輔助工具應(yīng)用

AI輔助編程工具搭建、實(shí)時(shí)生成代碼片段、注釋轉(zhuǎn)代碼、單元測試生成

設(shè)計(jì)有效的提示(Prompt),更高效地與A1系統(tǒng)進(jìn)行交互，使AI成為更加強(qiáng)大的助手和工具

使用AI輔助生成技術(shù)文檔/API文檔

使用AI輔助生成模擬數(shù)據(jù)(如JSON結(jié)構(gòu)、數(shù)據(jù)庫測試數(shù)據(jù))

通過AI輔助描述語言錯(cuò)誤,獲取解決方案

通過AI將設(shè)計(jì)稿轉(zhuǎn)換為React/Vue代碼

后端與數(shù)據(jù)工程使用AI分析SQL準(zhǔn)確性以及查詢效率，自然語言轉(zhuǎn)SOL查詢

對接AI平臺的API接口開發(fā)智能客服/自動(dòng)化報(bào)表工具/用AI工具重構(gòu)舊代碼庫

模塊一:全面掌握WEB前端語言

01.全面掌握HTML 5前端語言及應(yīng)用

02.全面掌握CSS3前端語言及應(yīng)用

03.WEB布局實(shí)戰(zhàn)篇

04.項(xiàng)目版本控制

項(xiàng)目驗(yàn)收一:

項(xiàng)目名稱:電子網(wǎng)靜態(tài)網(wǎng)頁、國外門戶一站式網(wǎng)頁

項(xiàng)目要求:

根據(jù)給定的PSD設(shè)計(jì)稿實(shí)現(xiàn)靜態(tài)網(wǎng)頁布局

頁面布局要合理，如:要考慮到與后端代碼結(jié)合輸出時(shí)的結(jié)構(gòu)

項(xiàng)目要完整，不能遺漏頁面

涉及到技巧:

DIV+CSS的基本布局技巧、彈性盒子、圣杯布局等

目的:

該階段掌握DIV+CSS的布局技巧，并能獨(dú)立完成Web網(wǎng)站大部分的布局效果，為后面繼續(xù)學(xué)習(xí)打下基礎(chǔ)

成品展示:

作品展示

成品介紹

項(xiàng)目驗(yàn)收二:

項(xiàng)目名稱:layaBox靜態(tài)交互網(wǎng)頁

項(xiàng)目要求:

給做好的HTML靜態(tài)網(wǎng)頁(電子網(wǎng))添加動(dòng)效

1、用原生JAVAScript給項(xiàng)目添加輪播圖、選項(xiàng)卡、手風(fēng)琴等常見特效

2、用Jquery為項(xiàng)目添加輪播圖、選項(xiàng)卡、手風(fēng)琴等常見特效

3、使用[swiper、superslide、wow.js]等常見插件庫為項(xiàng)目添加動(dòng)效

使用Bootstrap框架實(shí)現(xiàn)一個(gè)響應(yīng)式網(wǎng)頁(layabox)的制作

1、使用柵格系統(tǒng)、排版實(shí)現(xiàn)頁面布局

2、使用Bootstrap組件快速實(shí)現(xiàn)模塊化布局

3、使用Bootstrap插件實(shí)現(xiàn)動(dòng)態(tài)效果

4、使用FontAwesome、lconFont等字體圖標(biāo)

成品展示:

模塊二:全面掌握WEB后端功能

01.環(huán)境搭建

02.LINUX基礎(chǔ)

03.PHP語法

模塊三:精通流行的項(xiàng)目開發(fā)框架

01.ThinkPHP5 + FastAdmin 框架開發(fā)

項(xiàng)目驗(yàn)收四:

項(xiàng)目名稱:在線云課堂

項(xiàng)目要求:

使用Thinkphp+FastAdmin 框架開發(fā)一個(gè)前臺+后臺的在線云課堂項(xiàng)目

前臺涉及的功能與頁面如下所示:

(1)注冊、登錄、驗(yàn)證碼、郵箱驗(yàn)證功能

(2)會(huì)員中心，個(gè)人資料修改，城市地區(qū)聯(lián)動(dòng)

(3)課程列表、課程購買，課程觀看，評論等功能

后臺涉及的功能與頁面如下所示:

(1)后臺管理員權(quán)限管理

(2)課程管理，對課程資料視頻，價(jià)格新增與編輯

(3)會(huì)員管理，擁有完整的公海，私海ERP系統(tǒng)

(4)數(shù)據(jù)分析，對近期的訂單，消費(fèi)記錄，新增客戶人數(shù)進(jìn)行分析

成品展示:

作品展示

成品展示

02.Laravel框架實(shí)戰(zhàn)

項(xiàng)目驗(yàn)收五:

項(xiàng)目名稱:未來資訊博客

項(xiàng)目要求:

使用Laravel框架實(shí)現(xiàn)一個(gè)動(dòng)態(tài)網(wǎng)站

前臺涉及到的頁面和功能如下所示:

(1)輸出前臺內(nèi)容

(2)界面美觀，輸出正常，頁面切換正常

(3)頁面包括:首頁、科技、文化、生活、關(guān)于我們

(4)功能包括:二級導(dǎo)航切換、分類輸出、搜索功能等

后臺涉及到的頁面和功能如下所示:

(1)實(shí)現(xiàn)后臺登錄功能

(2)實(shí)現(xiàn)網(wǎng)站各個(gè)模板的管理功能:

1、導(dǎo)航管理、文章管理、文章分類管理

2、管理員管理:包括管理員和角色管理

3、系統(tǒng)管理:包括系統(tǒng)基本配置管理和系統(tǒng)日志等

成品展示:

作品展示

模塊四: NodeJS+VueJS 框架開發(fā)

01.掌握NodeJS核心開發(fā)技術(shù)

02.VueJS前端核心框架開發(fā)

項(xiàng)目驗(yàn)收六:

項(xiàng)目名稱:家居商城

·技術(shù)要點(diǎn):

Vue腳手架 + Vue路由 + Vuex+ Axios + Vite + VantUl+接口封裝

涉及功能:

(1)對Vue路由、接口能功能進(jìn)行封裝

(2)使用VantUI框架，對項(xiàng)目中頁面進(jìn)行布局

(3)注冊、登錄、會(huì)員中心、個(gè)人資料、充值等功能

(4)熱銷商品、商品分類、商品詳情、購物車管理商品立即購買,客戶聯(lián)系,訂單管理,物流跟蹤

成品展示:

作品展示

成品展示

模塊五:微信小程序+混合APP

01.掌握微信小程序核心技術(shù)

02.掌握混合式APP開發(fā)核心技術(shù)

項(xiàng)目驗(yàn)收七:

項(xiàng)目名稱:微信小程序項(xiàng)目-王者榮耀故事站

微信端網(wǎng)站，頁面排版布局、交互體驗(yàn)必須正常訪問和操作，按照微信小程序官方文檔進(jìn)行開發(fā)，網(wǎng)站主要是前臺功能操作展示

前臺涉及到的頁面和功能如下所示:

(1)首頁:頂部顯示英雄分類，分類顯示不同的英雄列表(下拉刷新效果、上拉加載效果);

(2)英雄詳情:首頁的英雄，可打開英雄詳情頁，顯示圖文內(nèi)容介紹，圖片可放大預(yù)覽;

(3)故事語音頁:頂部顯示故事分類，分類顯示不同的故事列表(下拉刷新效果、上拉加載效果)，每個(gè)故事會(huì)有多條語音數(shù)據(jù)，對應(yīng)語音，通過小程序 API接口 播放語音功能;

(4)故事皮膚頁:顯示所有故事皮膚列表(下拉刷新效果、上拉加載效果);

(5)皮膚詳情頁:列表的皮膚，可打開外部皮膚網(wǎng)站，顯示完整的皮膚內(nèi)容介紹;

(6)個(gè)人中心頁:通過小程序進(jìn)行授權(quán)登錄，獲取微信用戶信息，頂部會(huì)顯示微信頭像、呢稱。

成品展示:

項(xiàng)目驗(yàn)收八:

項(xiàng)目名稱:混合式(Hybrid)APP項(xiàng)目仿豆瓣網(wǎng)APP

項(xiàng)目要求:

混合式(Hybrid)APP網(wǎng)站,頁面排版布局、交互體驗(yàn)必須正常訪問和操作,使用前端MUI框架、HBuilderX編輯器開發(fā)，網(wǎng)站主要是前臺功能操作展示。

前臺涉及到的頁面和功能如下所示:

(1)首頁:獲取正在熱映的電影，以列表形式展示(下拉刷新果上拉加載效果)，電影信息包括封面圖、電影名稱、劇情分?jǐn)?shù)、導(dǎo)演、主演等

(2)搜索頁:頂部廣告輪播圖，中部設(shè)置豆瓣Top250、北美票房榜兩個(gè)版塊，下方是即將上映的電影列表，異步Ajax可操作“想看”;

(3)點(diǎn)豆瓣Top250版塊，顯示對應(yīng)的電影列表，頂部顯示Top排名，點(diǎn)切換不同的排行榜列表數(shù)據(jù)(上拉加載效果)

(4)點(diǎn)北美票房榜版塊，顯示對應(yīng)的電影排行榜列表(上拉加載效果);

(5)點(diǎn)每部電影進(jìn)入詳情頁，顯示電影封面圖，名稱、上映時(shí)間、地點(diǎn)、型、導(dǎo)演、劇情簡介、演員列表、評論列表、豆瓣評分等;

(6)點(diǎn)電影的每位演員，可進(jìn)入影人頁，顯示演員名稱、個(gè)人簡稱、代表作品(名稱、評分);

(7)設(shè)置頁:可打開意見反饋頁，給開發(fā)者反饋相關(guān)問題;可清除緩存數(shù)據(jù);可打開關(guān)于我們頁，顯示開發(fā)者內(nèi)容介紹。

成品展示:

項(xiàng)目驗(yàn)收九:

項(xiàng)目名稱:商品進(jìn)銷存系統(tǒng)

技術(shù)要點(diǎn):

UniApp腳手架搭建+uView+接口封裝+微信小程序API+后端服務(wù)加密

項(xiàng)目要求:

(1)使用Ul框架組件進(jìn)行頁面布局

(2)接口請求加密

(3)微信一鍵授權(quán)登錄

(4)微信模板消息、微信個(gè)人資料、微信分享功能等

(5)多端兼容，兼容H5端、App、微信小程序端

(6)注冊，登錄，綁定賬號，控制臺，數(shù)據(jù)分析權(quán)限等

(7)供應(yīng)商、入庫管理、入庫審核、庫存盤點(diǎn)等功能

成品展示:

作品展示

作品介紹

模塊六: React+Typescript 框架開發(fā)

01.掌握REACTJS開發(fā)核心技術(shù)

02.Typescript基礎(chǔ)語法

項(xiàng)目驗(yàn)收十:

項(xiàng)目名稱:儀器租賃項(xiàng)目

技術(shù)要點(diǎn):

create-react-app+ react-router-dom+ craco + antd + axios+后端服務(wù)加密

項(xiàng)目要求:

(1)使用UI框架組件進(jìn)行頁面布局

(2)接口請求加密

(3)注冊,登錄,綁定賬號,控制臺,數(shù)據(jù)分析權(quán)限等

(4)產(chǎn)品租賃、歸還、退押金、聯(lián)系我們

成品展示:

作品展示

作品介紹

項(xiàng)目驗(yàn)收十一：

項(xiàng)目名稱:酒店預(yù)約項(xiàng)目

技術(shù)要點(diǎn):

vite + react-router-dom + antd-mobile + axios + typescript + Redux

項(xiàng)目要求:

1、搭建項(xiàng)目全家桶開發(fā)環(huán)境

2、封裝請求庫,對接口數(shù)據(jù)進(jìn)行加密對稱處理

3、有會(huì)員中心、預(yù)約、訂單、支付等功能模塊

4、項(xiàng)目打包部署優(yōu)化上線

成品展示:

作品展示

作品介紹

成品展示

【教學(xué)優(yōu)勢】

我們深知服務(wù)質(zhì)量對于學(xué)員學(xué)習(xí)體驗(yàn)的重要性。因此，技掌門提供全方位的學(xué)習(xí)支持，包括：

個(gè)性化學(xué)習(xí)輔導(dǎo)：根據(jù)學(xué)員的背景和目標(biāo)，定制個(gè)性化的學(xué)習(xí)路徑。

小班師徒制：小班制，讓師傅更好幫每個(gè)徒弟進(jìn)行指導(dǎo)。

實(shí)戰(zhàn)項(xiàng)目：通過參與真實(shí)項(xiàng)目，讓學(xué)員在實(shí)踐中學(xué)習(xí)和提升。

職業(yè)指導(dǎo)：提供職業(yè)規(guī)劃和就業(yè)指導(dǎo)，幫助學(xué)員順利步入職場。

持續(xù)學(xué)習(xí)資源：提供豐富的在線資源和社區(qū)支持，鼓勵(lì)學(xué)員持續(xù)學(xué)習(xí)和成長。