超喜欢你呦-CSDN博客

原创 Vue Router 跳转404，路由守卫及配置（登录篇）

在这个前端技术迭代迅速的时代，单页面应用开发中，路由守卫已经是非常常见也是必备的需求，为了控制使用者在各种状态下的路由页面跳转，例如：是否登录，是否有路由权限等等，今天就记录一下在各种登录状态下路由配置和路由守卫。Vue Router官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html页面跳转场景：各登录状态下需要限制的场景为以下几种。跳转非登录页（未登录，token不存在）跳转非登录页（已登录，tok

2021-05-08 17:19:00 14887

原创实战！Antd 中使用 react-beautiful-dnd 实现列表拖拽

前言提示：最近项目一个配置功能菜单的模块重构，对比了 antd 社区的 react-dnd react-sortable-hoc 以及本文使用的 react-beautiful-dnd，还是觉得 rbd 比较简单明了更契合项目中使用的 Class 组件，当然也用到了 hooks, so, let’s get started~一、react-beautiful-dnd 的特点是什么？物品自然优美的运动????无障碍：强大的键盘和屏幕阅读器支持♿️表现出色????干净且功能强大的api，易于上手

2021-03-13 13:50:00 7379 9

原创 Vue + Vant + i18n 实现国际化及语言切换

Vue + Vant + i18n 实现国际化及语言切换packageversionvue2.6.11vant2.12.6vue-i18n8.23.0最近一个用 react-mobile 的小型 IM App 被客户吐槽UI，所以现在用传说Vue中最漂漂的 Vant 重构一下，没办法，react实在是没有省心又好看的react库了[手动哭脸T_T]，所以喽，搞起！...

2021-03-02 19:35:20 5953

原创 React-router v6 在 Class 组件和非组件代码中的正确用法

最近内部正在开发的 react 项目 react-router-dom 全线升级到了 v6 版本，v6 版本中很多 API 进行了重构变更，导致很多旧写法失效，下面记录一下 history/hash 模块在v6中的用法。// IE polyfillimport 'react-app-polyfill/ie9'import 'react-app-polyfill/stable'import './styles/index.less'import HashHistory from 'histor.

2022-03-20 18:56:02 4872 5

原创 js 提升开发效率的运算符汇总

Javascript 自 ES6 之后在每年的 6月都会进行一次版本更新，每每都会新增一些实验性的语法、操作符等，迄今为止已经增加了不少新成员，本文就介绍一些开发中能简化代码提升开发效率的运算符，走你~~

2021-09-09 17:59:36 523

原创 Github Pages + Hexo 3分钟快速搭建个人博客网站

GitHub Pages 旨在从 GitHub 存储库托管您的个人、组织或项目页面。直接从您的GitHub 存储库托管。只需编辑、推送，您的一切更改就会生效。

2021-09-03 15:46:58 558 1

原创深入理解数据双向绑定方法 Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，Vue 的底层中很多地方用到了这个方法，比如数据代理、计算属性等等......

2021-08-31 20:22:52 515

原创简单实用的前端工程环境变量配置

