为了账号安全,请及时绑定邮箱和手机立即绑定

Vue,React,微信小程序,快应用,TS 和 Koa 一把梭

banner

前言

前端生态越来越繁华,随着资本寒冬的来临,对前端招聘要求也变高了;
本文将从项目出发由浅入深做一个Vue,React,微信小程序,快应用,TS和 Koa的知识大串联;
相当于一篇文章搞定前端目前主流技术栈。

1.源码(持续更新)

话不多说,源码地址:Vue,React,微信小程序,快应用,TS 和 Koa 地址,欢迎 star
项目目录:
图片描述

2.vue 篇

2.1 vue-demo

2.1.1效果图

图片描述

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效果图

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效果图

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效果

图片描述

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效果图

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效果图

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/mongodb-window-install.html
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,请戳

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消