前言
前端生態越來越繁華，隨着資本寒冬的來臨，對前端招聘要求也變高了；
本文將從項目出發由淺入深做一個Vue，React，微信小程序，快應用，TS和 Koa的知識大串聯；
相當於一篇文章搞定前端目前主流技術棧。
1.源碼（持續更新）
話不多說，源碼地址：Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star
項目目錄：
2.vue 篇
2.1 vue-demo
2.1.1效果圖
Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star
2.1.2.技術棧
vue+vue-router+vuex+axios+element-UI+iconfont(阿里)
2.1.3.適配方案
左側固定寬度，右側自適應
左側導航和右側導航分別配置滾動條
2.1.4.技能點分析
| 技能點 | 對應api |
|---|---|
| 常用指令 | @(v-on)綁定事件, v-if/v-show是否創建/和是否顯示,v-for循環 |
| 生命週期 | 8個生命週期beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy和destroy |
| 觀察計算 | computed和watch |
| data屬性 | 定義變量,同樣變量使用必須先定義 |
| 組件註冊 | components局部註冊,Vue.component()全局註冊 |
| 組件通訊 | 子傳父:this.$emit,父傳子:props,平級組件:vuex或路由傳參 |
| 插件註冊 | Vue.use()註冊插件,如Vue.use(element)是調用element內部的install方法 |
| 路由註冊 | vue-router:Vue.use(router)也是調用內部的install方法,掛載到vue實例中生成route和router屬性 |
| 路由模式 | mode屬性可以設置history和hash |
| 子路由 | children:[]可以配置子路由 |
| 路由鉤子 | router.beforeEach(實現導航鉤子守衛)和router.afterEach |
| vuex | 4個屬性,state,getters, actions(異步獲取數據)和mutations(同步獲取數據) |
| vuex | 4個輔助函數,mapState,mapGetters, mapActions和mapMutations,就是輔助處理commit或distapch方法 |
| axios | 攔截器,interceptors.request請求攔截器,interceptors.response響應攔截器 |
| axios | baseUrl配置公共請求路徑,必須符合http標準的鏈接,否則設置無效 |
| axios | 請求方法,get,post,put,delete等 |
| axios | 跨域,withCredentials: true,需要後端支持 |
| css | sass,對應嵌套不超過三層,滾動條樣式設置,文本兩行超出build問題 |
| iconfont | 阿里字體圖標，可以自定義icon |
2.1.5.那麼問題來了?
computed和watch的區別? 解析
路由傳參的方法? 解析
vue.use,vue.install,mixins方法區別? 解析
history和hash區別及實現原理? 區別解析原理解析vue-router官網
使用history和hash模式部署服務器有什麼問題?問題解析
vuex的輔助函數和基本屬性使用的區別?vuex官網
axios原理?axios源碼
簡單實現一個vue+vue-router+vuex的框架?
2.2 vue-mobile-demo
2.2.1 效果圖
2.2.2技術棧
vue+vue-router+vuex+vant+rem+sass+iconfont(阿里)
vant:有讚的電商mobile插件
2.2.3適配方案
rem
2.2.4技能點分析
iconfont的使用:官網配置icon,導出圖標,引入assets目錄下
vant使用:詳見vant官網
全局配置rem:在index.html文件配置
全局配置sass函數和mixin:在build/utils下面的scss的options屬性配置static目錄下面的函數和混入
2.2.5那麼問題來了
vue-cli生成的項目src下面的assets和根路徑下面的static目錄的區別?解析
3. react 篇
3.1 react-mobile篇
3.1.1效果圖
Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star
3.1.2技術棧
react + react-router-v4 + redux +ant-design-mobile+iconfont
react-router-v4:路由4.x版本
redux:狀態管理
ant-design-mobile:UI組件
iconfont:字體icon
3.1.3適配方案
rem適配
3.1.4技能點分析
| 技能點 | 對應的api |
|---|---|
| 3種定義react組件方法 | 1.函數式定義的無狀態組件; 2.es5原生方式React.createClass定義的組件; 3.es6形式的extends React.Component定義的組件 |
| JSX | react是基於jSX語法 |
| react16之前生命週期 | 實例化(6個):constructor，getDefaultProps,getInitialState,componentWillMount,render,componentDidMount |
| react16生命週期 | 實例化(4個):constructor，getDerivedStateFromProps,componentWillMount,render,componentDidMount,componentWillUpdata,render,componentDidUpdate, componentWillUnmount |
| 生命週期 | 更新(5個) componentWillReceivePorps,shouldComponentUpdate, |
| 生命週期 | 銷燬:componentWillUnmout |
| react-dom | 提供render方法 |
| react-router 4.x組成 | react-router(核心路由和函數) , react-router-dom(API) , react-router-native( React Native 應用使用的API) |
| react-router 4.x的API | router(只能有一個) , route(匹配路由渲染UI) , history, link(跳轉) , navlink(特定的link,會帶樣式) , switch(匹配第一個路由) , redirect(重定向) , withRouter(組件,可傳入history,location,match 三個對象) |
| react-router 3.x組成 | 就是react-router |
| react-router 3.x的API | router , route , history(push和replace方法) , indexRedirect(默認加載) , indexRedirect(默認重定向) , link(跳轉) , 路由鉤子(onEnter進入,onLeave離開)4.x已經去掉 |
| history | react-router有三種模式: 1.browserHistory(需要後臺支持); 2.hashHistory(有'#'); 3.createMemoryHistory |
| redux | 單向數據流 , action(通過dispatch改變state值) , reducer(根據 action 更新 state) , store(聯繫action和reducer) |
| react-redux | 1.連接react-router和redux,將組件分爲兩類:UI組件和容器組件(管理數據和邏輯) , 2.connect由UI組件生成容器組件 , 3.provider讓容器組件拿到state , 4.mapStateToProps:外部state對象和UI組件的props映射關係, 5.mapDispatchToProps:是connect第二個參數， UI 組件的參數到store.dispatch方法的映射 |
| react-loadable | 代碼分割,相當於vue-router中的路由懶加載 |
| classNames | 動態css的類 |
3.2 react-pc-template篇
3.2.1效果圖
Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star
3.2.2技術棧
dva+umi+ant-design-pro
dva:可拔插的react應用框架,基於react和redux
mui:集成react的router和redux
ant-design-pro:基於react和ant-pc的中後臺解決方案
3.2.3適配方案
左側固定寬度，右側自適應
右側導航分別配置滾動條.控制整個page
3.2.4技能點分析
| 技能點 | 對應api |
|---|---|
| 路由 | 基於umi,裏面有push,replace,go等方法 |
| 狀態管理 | dva裏面的redux的封裝,屬性有state,effects,reducers |
| 組件傳值 | 父子:props,平級redux或umi的router |
| model | 項目的model和dom是通過@connect()連接並將部分屬性添加到props裏 |
| 登陸 | 登陸是通過在入口js裏面做路由判斷 |
4.微信小程序篇
4.1小程序demo
4.1.1效果
Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star
4.1.2技術棧
weui+tabbar+分包+iconfont+自定義頂部導航+組件傳值+wx.request封裝
weui:Tencent推出的小程序UI
4.1.3適配方案
rpx:微信小程序的單位
4.1.4技能點分析
| 技能點 | 對應api |
|---|---|
| 常用指令 | bindtap綁定事件, wx:if/wx:show是否創建/和是否顯示,wx:for循環 |
| 生命週期1 | 應用生命週期(app.js裏):launch,show,hide |
| 生命週期2 | 頁面生命週期(page裏):load,show,ready,hide,unload |
| 生命週期3 | 組件週期(component裏):created,attached,moved,detached |
| wx.request | ajax請求 |
| 背景音樂 | wx.getBackgroundAudioManager |
| 音頻 | wx.createAudioContext |
| 圖片 | wx.chooseImage |
| 文件 | wx.getFileInfo |
| 路由 | 在app.json裏面pages屬性定義pages目錄下面的文件 |
| 路由切換 | wx.navigateTo，wx.navigateBack， wx.redirectTo，wx.switchTab，wx.reLaunch |
| 分包 | 在app.json裏面subPackages屬性定義分包路由 |
| weui組件 | weui官網 |
| 原生組件 | 微信原生組件 |
| 業務組件 | 在json文件usingComponents註冊 |
| 組件通訊 | 定義globalData，storage和路由 |
4.1.5那麼問題來了
小程序的生命週期執行順序？page和應用生命週期 ， component生命週期解釋
幾種路由切換有什麼不同？路由介紹
小程序怎麼實現watch監聽數據變化？實現watch
4.1.6小程序框架
wepy官網
基於wepy的商城項目
mpVue
基於mpVue的項目
分析:這兩個框架都是通過預編譯將對應風格的格式轉化成小程序格式
4.快應用篇
4.1 快應用模板
4.1.1技能點分析
| 技能點 | 對應api |
|---|---|
| 佈局 | 基於彈性佈局 |
| 指令 | for：循環，if、show |
| 生命週期 | 頁面的生命週期：onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress |
| app生命週期 | onCreate、onDestroy |
| 事件 | $on、$off、$emit、$emitElement |
| 路由配置 | manifest文件的router屬性配置 |
| 路由跳轉 | router.page |
| 組件通訊 | 父子組件：$emit，props，兄弟組件：通過 Publish/Subscribe 模型 |
| 原生組件 | list，map，tabs和canvas |
| 消息機制 | websocket使用 |
5.TS篇
5.1 TS前言
爲什麼會有TS? 大家有沒想過這個問題,原因是JS是弱類型編程語言,也就是申明變量類型可以任意變換。所以這個時候TS出現了。
TS 是 JS 的超集，也相當於預處理器,本文通過一個template項目來讓你快速上手TS。
5.2效果圖
Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star
5.3技術棧
1.vue
2.vue-cli3
3.vue-router
4.vuex
5.typescript
6.iconfont
5.4核心插件
| 技能點 | 對應的api |
|---|---|
| vue-class-component | 是vue官方提供的，暴露了vue和component實例 |
| vue-property-decorator | 是社區提供 深度依賴vue-class-component拓展出了很多操作符@Component @Prop @Emit @Watch @Inject 可以說是 vue class component 的一個超集，正常開發的時候 你只需要使用 vue property decorator 中提供的操作符即可 |
vue-property-decorator暴露的API
| API | 作用 |
|---|---|
| @Component | 註冊組件 |
| get | 類似vue的computed |
| @Prop,@Emit | 組件傳值 |
| @Watch | 監聽值變化 |
| @Privde,@Inject | 對應privde和inject 高階組件用法,作用是多級父組件傳值給子 |
| @Model | 類似vue的model |
5.5 TS語法
| 數據類型 | any(任意類型)； number； string, boolean； 數組：number[]或new Array(項的數據類型相同)； void返回值類型； null； undefined； never(從不出現值)； 元祖(比數組強大,項的類型可以不同)； 接口：interface關鍵字； 對象：類似JS的object； 函數：function聲明； 類：class關鍵字，包括字段，構造函數和方法 |
| 變量聲明 | let [變量名] : [類型] = 值, 必須指定類型 聲明array,let arr: any[] = [1, 2] |
| 運算符,條件語句,循環 | 同JS |
| 函數 | 聲明同JS,形參必須指定類型,因爲形參也是變量 |
| 聯合類型 | 通過豎線聲明一組值爲多種類型 |
| 命名空間 | namespace關鍵字 |
| 模塊 | import和export |
| 訪問控制符 | public，private(只能被其定義所在的類訪問)和protected（可以被其自身以及其子類和父類訪問） 默認public，是不是有點Java的味道 |
5.6問題來了
1.怎麼在項目手動配置ts？
vue+ts項目配置
2.接口和類的區別？
接口只聲明成員方法，不做實現 ，class通過implements 來實現接口
ts中接口和類的區別
3.接口和對象的區別？
接口是公共屬性或方法的集合，可以通過類去實現；
對象只是鍵值對的實例
4.類class和函數的區別？
類是關鍵字class，函數是function
類可以實現接口
5.接口實現繼承方法？
interface Person {
age:number
}
interface Musician extends Person {
instrument:string
}
var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
console.log("年齡: "+drummer.age)
console.log("喜歡的樂器: "+drummer.instrument)
6. koa 篇
6.1 koa前言
node.js的出現前端已經可以用js一把梭,從前端寫到後臺。
本文從後臺利用node的框架koa+mongodb實現數據的增刪改查和註冊接口，前端利用umi + dva +ant-design-pro來實現數據渲染。實現一個小全棧project,就是so-easy
6.2效果圖
Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star
6.3技術棧
koa：node框架
koa-bodyparser：解析body的中間件
koa-router ：解析router的中間件
mongoose ：基於mongdodb的數據庫框架，操作數據
nodemon：後臺服務啓動熱更新
6.4項目目錄
├── app // 主項目目錄
│ ├── controllrts // 控制器目錄（數據處理）
│ │ └── ... // 各個表對應的控制器
│ ├── middleware // 中間件目錄
│ │ └── resFormat.js // 格式化返回值
│ ├── models // 表目錄（數據模型）
│ │ ├── course.js // 課程表
│ │ └── user.js // 用戶表
│ └── utils // 工具庫
│ │ ├── formatDate.js // 時間格式化
│ │ └── passport.js // 用戶密碼加密和驗證工具
├── db-template // 數據庫導出的 json 文件
├── routes // 路由目錄
│ └── api // 接口目錄
│ │ ├── course_router.js // 課程相關接口
│ │ └── user_router.js // 用戶相關接口
├── app.js // 項目入口
└── config.js // 基礎配置信息
6.5項目啓動步驟
1.git clone
2.安裝mongodb:http://www.runoob.com/mongodb...
3.安裝 Robomongo 或Robo 3T是mongodb可視化操作工具 (可選)
4.啓動
mongod (啓動 mongodb)
打開Robomongo 或Robo
cd koa-template
npm i
npm run start
cd react-template
npm i
npm run start
注意:
mongodb啓動默認端口號是27017,啓動看是否被佔用
後端項目端口號是3000,可以在koa-template/config.js裏面修改
6.6 koa的主要API
| API | 作用 |
|---|---|
| new koa() | 得到koa實例 |
| use | koa的屬性,添加中間件 |
| context | 將 node 的 request 和 response 對象封裝到單個對象中,每個請求都將創建一個 Context,通過ctx訪問暴露的方法 |
| ctx方法 | request:請求主體; response:響應主體; ctx.cookies.get:獲取cookie; ctx.throw:拋出異常 |
| request屬性 | header:請求頭; method:方法; url:請求url; originalUrl請求原始URL; href:完整URL; hostname:主機名; type:請求頭類型; |
| response屬性 | header:響應頭; status:狀態,未設置默認爲200或204; body:響應主體,string(提示信息) Buffer Stream(流) Object Array JSON-字符串化ull 無內容響應; get:獲取響應頭字段; set:設置響應頭; append:添加響應頭; type:響應類型; lastModified:返回爲 Date, 如果存在; etag:設置緩存 |
6.7 koa-router主要API
| API | 作用 |
|---|---|
| get | get方法 |
| post | post方法 |
| patch | patch方法 |
| delete | delete方法 |
| prefix | 配置公共路由路徑 |
| use | 將路由分層,同一個實例router中可以配置成不同模塊 |
| ctx.params | 獲取動態路由參數 |
| fs | 分割文件 |
6.8 mongoose主要API
| API | 作用 |
|---|---|
| Schema | 數據模式,表結構的定義；每個schema會映射到mongodb中的一個collection，它不具備操作數據庫的能力 |
| model | schema生成的模型，可以對數據庫的操作 |
model的操作database方法
| API | 方法 |
|---|---|
| create/save | 創建 |
| remove | 移除 |
| delete | 刪除一個 |
| deleteMany | 刪除多個 |
| find | 查找 |
| findById | 通過id查找 |
| findOne | 找到一個 |
| count | 匹配文檔數量 |
| update | 更新 |
| updateOne | 更新一個 |
| updateMany | 更新多個 |
| findOneAndUpdate | 找到一個並更新 |
| findByIdAndUpdate | 通過id查找並更新 |
| findOneAndRemove | 找到一個並移除 |
| replaceOne | 替換一個 |
| watch | 監聽變化 |
query查詢API
| API | 作用 |
|---|---|
| where | 指定一個 path |
| equals | 等於 |
| or | 或 |
| nor | 不是 |
| gt | 大於 |
| lt | 小於 |
| size | 大小 |
| exists | 存在 |
| within | 在什麼之內 |
注:Query是通過Model.find()來實例化
aggregate(聚合)API
| API | 作用 |
|---|---|
| append | 追加 |
| addFields | 追加文件 |
| limit | 限制大小 |
| sort | 排序 |
注:aggregate=Model.aggregate()
更多詳細API,請戳