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