培訓背景
對目前的web來說,前后端分離已經(jīng)變得越來越流行了,越來越多的企業(yè)/網(wǎng)站都開始往這個方向靠攏。那么,為什么要選擇前后端分離呢?前后端分離對實際開發(fā)有什么好處?
而前后端分離開發(fā),可以很好的解決前后端分工不均的問題,將更多的交互邏輯分配給前端來處理,而后端則可以專注于其本職工作,比如提供API接口,進行權(quán)限控制以及進行運算工作。而前端開發(fā)人員則可以利用nodejs來搭建自己的本地服務器,直接在本地開發(fā),然后通過一些插件來將api請求轉(zhuǎn)發(fā)到后臺,這樣就可以完全模擬線上的場景,并且與后臺解耦。前端可以獨立完成與用戶交互的整一個過程,兩者都可以同時開工,不互相依賴,開發(fā)效率更快,而且分工比較均衡。
培訓目標
1.掌握前后端分離開發(fā)模式框架思想;
2.掌握前后端分離開發(fā)協(xié)作模式;
3.掌握前后端接口定義規(guī)則及測試方式;
4.掌握前端主流開發(fā)技術(shù);
5.掌握Vue基礎語法;
6.掌握Vue組件、VueRouter、Vuex;
7.掌握ElementUI及ElementAdmin框架。
培訓特色
1.Bat技術(shù)主管級別講師;
2.小班課不超15人 學員更多輔導機會;
3.培訓內(nèi)容及案例根據(jù)技術(shù)變化動態(tài)調(diào)整;
4.案例皆為真實企業(yè)級項目、從容應對工作挑戰(zhàn)。
課程大綱
時間 | 內(nèi)容 | 備注 |
---|---|---|
第一天 上午 |
前后端分離開發(fā)及 后端接口設計與實現(xiàn) |
1.傳統(tǒng)的開發(fā)模式 2.前后端分離的開發(fā)模式 3.開發(fā)流程 4.前后職責分離 5.前后技術(shù)分離 6.前后分離的優(yōu)點 7.跨域問題解決 8.接口設計 9.數(shù)據(jù)接口規(guī)范流程 10.完整的響應結(jié)果 11.認識 REST 12.RESTFul API的交互方式 13.實現(xiàn) REST 框架 14.后端接口設計及實現(xiàn)案例 15.Postman接口測試 16.Swagger插件生成接口API文檔 |
第一天 下午 | ES6 |
1.ECMA介紹,名稱、版本 2.Let命令 3.Const命令 4.字符串模板 5.字符串新增方法 6.函數(shù)默認參數(shù) 7.箭頭函數(shù) 8.Rest運算符 9.變量的解構(gòu)賦值(數(shù)組) 10.變量的解構(gòu)賦值(對象) 11.數(shù)組方法forEach、map、filter、find 12.數(shù)組方法ervery、some、reduce 13.對象擴展 14.Class基本語法 15.Class的繼承 16.面向?qū)ο髮嵗?br/> 17.Promise 18.模塊化 |
第二天 上午 | Vue基礎 |
1.MVVM前端架構(gòu)思想 2.Vue總體特性 ●數(shù)據(jù)驅(qū)動 ●雙向數(shù)據(jù)綁定 ●觀察者模式與Vue架構(gòu)實現(xiàn) 3.Vue實例 ●構(gòu)造器 ●Vue實例生命周期 4.條件渲染 5.列表渲染 6.計算屬性 7.Watchers 8.事件處理器 9.事件修飾符 10.樣式綁定 11.表單控件 ●基礎用法 ●綁定Value ●參數(shù)特性 12.過渡&動畫 ●CSS過渡 ●JavaScript過渡 13.漸進過渡 |
第二天 下午 |
Ajax Vue組件 |
1.Ajax數(shù)據(jù)獲取 ●Axios實質(zhì) ●Axios安裝 ●Axios使用 2.組件 ●組件語法 ●組件生命周期 ●vue全局組件 ●vue中的局部組件 ●vue聲明父子組件 ●父子傳遞數(shù)據(jù) ●子父傳遞數(shù)據(jù) ●數(shù)據(jù)同步 ●子組件更改數(shù)據(jù)不同步數(shù)據(jù) ●vue組件自定義事件 ●vue中的slot |
第三天 上午 |
VueRouter VueX |
3.VueRouter ●安裝及使用用法 ●嵌套路由 ●路由規(guī)則 ●路由匹配 ●具名路徑 ●路由選項 ●Router-view ●V-link 4.Vuex ●vuex之state用法 ●2.vuex之getters用法 ●3.vuex之mutations用法 ●4.vuex之a(chǎn)ctions用法 |
第三天 下午 |
ElementUI ElementAdmin |
5.Element 框架簡介 ●安裝及使用用法 ●基礎組件庫 ●柵格布局 ●布局容器 ●字體及圖標 ●菜單及導航 6.ElementAdmin ●ElementAdmin工程結(jié)構(gòu) ●ElementAdmin組件開發(fā) ●ElementAdmin后端接入 |