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

2019-08-02 12:12:28 浏览数 (1)

​

前言

前端生态越来越繁华，随着资本寒冬的来临，对前端招聘要求也变高了； 本文将从项目出发由浅入深做一个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技术栈

代码语言：javascript复制
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.接口实现继承方法？

代码语言：javascript复制
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()

​

javascript react 小程序 redux koa

0 人点赞