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