前言
前端生态越来越繁华，随着资本寒冬的来临，对前端招聘要求也变高了；
本文将从项目出发由浅入深做一个 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 的项目
分析: 这两个框架都是通过预编译将对应风格的格式转化成小程序格式
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, 请戳