1024專屬視頻 | 前端視頻:基礎入門、axios、Promise、mpvue項目實戰

2021-02-21 尚矽谷教育

如果你在學習前端,千萬不要錯過這次的尚大前端視頻四連發!

本套教程是尚矽谷李立超老師2019年全新錄製,將前端學習的基礎內容融匯為148節課,涵蓋了HTML、CSS、HTML5和CSS3的核心技術點。通過對本教程的學習,可以幫助初學者快速上手,並完成大部分靜態網頁的開發。

教程的具體內容包括:基本的HTML標籤、HTML5新標籤、CSS的基本用法、盒子模型、浮動、定位、flexbox、css sprite、 iconfont、transform、transition、animation、media query、less、vs code、PhotoShop等;還包含了移動端開發的基礎知識,如視口、移動端的適配等(這些內容使我們可以在不應用任何JS代碼的情況下即完成移動端的適配)。

除此之外,課程涵蓋大量的CSS技巧、動畫、交互效果,對傳統浮動和定位的布局方式,以及CSS3中的彈性盒和響應式布局都有深入講解。

教程目錄:

001.H5&C3基礎_課程簡介

002.H5&C3基礎_網頁簡史

003.H5&C3基礎_HTML簡介

004.H5&C3基礎_編寫你的第一個網頁

005.H5&C3基礎_安裝notepad++

006.H5&C3基礎_自結束標籤和注釋

007.H5&C3基礎_標籤中的屬性

008.H5&C3基礎_文檔聲明

009.H5&C3基礎_關於進位

010.H5&C3基礎_字符編碼

011.H5&C3基礎_1文檔的使用

012.H5&C3基礎_VSCode的安裝

013.H5&C3基礎_配置liveServer

014.H5&C3基礎_實體

015.H5&C3基礎_meta標籤

016.H5&C3基礎_語義化標籤(1)

017.H5&C3基礎_塊和行內

018.H5&C3基礎_語義化標籤(2)

019.H5&C3基礎_列表

020.H5&C3基礎_超連結簡介

021.H5&C3基礎_相對路徑

022.H5&C3基礎_超連結的其他用法

023.H5&C3基礎_圖片標籤

024.H5&C3基礎_圖片的格式

025.H5&C3基礎_內聯框架

026.H5&C3基礎_音視頻播放

027.H5&C3基礎_CSS簡介

028.H5&C3基礎_CSS編寫的位置

029.H5&C3基礎_CSS的基本語法

030.H5&C3基礎_常用選擇器

031.H5&C3基礎_複合選擇器

032.H5&C3基礎_關係選擇器

033.H5&C3基礎_屬性選擇器

034.H5&C3基礎_偽類選擇器

035.H5&C3基礎_超連結的偽類

036.H5&C3基礎_偽元素

037.H5&C3基礎_餐廳練習介紹

038.H5&C3基礎_繼承

039.H5&C3基礎_選擇器的權重

040.H5&C3基礎_像素和百分比

041.H5&C3基礎_em和rem

042.H5&C3基礎_RGB值

043.H5&C3基礎_HSL值

044.H5&C3基礎_文檔流

045.H5&C3基礎_盒子模型

046.H5&C3基礎_盒子模型-邊框

047.H5&C3基礎_盒子模型-內邊距

048.H5&C3基礎_盒子模型-外邊距

049.H5&C3基礎_盒子模型-水平方向的布局

050.H5&C3基礎_盒子模型-垂直方向的布局

051.H5&C3基礎_盒子模型-外邊距的摺疊

052.H5&C3基礎_行內元素的盒模型

053.H5&C3基礎_瀏覽器的默認樣式

054.H5&C3基礎_布置練習

055.H5&C3基礎_京東圖片列表

056.H5&C3基礎_京東左側導航欄

057.H5&C3基礎_網易新聞列表

058.H5&C3基礎_盒子的大小

059.H5&C3基礎_輪廓陰影和圓角

060.H5&C3基礎_浮動的簡介

061.H5&C3基礎_浮動的特點

062.H5&C3基礎_導航條練習

063.H5&C3基礎_簡單的布局

064.H5&C3基礎_高度塌陷和BFC

065.H5&C3基礎_BFC的演示

066.H5&C3基礎_clear

067.H5&C3基礎_使用after偽類解決高度塌陷