为什么要配置环境变量？一般项目分有开发环境、测试环境、正式环境，所使用的接口域名都是不同的。每次切换环境或者打包的时候都需要手动更改配置，比较麻烦也容易出错，所以用脚本自动化方式直接配置不同的开发环境。实现原理采用 nodejs中的 process 内置对象，根据各个环境的配置文件区分和切换环境 "scripts": { "serve": "vue-cli-service serve --mode development", "build": "npm run build

2021-08-24 17:58:12 1377

原创 H5 ios10+ Safari 中实现 video/audio 自动播放小技巧

关于Safari 中禁止音视频自动播放的问题：apple 开发者声明：https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html苹果为了用户着想，禁止了 Autoplay 和 JS "onload" 加载播放，也就是说即使你在h

2021-07-27 16:06:52 9876 13

原创 js 中关于操纵 Element 进行滚动的方法，都在这了‍‍‍

也许为了方便咱操作 html 中的元素滚动条进行上下左右的滚动，js 自带了N种（规范）方法：CSSOM View 规范的 ScrollToOptions 用于指定一个元素应该滚动到哪里，以及滚动是否应该平滑，它可以作为参数提供给以下方法：Window.scroll()Window.scrollTo()Window.scrollBy()Element.scroll()Element.scrollTo()Element.scrollBy()这么多方法我该怎么选，怎

2021-07-14 19:26:15 2076

原创关于Node.js版本管理工具，这一篇即学即用~

Node.js 是什么？标准答案：Node.js® 是一个基于 Chrome V8 引擎的 JavaScript 运行时????，本文不详细描述，想要了解更多 Node.js 的详细信息，可以阅读朴灵老师的《深入浅出Node.js》，绝对受益匪浅。图灵社区：《深入浅出Node.js》Node.js 官网： https://nodejs.org/zh-cn/为什么需要版本管理工具？前端各种使用不同版本 Node.js 的 npm 包满天飞的情境下，为了解决 Node.js 各种版本存在

2021-06-30 17:23:38 1266

原创 react 项目使用 react-app-polyfill 兼容IE11以下浏览器打开空白问题

IE11版本以下带来的兼容问题导致页面打开空白：解决方案:一、安装 react-app-ployfillnpm i react-app-polyfill -S二、src/index.js 中引入必须放在 index.js 文件顶部，否则无效。npm传送门：https://www.npmjs.com/package/react-app-polyfill// This must be the first line in src/index.jsimport 'react-app-polyf

2021-06-23 16:40:08 1819

原创 js 字符串中的空格、换行符(\r,\s,\n,\r\n)

一、换行，回车换行回车在不同操作系统下的含义以下均为单击 Enter 键产生Windows：系统行末结束符是 ‘\r\n’Linux：统行末结束符是 ‘\n’Mac：系统行末结束符是 ‘\r’关于软 / 硬回车的扩展知识硬回车：就是普通我们按回车产生的，它在换行的同时也起着段落分隔的作用。软回车：是用 Shift + Enter 产生的，它换行，但是并不换段，即前后两段文字在 Word 中属于同一“段”。在应用格式时你会体会到这一点。软回车能使前后两行的行间距大幅度缩小，因为它

2021-06-22 11:53:08 77349

原创简述HTML中的＜noscript＞＜/noscript＞作用

早期浏览器都面临一个特殊的问题，即当浏览器不支持JavaScript时如何让页面平稳的退化。对这个问题的最终解决方案就是创造一个<noscript>元素，用在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何<HTML>元素———<script>元素除外。包含在<noscript>元素中的内容，只有在下列情况下才会显示出来：浏览器不支持脚本浏览器支持脚本，但脚本被禁用。符合上述任何一个

2021-05-13 11:32:33 1171

原创 H5移动端调试工具 vconsole、eruda 使用方法

eruda:在 index.html 中引入：<script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script> <script>eruda.init();</script>vconsole:在 index.html 中引入：<script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"

2021-05-11 14:37:38 1635 9

原创前端请求接口直接报错 net::ERR_CERT_AUTHORITY_INVALID 或返回 undefined

今天前后端联调接口遇到一个问题，PC端请求正常回数据，移动端请求后控制台log是直接回了个undefined，原因是后台服务部署在了证书不安全的ip地址上，然后前端访问ip地址浏览器拦截了，PC端请求有效是因为...

2021-05-11 13:15:48 8044

原创 npm，yarn使用以及更换国内镜像源

常用命令：功能/工具名称yarnnpm安装全部依赖yarn / yarn installnpm install添加一个/多个依赖yarn add xxnpm install xx删除一个/多个依赖yarn removenpm uninstall搜索 package 包/npm searchyarn：Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具。// 查询源ya

2021-05-08 18:13:38 18265

原创 Vue 中使用高德地图API 获取地理位置+逆地理编码

库版本packageversionvue2.6.0vant2.12.6@amap/amap-jsapi-loader1.0.1需求：H5中获得用户位置授权后获取终端经纬度和地点名称，PC/移动端适用。Action！第一步：引入高德API库：import AMapLoader from '@amap/amap-jsapi-loader';第二步：添加插件，绘制地图AMap.Geocoder 地理编码与逆地理编码AMap.Geolocat

2021-04-30 16:20:37 5083 1

原创 H5 获取浏览器位置 navigator.geolocation

navigator.geolocation.getCurrentPosition()获取用户现在位置，只调用一次getLocation() { if (navigator.geolocation) { // support navigator.geolocation.getCurrentPosition((res) => { // successed const { coords, timestamp } = res; console.l

2021-04-29 11:56:17 1500

原创 H5 navigator.platform 属性值枚举以及使用场景

项目之前使用了 navigator.userAgent 判断当前是否是真机，给与特有功能，后发现PC浏览器移动端调试工具中取到的数据和手机是一样的，也会被当成真机处理，后面使用替代方案 navigator.platformnavigator.platform 枚举值如下（区分大小写）:HP-UXLinux i686Linux armv7lMac68KMacPPCMacIntelSunOSWin16Win32WinCEiPhoneiPodiPadAndroidBlackB.

2021-04-28 18:46:13 2686 3

原创 Vant 自定义组件适配 iphone 底部安全区

场景：IM问题：聊天界面输入框在iphone下被底部指示条遮盖，如下图：解决方案：提示：这里填写该问题的具体解决方案：例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。<meta name="viewport" content="width=device-

2021-04-28 12:38:16 12015 4

原创 yarn 构建应用和安装报 error Incorrect integrity when fetching from the cache

error Incorrect integrity when fetching from the cacheinfo Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.解决办法执行：yarn cache clean

2021-04-08 15:23:32 747

原创正则判断url媒体文件类型

最近项目中有聊天发送文件的需求点，需要将对应url渲染成文件列表，某些文件上传后没有对应的媒体类型，只能暂时通过url来判断了。export const isAudio = (path) => { return /\.(opus|flac|webm|weba|wav|ogg|m4a|mp3|oga|mid|amr|aiff|wma|au|aac)/.test(path);};export const isVideo = (path) => { return /\.(mp4

2021-04-02 16:36:23 1938

原创 Vue 中 touch 事件无效解决方案

添加 .native.prevent 修饰符即可<van-button round @touchstart.native.prevent="onTouchStart" @touchmove.native.prevent="onTouchMove" @touchend.native.prevent="onTouchEnd" > Hold to Talk </van-button>

2021-03-30 15:05:41 3764

原创 Vue 中使用 debounce 时获取 vue 实例

template 部分：<template> <van-search v-model="searchValue" @input="debounceSearch(onSearch)" /></template>script 部分：import { debounce } from 'lodash';import { Search } from 'vant';export default { name: 'input',

2021-03-29 17:53:41 835

原创 Vue 中 qrcode.vue 生成二维码以及添加中心logo

一、安装插件npm i qrcode.vue -S二、使用组件<template> <van-popup v-model="showQr" v-bind="popupConfig" > <div class="qrcode-wrapper"> <div class="qrcode-title"> <van-icon name="scan" /> 使用其他设备扫描二维

2021-03-16 18:38:10 3884

原创 Vue 中使用 style-resources-loader 配置全局使用 less sass 变量

项目场景：例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)问题描述：提示：这里描述项目中遇到的问题：例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据APP 中接收数据代码：@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ

2021-03-16 14:41:58 1539

原创关于 JavaScript 的十张知识图谱

1.JavaScript 数组2.JavaScript DOM 基本操作3.JavaScript 变量4.JavaScript 函数基础5.JavaScript 运算符6.JavaScript 流程语句7.JavaScript 数据类型8.JavaScript 正则表达式9.JavaScript 字符串函数10.JavaScript Window 对象图片...

2019-05-18 13:06:20 985

原创 JavaScript 实现：ECMAScript & DOM & BOM

JavaScript 实现虽然 JavaScript 和 ECMAScript 通常被人们用来表达相同的含义，但 JavaScript 的含义却比 ECMA-262 中规定的要多得多。没错，一个完整的 JavaScript 实现应该由下列三个不同的部分组成：核心 ( ECMAScript )：语言核心功能基于 ECMAScript 规范文档对象模型 ( DOM, Document O...

2019-05-17 21:54:08 441

Ryan的博客