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 = {}; 
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,请戳