068.H5&C3基礎_clearfix

069.H5&C3基礎_相對定位

070.H5&C3基礎_絕對定位

071.H5&C3基礎_固定定位

072.H5&C3基礎_粘滯定位

073.H5&C3基礎_絕對定位元素的位置

074.H5&C3基礎_元素的層級

075.H5&C3基礎_京東輪播圖練習

076.H5&C3基礎_字體族

077.H5&C3基礎_圖標字體簡介

078.H5&C3基礎_圖標字體的其他使用方式

079.H5&C3基礎_iconfont

080.H5&C3基礎_行高

081.H5&C3基礎_字體的簡寫屬性

082.H5&C3基礎_文本的水平和垂直對齊

083.H5&C3基礎_其他的文本樣式

084.H5&C3基礎_京東頂部導航條-結構

085.H5&C3基礎_京東頂部導航條-基本樣式

086.H5&C3基礎_京東頂部導航條-下拉框

087.H5&C3基礎_PS的安裝

088.H5&C3基礎_背景(一)

089.H5&C3基礎_背景(二)

090.H5&C3基礎_背景練習1

091.H5&C3基礎_背景練習2

092.H5&C3基礎_雪碧圖

093.H5&C3基礎_線性漸變

094.H5&C3基礎_徑向漸變

095.H5&C3基礎_電影卡片練習

096.H5&C3基礎_表格的簡介

097.H5&C3基礎_長表格

098.H5&C3基礎_表格的樣式

099.H5&C3基礎_表單簡介

100.H5&C3基礎_表單補充

101.H5&C3基礎_項目搭建

102.H5&C3基礎_導航條結構的搭建

103.H5&C3基礎_導航條基本樣式

104.H5&C3基礎_二維碼下拉

105.H5&C3基礎_添加過渡效果

106.H5&C3基礎_頭部logo

107.H5&C3基礎_頭部導航條

108.H5&C3基礎_頭部導航下拉層

109.H5&C3基礎_右側的搜索框

110.H5&C3基礎_左側的導航條

111.H5&C3基礎_完成banner

112.H5&C3基礎_右側工具條

113.H5&C3基礎_中間的廣告欄

114.H5&C3基礎_項目補充

115.H5&C3基礎_過渡

116.H5&C3基礎_米兔練習

117.H5&C3基礎_動畫

118.H5&C3基礎_奔跑的少年

119.H5&C3基礎_關鍵幀

120.H5&C3基礎_變形平移

121.H5&C3基礎_z軸平移

122.H5&C3基礎_旋轉

123.H5&C3基礎_鴨子表

124.H5&C3基礎_復仇者聯盟

125.H5&C3基礎_縮放

126.H5&C3基礎_less簡介

127.H5&C3基礎_less中的變量

128.H5&C3基礎_父元素和擴展

129.H5&C3基礎_混合函數

130.H5&C3基礎_less的補充

131.H5&C3基礎_彈性盒簡介

132.H5&C3基礎_會彈的導航條

133.H5&C3基礎_彈性容器上的樣式

134.H5&C3基礎_彈性元素上的樣式

135.H5&C3基礎_淘寶導航

136.H5&C3基礎_聊聊像素

137.H5&C3基礎_手機像素

138.H5&C3基礎_完美視口

139.H5&C3基礎_vw單位

140.H5&C3基礎_vw適配

141.H5&C3基礎_移動端頁面上部分

142.H5&C3基礎_完成移動端頁面

143.H5&C3基礎_媒體查詢簡介

144.H5&C3基礎_媒體查詢簡介

145.H5&C3基礎_美圖手機導航結構

146.H5&C3基礎_美圖手機左側圖標

147.H5&C3基礎_美圖手機左側下拉菜單

148.H5&C3基礎_美圖手機完成

axios是前端必備的前後交互ajax請求庫, vue/react官方推薦使用。本視頻教程從基本的HTTP請求協議開始,到封裝XHR定義簡潔版axios;從axios的基本語法使用,到難點技術使用分析,最後進行axios源碼的深入分析,幫助學習者深入掌握axios技術。

教程目錄:

01.課程介紹

02.HTTP相關複習

03.json-server搭建REST接口_瀏覽器測試

04.使用axios請求REST接口

05.區別ajax請求與一般的http請求

06.XHR的API

