Vue，React，微信小程序，快應用，TS 和 Koa 一把梭

前言

前端生態愈來愈繁華，隨着資本寒冬的來臨，對前端招聘要求也變高了；
本文將從項目出發由淺入深作一個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
view	佈局容器,是塊級元素
text	文字容器,行內元素
image	圖片容器,塊級元素
經常使用指令	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的項目

分析:這兩個框架都是經過預編譯將對應風格的格式轉化成小程序格式

5.快應用篇

5.1 快應用模板

5.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使用

6.TS篇

6.1 TS前言

爲何會有TS? 你們有沒想過這個問題,緣由是JS是弱類型編程語言,也就是申明變量類型能夠任意變換。因此這個時候TS出現了。
TS 是 JS 的超集，也至關於預處理器,本文經過一個template項目來讓你快速上手TS。

6.2效果圖

Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star

6.3技術棧

1.vue
2.vue-cli3
3.vue-router
4.vuex
5.typescript
6.iconfont

6.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

6.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的味道

6.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)

7. koa 篇

7.1 koa前言

node.js的出現前端已經能夠用js一把梭,從前端寫到後臺。
本文從後臺利用node的框架koa+mongodb實現數據的增刪改查和註冊接口，前端利用umi + dva +ant-design-pro來實現數據渲染。實現一個小全棧project,就是so-easy

7.2效果圖

Vue，React，微信小程序，快應用，TS 和 Koa 地址，歡迎 star

7.3技術棧

koa：node框架
koa-bodyparser：解析body的中間件
koa-router ：解析router的中間件
mongoose ：基於mongdodb的數據庫框架，操做數據
nodemon：後臺服務啓動熱更新

7.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 // 基礎配置信息

7.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裏面修改

7.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:設置緩存

7.7 koa-router主要API

API	做用
get	get方法
post	post方法
patch	patch方法
delete	delete方法
prefix	配置公共路由路徑
use	將路由分層,同一個實例router中能夠配置成不一樣模塊
ctx.params	獲取動態路由參數
fs	分割文件

7.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,請戳