跨端扫码确认实现Web登录(扫二维码登录)

起初的想法是类似于QQ扫码登录,BILIBILI扫码登录一样,通过手机确认后,在web端重定向完成登录通过对BILIBILI扫码功能的解析,自己实现了一套类似扫码登录的功能以下为伪代码,仅供查阅前端需要两个路由,两个页面login提供Web端用户登录和扫码图片仅提供扫码展示,密码登录不写了login2提供给跨端用户(如手机端)扫码进入主要为二次确认,提供确认登录和取消登录确认登录后,页面跳转至lo

- 阅读全文 -

react中的ref获取dom或者组件方法

使用ref获取DOM的引用在vue中,如果想获取DOM元素时,可以使用this.$refs.引用名称在react中也可以像vue中,有类似的写法,如下1.为元素添加ref引用<h2 ref="test">这是h2标签</h2>在页面上获取元素this.refs.test2. 使用ref获取组件的引用为组件添加ref引用<Text ref="

- 阅读全文 -

React Router /Vue-Router 采用BrowserHistory 关于 Nginx配置

React Router /Vue-Router 采用BrowserHistory 关于 Nginx配置如今前端应用普遍使用react-router作为路由管理,VUE也自带全家桶vue-router,在开发端webpack自带的express服务器下运行和测试表现均正常,部署到线上的nginx服务器后,还需要对该应用在nginx的配置里作相应调整,否则浏览器将不能正常使用该应用,表现为页面不显示

- 阅读全文 -

JavaScript异步剪贴板 API

在过去我们只能使用 document.execCommand 来操作剪贴板。不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM。现在 Chrome 已经支持了新的 Async Clipboard API,作为 execCommand 替代品。这个新的 Async Clipboard API 还可以使用 Promise 来简化剪贴板事件并将它们与 Drag-&-Drop API

- 阅读全文 -

React 17新增的生命周期

一、废除的生命周期官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug,尤其是对于异步渲染的版本由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数componentWillMountcomponentWillRecievePropscomponentWIllUpdate二、新增的生命周期static getDerivedStateFromProps(nex

- 阅读全文 -

toast&axios控制进度条

下面用了react-toastify和axios ,相关包可以在npmjs中搜索到主要是在axios 提交文件过程中引入一个config ,通过config导出对应的上传进度,通过toast.update修改上传进度条private onUpload() { let toastId: any = null var config = { onUpl

- 阅读全文 -

mapStateToProps,mapDispatchToProps的使用姿势

前言刚接触redux的时候,发现大家对mapSispatchToProps使用有几种方法,而且都跑通了,本文介绍下redux的mapStateToProps,mapDispatchToProps的一些小姿势mapStateToProps(state,ownProps)mapStateToProps是一个函数,用于建立组件跟store的state的映射关系作为一个函数,它可以传入两个参数,结果一定要

- 阅读全文 -

如何将React.Componment作为服务使用

如何将React.Componment作为服务使用遇到的问题:在NextJs中,当通过Axios请求数据时,如何监听并提供一个方法,在请求是显示loading组件,请求结束后若有错误,则弹窗 Error -Toast解决思路:在App.js中增加(或追加一个<div />)=>对该<div />追加相应的展示组件=>通过show:boolean=false控制其

- 阅读全文 -

NEXT.JS中值得一提的功能

一边吃零食一边看完了Next.JS的文档,写的不是很复杂,demo尝试起来也很快速:grimacing:我在看Next.JS文档的时候,是通过yarn init 手动搭建的空项目,然后按照文档一点一点写demo如果您不喜欢init,可以尝试使用create-next-app,接下来我们也提到一些关于create-next-app的安装和使用本篇文章主要是对Nextjs文档读后体会,以及发现的新鲜事

- 阅读全文 -