07.分析axios請求函數

08.ajax封裝_發請求

09.ajax封裝_post請求攜帶參數數據

10.ajax封裝_get請求攜帶參數

11.ajax封裝_讀取請求結果數據

12.ajax封裝_PUT和DELETE請求

13.axios的介紹和特點

14.axios的文檔說明

15.axios使用_發ajax請求

16.axios使用_create方法

17.axios使用_攔截器及運行流程

18.axios使用_取消請求1

19.axios使用_取消請求2

20.axios源碼分析_整體結構分析

21.axios源碼分析_axios與Axios的關係

22.axios源碼分析_axios與Axios的關係_debug

23.axios源碼分析_axios與instance的區別

24.axios源碼分析_流程圖分析

25.axios源碼分析_request串連整個流程

26.axios源碼分析_request串連整個流程圖

27.axios源碼分析_dispatchRuest函數

28.axios源碼分析_xhrAdapter函數

29.axios源碼分析_取消請求

Promise是ES6中最重要也是最難的技術。中大型公司面試前端工程師,Promise的實現是必考題。本視頻教程從最基本的回調/異常語法開始,到Promise的基本使用;從Promise難點技術分析,到一步步手寫Promise的實現、擴展async和await深入分析、宏隊列與微隊列詳解;最後通過經典的面試題,檢驗Promise學習的效果。通關之後,你就成為了Promise高級工程師!

教程目錄:

01.課程介紹

02.函數對象與實例對象

03.2種回調函數(同步與異步)

04.常見的內置錯誤

05.錯誤的處理(捕獲與拋出)

06.Promise的理解

07.promise的狀態和狀態改變

08.Promise的基本運行流程

09.promise的基本使用

10.為什麼要用Promise

11.Promise的API說明

12.Promise的API使用1

13.Promise的API使用2

14.Promise的幾個關鍵問題1

15.Promise的幾個關鍵問題2

16.Promise的幾個關鍵問題3

17.Promise的幾個關鍵問題4

18.Promise的幾個關鍵問題5

20.自定義Promise_說明

21.自定義Promise_整體結構

22.自定義Promise_構造函數實現1

23.自定義Promise_構造函數實現2

24.自定義Promise_構造函數測試和完善

25.自定義Promise_then方法實現1

26.自定義Promise_then方法實現2

27.自定義Promise_then方法實現3

28.自定義Promise_then方法測試和完善

29.自定義Promise_then方法實現(第2遍)

30.自定義Promise_Promise的resolve和reject方法

31.自定義Promise_Promise的all方法

32.自定義Promise_Promise的race方法

33.自定義Promise_完善all和race方法

34.自定義Promise_Promise的resolveDelay和rejectDelay方法

35.自定義Promise_class版本

36.async與await

37.JS異步之宏隊列與微隊列

38.面試題1

39.面試題2

40.面試題3

41.面試題4

本項目使用的框架是美團團隊推出的小程序框架mpvue,項目為模塊化、組件化、工程化的項目。涵蓋了原生小程序API的使用、Vue.js核心語法及flyio第三方Ajax請求庫,後端使用Koa框架進行搭建。學習本課程內容可以快速上手mpvue,熟悉小程序同後端交互,及同微信官方的交互流程。

教程目錄:

01.mpvue簡介

02.Mpvue初始化簡介

03.mpvue項目初始化搭建

04.firstView頁面搭建

05.firstView頁面搭建2

06.路由跳轉

07.窗口配置

08.底部tab欄搭建

09.index靜態頁面搭建

10.index數據動態展示

11.詳情頁靜態頁面搭建

12.詳情頁數據動態渲染

13.分享功能實現

14.列表頁功能完成

15.伺服器初始化搭建

16.搜索圖書接口完成

17.伺服器nodemon自動編譯

18.搜索頁面頭部功能完成

19.前後端交互實現

20.搜索界面完成

21.個人中心靜態頁面搭建

22.獲取用戶登錄信息,授權彈窗

23.打開本地攝像頭掃碼

24.封裝ajax請求功能函數

25.圖解說明如何獲取用戶唯一標識openId

26.獲取用戶臨時登錄憑證code

27.伺服器端獲取openId接口設計

28.驗證接口獲取openId

29.自定義登錄狀態,生成token

30.token驗證測試

