Vue，React，微信小程序，快应用，TS 和 Koa 一把梭
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 |
|---|---|
常用指令 | 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小程序框架
分析:这两个框架都是通过预编译将对应风格的格式转化成小程序格式
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.iconfont6.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？
2.接口和类的区别？
接口只声明成员方法，不做实现 ，class通过implements 来实现接口
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()