獲取四套前端視頻教程,請關注尚矽谷教育1024程式設計師狂歡節活動,猛擊文章左下角「閱讀原文」了解詳情!

相關焦點

  • 好課資源共享:mksz153 - Spark Streaming實時流處理項目實戰
    框架生態實戰-從零模擬新浪微博-299元 #前端mks388、 Node.js+Koa2框架生態實戰、 從零模擬新浪微博 #前端mks384、 Electron+React+七牛雲 實戰跨平臺桌面應用 #前端mks377、 混合開發入門 主流開發方案實戰京東移動端APP #前端mks376、 零基礎入門 實戰mpvue2.0多端小程序框架 #前端
  • vue中簡單的axios二次封裝
    前端技術真是一個發展飛快的領域,jquery的時代,那時用的是 ajax 來處理數據請求。現在vue時代已經到來,axios 和 fetch都已經開始分別搶佔「請求」這個前端高地。本文將會嘗試著闡述他們之間的區別,並給出自己的一些理解。
  • [小程序]最新mpvue2.0 框架 - 實戰小慕讀書多平臺小程序
    第4章 15 分鐘快速搞定 mpvue 框架入門在這一章節中,老師將帶領你快速入門多端小程序框架 mpvue。先來了解什麼是 mpvue 框架,mpvue 與原生小程序開發的對比,以及如何通過腳手架初始化 mpvue 項目,最後講解 mpvue 框架的原理與生命周期。
  • 009 | 快速入門Web前端開發的正確姿勢
    PS:今天再免費放出一篇專欄文章,另外,小專欄已支持分享分成功能,你可以點擊文章結尾的「閱讀原文」,點擊專欄右上角的「小紅包」按鈕,可以看到專屬於你自己的分享連結,有人通過你這個專屬連結訂閱專欄的話,則你可以得到訂閱金10%的分成。入門標準很簡單,就一條:達到能參與 Web 前端實際項目的開發水平。
  • Fetch還是Axios——哪個更適合HTTP請求?
    axios 有一些優勢,比如對XSRF的保護或取消請求。為了能夠使用 axios 庫,我們必須將其安裝並導入到我們的項目中。可以使用CDN,npm或bower安裝 axios。現在,讓我們來看一個簡單的GET方法的語法。
  • 好課資源共享:mks329、 5G時代必備 音視頻WebRTC實時互動直播技術入門與實戰 #前端
    mks329、 5G時代必備 音視頻WebRTC實時互動直播技術入門與實戰 #前端mks321、 Flutter從入門到進階實戰攜程網 #前端mks320、 Node.js 從零開發 web serer博客項目 前端晉升全棧工程師必備 #前端mks316、 手把手帶你掌握新版webpack4.0 #前端
  • fetch和axios接口調用方式的用法
    前端接口調用的幾種方式 ,有原生ajax ,基於jQuery的ajax ,fetch ,axios關於原生ajax ,基於jQuery的ajax都已經簡單介紹過,下面來看看es6接口調用方式fetch客戶端,本質上也是對原生Ajax的封裝,只不過它是Promise的實現版本它支持:支持瀏覽器和node.js支持promise能攔截請求和響應自動轉換JSON數據
  • TypeScript 重構 Axios 經驗分享
    (Ps: 用 TypeScript,也是為了擺脫前端查文檔的宿命!)Promise based HTTP client for the browser and node.jsaxios 是基於 Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特性 ( √ 表示本項目具備該特性 ):
  • Fetch還是Axios,哪個更適合HTTP請求?
    Fetch概述和語法在構建Javascript項目時,我們可以使用window對象,並且它帶有許多可以在項目中使用的出色方法。這些功能之一是Fetch API,它提供了一種簡單的全局 .fetch() 方法,這是一種從API異步獲取數據的邏輯解決方案。
  • 《HTML5網頁前端設計》的教與學
    (零基礎56課時版)本教學大綱適用於零基礎入門學習,適用於未曾學習過WEB前端設計的前置課程的班級。可以直接使用本教材完成Web網頁前端設計的基礎入門和後續HTML5技術的學習。本教材配合以《HTML5網頁前端設計實戰》作為實驗輔導教材。
  • 前端ajax或axios發送數據後端實體類接受(實例和報錯原因)
    用到最多的就是ajax和vue組件的axios來傳數據到後端。首先,小喵在學習的過程中發現如果在數據傳輸過程中各種報錯的話,可能是在哪些方面的。法2把類直接寫成json字符串,然後用JSON.stringify()data: JSON.stringify({"jobid":jobid,"jobname":jobname})情況3,前端發送成功
  • Axios:基於Promise的HTTP庫
    {    // url 是伺服器連結接口地址    url: '/user',    // method 是發起請求時的請求方法    method: 'get',    // baseURL 如果url不是絕對地址,那麼將會加在其前面    // 當axios使用相對地址時這個設置非常方便
  • 2021年最新整理web前端學習路線(內附學習教程視頻連結)
    年度全網最新,史上最全web前端學習路線,從基礎到項目實戰應有盡有,牛批卡拉斯!==> 實戰項目之網易雲 ==> 面試題精講①-node.js ==> 面試題精講②-reactJS ==> 面試題精講③-Vue.js ==> 面試題精講④-頁面布局 ==> 面試題精講⑤-前後端協作 ==> 面試題精講⑥-原生JS、jQuery ==> 前端公開課合集前端全套視頻教程【教育】Web前端全套視頻1000集:名師打造,千集巨製
  • HTML+CSS前端設計知識圖譜(含教學大綱)
    可以直接使用本教材完成Web網頁前端設計的基礎入門和後續HTML5技術的學習。本教材配合以《HTML5網頁前端設計實戰》作為實驗輔導教材。>本教學大綱適用於零基礎入門學習,適用於未曾學習過WEB前端設計的前置課程的班級。
  • 註冊會計師CPA會計審計視頻講義課程資源
    數字能量學課程生命心靈八極靈數易經手機號車牌分析推算預測教程2021公務員遴選筆試面試申論行測考試培訓視頻1對1高端指導課程零基礎學英語入門自學小學兒童成人國際音標自然拼讀視頻教程網課中國象棋視頻教程大全集教學經典走象棋課程零基礎入門到精通網課中國象棋教學視頻教程成人兒童初學者零基礎入門高級攻防講解課程小學小升初英語音標閱讀單詞彙語法比人教版提分更快視頻在線課程
  • 京東數科 + 字節跳動web前端實習面經
    Functionial Component 的區別React 怎樣進行性能優化(Class Component 和 Functionial Componen 都要說),並且說一下原理你知道 Promise 嗎,怎麼實現 Promise 的串聯和並發實現promise.all
  • HTML前端設計教與學(32/48/60學時教學大綱+視頻)
    HTML5網頁前端設計是學習Web前端開發的必修課程。本課程介紹了開發Web前端網頁應具備的基礎知識,包括HTML5、CSS3、JavaScript技術入門以及HTML5拖放、表單、畫布、音頻和視頻、地理定位、Web存儲的應用API等知識。通過理論教學和上機練習訓練學生編寫程序的熟練度和規範性;在項目經驗的積累方面,通過完成項目案例,增加對實際軟體項目開發的經驗。
  • Vue與axios的完美結合
    連續實習了十來天,晚上還得趕項目,只能咕咕咕了~~~背景近期團隊中後臺的小夥伴向我反應,說:「你就不能統一給所有請求跨域攜帶cookie嗎?」的確,我的請求寫的很冗餘,出現了很多重複的東西,也因為我熟悉jquery ajax寫法的原因,我遲遲沒有放棄它。而只是單純使用jquery ajax的話,無疑是大材小用。
  • 【vue2.0進階】用axios來實現數據請求,簡單易用
    讓我猛地想起進階篇在推出預告的時候,大家都提醒前端君,vue-resource已經停止更新了,現在都推薦使用了axios了。前端君為大家總結幾個關鍵點:    1.  維護成本與其價值相比不划算    2.  其他插件也能滿足同等開發需求    3.  你可以繼續用,但不再更新既然官方都不再更新vue-resource,並推薦大家使用axios,那我們就一起來學習一下它。
  • 學習韓語基礎入門韓語自學教程視頻
    學習韓語基礎入門韓語自學教程視頻學習韓語基礎入門韓語自學教程視頻針對那些想要速成的小夥伴,可以參考下面的計劃因為是速成,所以很多細節會丟失,整個語言學習的框架也不是那麼清晰好處就是能讓你快速的上手~學習韓語基礎入門韓語自學教程視頻