应用场景
文章平均质量分 81
前端应用场景
八了个戒
愿代码之火永不熄灭,技术之光照耀前行!
展开
-
【MAC OS 命令行】Redis的安装、启动和停止。就是如此简单
上面主要总结了 Redis 的安装、启动停止的使用方式,如果哪里写的有问题,还请大佬指正。希望上面的内容对你的工作学习有所帮助!欢迎各位一键三连哦~各位 加油!✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下👍⭐️✏️评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!评论,你的意见是我进步的财富!原创 2023-03-06 17:05:49 · 8873 阅读 · 2 评论 -
关于Mac升级系统后,出现 xcrun: error: invalid active developer path 问题的解决方案【已解决】
前段时间更新升级 Mac 版本之后,使用 VS code 终端时出现 `xcrun: error: invalid active developer path` 的问题。xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun原创 2022-11-29 10:42:24 · 4078 阅读 · 0 评论 -
关于嵌套使用 iFrame 出现 Refused to display in aframe 拒绝连接访问 和 ‘X-Frame-Options‘ to ‘SAMEORIGIN‘ 的解决方案【已解决】
目录问题描述原因分析问题解决总结今天在迁移旧项目时,出现了如下错误提示:Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'问题描述当前项目是一个生产环境正常运行的项目,由于我们要迁移服务器并且部署 k8s,所以需要重新部署上线该项目。使用 iframe 的场景就是在一个容器中展示另一个页面(也是我们自己的页面,只不过域名不同)才会抛出这个错误。这个项目的在测试环境和生产环境都是可以正原创 2022-05-26 17:32:02 · 27085 阅读 · 2 评论 -
【MAC、Windows系统的node版本管理工具——nvm】nvm的安装、nvm常用命令、nvm设置默认 node 版本
在我们的实际开发过程中,需要使用 `nvm use vxx` 将 node 版本设置成其他更高或更低的版本,但是每次重新打开 VS Code 之后都会恢复到之前一个默认 node 版本上,使用起来很不方便。下面,我将从头到尾介绍一下如何 nvm 的安装和使用以及如何设置默认 node 版本【直接看:6. 指定默认的 node 版本】。原创 2022-05-23 10:19:12 · 3766 阅读 · 0 评论 -
小程序轻松实现一个完美适配各种机型的自定义导航栏
前言:最近又在小程序开发的时候会遇到了需要自定义导航栏的需求,小程序开发平台已经早就提供了这项能力,并且在之前项目中我也提到过这个问题的解决方案:微信小程序之实现页面顶部导航栏透明、隐藏效果。我们在开发这一部分功能的时候踩过一些坑,下面我将针对我在开发过程中碰到的问题进行总结整理以及提供一套完整的自定义导航栏组件,可以直接上手使用。问题分析:为了使我们的项目更好的适配所有的机型,那么就需要先分析一下:我们可以发现:Android 跟 iOS 顶部有差异的,表现在顶部到胶囊按钮之间的距离有高度原创 2021-09-15 11:32:00 · 2068 阅读 · 1 评论 -
Element-ui el-table 使用 SortableJS 实现表格拖拽排序,并将排序结果更新到数据库使数据行顺序修改
前言当我们使用 Element el-table 组件时,需要用到拖拽排序的需求时,虽然 el-table 自带支持按列排序,但是当我们自己拖拽进行排序时,现有组件是无法满足的。这个时候我们就需要引入一个强大的js拖拽库:SortableJS该拖拽库简单易上手,官网提供了我们常用的拖拽效果的demo,下面我主要记录一下如何在我们的项目中快速上手使用。一、安装安装方式分为三种:1、npm 安装npm install sortablejs --save2、bower 安装bower inst原创 2021-09-13 14:21:57 · 9260 阅读 · 6 评论 -
Element UI 使用 table 组件设置 el-table-column 宽度width为百分比无效的问题解决方案
问题:使用 Element el-table 组件时,给列 el-table-column 设置百分比%宽度无效( width="30%" )解决:Vue中要将 el-table-column 的宽度设置成百分比的话,不能通过设置 width来实现,而是要设置 min-width,并且每一列都必须设置 min-width。原因:el-table 组件会被 vue 解析成 html,Vue直接把百分号去掉把数值当做列宽来呈现,所以,width 设置百分比的值直接被解析去掉百分号% 变成 px 了。原创 2021-09-08 10:35:22 · 22746 阅读 · 5 评论 -
Mac OS电脑环境下设置hosts的方法【最简单实用方法】
什么是hosts?hosts 是一个没有扩展名的系统文件,其基本作用就是将一些常用的域名与其对应的 IP 地址建立一个关联“ 数据库 ”。当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从hosts文件中寻找对应的 IP 地址,一旦找到,系统就会立即打开对应网页,如果没有找到,则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。Mac 电脑设置hosts的方法?一、打开终端,找到如下图标二、在打开的窗口中输入 sudo vim /ect/hosts 然后按下回车,并输入电脑的原创 2021-09-01 16:44:19 · 9581 阅读 · 0 评论 -
最新最全的前端面试题集锦之 Ajax、Fetch、Axios 篇
该内容主要整理关于 Axios 的相关面试题,其他内容面试题请移步至 2021 最新最全的前端面试题集锦 查看。目录一、Ajax 相关面试题1、概念2、作用3、创建 Ajax4、Ajax 状态和 HTTP 状态码5、Ajax 中常用的属性和方法6、思考:post 和 get 有什么区别二、Axios 相关面试题1、axios 原理2、axios 的特点有哪些?3、axios 有哪些常用方法?3、一次并发的请求 axios.all([])4、说下你了解的axios相关配置属性?三、Fetch 相关面.原创 2021-08-09 16:13:01 · 1868 阅读 · 0 评论 -
Vue-Router 之 路由导航守卫钩子详解【最全实用总结】
这篇文章主要介绍了 vue-router 路由导航守卫钩子的使用总结。一、什么是导航钩子官方解释:vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的,单个路由独享的,或者组件级的。也就是说:导航钩子就是用来监听路由的变化,当路由发生改变的时候就去触发 vue-router 的导航钩子。二、路由守卫路由守卫主要分为以下几种:全局守卫路由独享守卫组件内守卫下面将对每一个导航钩子进行详细讲解。三、全局守卫1. .原创 2021-07-01 14:00:51 · 1738 阅读 · 2 评论 -
Vue 之 路由跳转传参方式详解【最全实用总结】
这篇文章主要介绍了 vue 路由跳转传参的几种方式总结。一、路由跳转Vue 中路由跳转主要分为两种方式:声明式路由导航(<router-link>)编程式路由导航(js的方式)下面将主要对这两种跳转方式进行详细解析。二、声明式路由导航<router-link>不带参数跳转<router-link :to="{name: 'home' }" > </router-link><router-link :to="{pa.原创 2021-06-29 15:25:30 · 9127 阅读 · 2 评论 -
浏览器 JavaScript 中的 this 的使用【最全总结,值得收藏】
前言大家可以看上一篇文章,是关于 Nodejs 中 this 的使用,里面还总结了 Nodejs 与浏览器 JavaScript 中的 this 的区别。JavaScript 中 this 的使用全局下的 this非严格模式情况下,全局的 this 都是 windowconsole.log( this ); // windowfunction fn(){ console.log( this ); // window}严格模式下,抑制 this禁用指向了 window原创 2021-06-29 10:07:01 · 681 阅读 · 3 评论 -
Nodejs 中关于 this 的使用以及与浏览器 JavaScript 中的 this 的区别【亲自踩坑总结,值得收藏】
前言最近根据安排,在参与一个自动化测试工具的开发,本项目是基于 Nodejs 开发的,由于挺长时间没有使用 Nodejs 进行完整的项目开发了,所以在开发过程中还会踩不少坑,所以这就来了。我们这里说的是在 Nodejs 中的 this,而不是在 JavaScript 中的 this。Nodejs 中的 this 和在浏览器中 JavaScript 中的 this 还是不一样的,所以大家还是需要区分一下。(关于 Nodejs 中的 this 与 Javascript 中的 this 的区别,在文末我也替大原创 2021-06-28 17:52:05 · 698 阅读 · 0 评论 -
【神奇的BUG】在使用正则表达式时,结果明明是 true,不走 if 却走 else,但是此时既不是 true也不是false,请看我如何狡辩
前言在进行需求开发时,碰到了一个神奇的、莫名的Bug。在项目中,我用到了正则表达式,出于职业操作,我先把它声明定义出来,没毛病吧。然后继续,我要判断一下我的输入是否符合当前的正则规则。此时,神奇的事情发生了。。。我输入的内容正则表达式判断结果我 true,但是 if 的判断结果却是 false 走了 elseWHAT????甚是疑惑,一度以为是我眼花了,那先上问题代码代码let value = "0";const regExp = /\d/g;// \d => 匹配一个数字字原创 2021-06-23 16:32:08 · 911 阅读 · 6 评论 -
微信小程序之实现页面顶部导航栏透明、隐藏效果(navigationBar)欢迎点赞收藏
我们在开发微信小程序的过程中大家都知道,导航栏的颜色可以在 app.json 中的 window 属性里面添加 navigationBarBackgroundColor 属性,但是里面的颜色只能为纯色,不能使用 rgb 颜色,或者 rgba 的色号。需求分析但是有时候我们想要实现这种效果,想要让顶部的导航栏透明隐藏,这个时候就需要发动我们的小脑筋想一下要如何实现了。我们可以看一下官网是否有此类方法:Navigation官网说:Navigation是小程序的顶部导航组件,当页面配置 navigat原创 2021-06-08 11:24:14 · 24110 阅读 · 6 评论 -
微信小程序之使用swiper组件实现3D轮播图效果【附demo源码】欢迎点赞收藏
本文主要介绍了微信小程序基于 swiper 组件来实现一个 3D 轮播图效果。本文采用示例分析得形式,对微信小程序基于 swiper 组件的相关属性设置、事件响应以及操作技巧进行分析,可以很容易解决,希望对您的工作学习有所帮助,如果有用欢迎一键三连!一、官方文档:swiper (滑块视图容器):https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html二、效果图:三、代码详解:实现原理:主要利用了 circu原创 2021-06-07 08:57:59 · 4978 阅读 · 0 评论 -
Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
目录前言API`MediaDevices.getUserMedia()`拍照功能实例完整代码实现效果录像功能实例完整代码实现效果总结前言最近在做开源实例: Vue.js 实战系列之实现视频类WebApp的项目(仿抖音App)【感兴趣的小伙伴可以看一下】,其中就有一个功能是视频的拍摄发布(摄像头调用,视频录制等功能),所以特意整理一个Vue如何使用该API调用本地摄像头实现录像拍照功能。本文主要包括前端调用本地摄像头实现拍照、录像的使用实例、应用技巧、基本知识点总结和一些需要注意的事项,在项目开发中具有原创 2021-05-31 17:06:53 · 25756 阅读 · 43 评论 -
Vue 之 父子组件通信与事件触发(最全实用总结)
之前写过一篇关于基于 微信小程序的父子组件传值通信与事件触发,今天整理一片关于 Vue 的父子组件的相关内容。一、组件子组件<template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</button> <div>子组件接收父组件.原创 2021-05-25 15:34:04 · 2686 阅读 · 38 评论 -
微信小程序页面路由跳转总结(wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch、wx.navigateBack 的区别)
一、页面路由微信官方文档 · 页面路由在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。二、路由方式wx.navigateTo用于保留当前页面、跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo 进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。注意:小程序中页面栈最多十层。使用方式:下面进行一个简单原创 2021-05-17 15:41:22 · 3917 阅读 · 2 评论 -
微信小程序之实现封装一个富文本编辑器 Editor 的完整流程【附demo源码】欢迎点赞收藏
本文将主要讲解一下如果通过微信小程序来实现封装一个富文本编辑器 Editor。一、官方文档:editor(富文本编辑器,可以对图片、文字进行编辑):https://developers.weixin.qq.com/miniprogram/dev/component/editor.htmlrich-text(富文本):https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html二、效果图:三、代码详解:1. 编原创 2021-04-08 17:56:33 · 4036 阅读 · 5 评论 -
前端常见登录实现方案 + 单点登录方案
登录是每个网站中都会用到的一个必备功能,但是如何实现一个优秀的登录功能,如何根据自己的项目来选择一个适合自己的登录方案?今天我们就来介绍几种常用的登录方案。Cookie + Session 登录Token 登录SSO 单点登录OAuth 第三方登录一、Cookie + Session 登录HTTP 是一种无状态的协议,客户端每次发送请求时,首先要和服务器端建立一个连接,在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源,但同时也存在一个问题:每次请求都是独立的,服务器端无法原创 2021-02-25 16:04:27 · 8145 阅读 · 1 评论 -
BFC(Block Formatting Context)块级格式化上下文之深层解读
BFC(Block Formatting Context)块级格式化上下文注意:BFC首先是块,其次需要具备下面的条件之一才可以(通俗来说,BFC就好比一所985或者211的高校,想要成为985或者211的高校,它是有前提条件的,首先他得是一所大学,不能拿一个小学来说,就好比BFC得先是块,才是BFC;当满足了前提条件,再需要具备其他的条件才可以。)在正式说BFC具体内容之前,先说一下Box...原创 2020-02-23 18:55:21 · 752 阅读 · 0 评论 -
HTML中关于使用 innerHTML 动态创建DOM节点时,相关事件(如onclick等)失效的解决方案
最近在进行项目模块的迭代开发工作,偶尔会碰到几个值得记录的问题,这里就给大家整理分享一下,以及相应的解决方案。原创 2021-01-28 15:42:43 · 2552 阅读 · 0 评论 -
微信小程序之实现一键退出(挂起)小程序以及如何去除 view/navigator 点击后默认阴影效果
写在最前在开发项目过程中,碰到这么一个需求:当用户点击取消或者拒绝时,系统直接关闭小程序,返回微信客户端。实现的功能与小程序中右上角的圆圈功能类似。功能实现其实功能实现起来很简单,只不过我们之前一直没有注意到,navigator 中有一个跳转方式 open-type 属性,里面的属性值有一个是 exit 即 退出小程序。 微信小程序 · navigator<navigator open-type="exit" target="miniProgram"> <button原创 2021-01-27 16:24:12 · 2312 阅读 · 5 评论 -
基于Vue实现一个轻量级富文本编辑器 Vue-Quill-Editor 插件
Vue-Quill-Editor 是一个基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。该插件只兼容 IE10 以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。一、实现效果:二、使用方法:1. 下载 Vue-Quill-Editornpm install vue-quill-editor --save2. 下载 Quill(Vue-Quill-Editor 需要依赖)npm install quill --save也可以使用 CDN 的方式引原创 2021-01-19 15:21:19 · 2464 阅读 · 1 评论 -
微信小程序之扫普通链接二维码打开小程序实现动态传递参数及踩坑总结
目录前言一、官方文档二、开启普通链接二维码打开小程序功能三、配置流程四、配置实例五、踩坑记录1. 扫码打开小程序出现 "页面不存在"2. 测试版本需要注意的几个点六、总结前言在现有需求的驱动下, 需要手动生成普通二维码并且携带动态参数来跳转打开小程序实现后续功能,本文章主要用于记录如何配置普通链接二维码打开小程序和配置过程中踩过的坑。一、官方文档扫码打开小程序接入指南二、开启普通链接二维码打开小程序功能登录 微信小程序公众平台,左边菜单列表里面找到 开发 选项,点击下面的 开发管理 ,右原创 2021-01-14 15:53:59 · 5277 阅读 · 5 评论 -
前端常见浏览器跨域请求解决方案
参考文章:https://segmentfault.com/a/1190000011145364参考文章:https://www.cnblogs.com/PheonixHkbxoic/p/5760838.html在浏览器请求中,出现跨域访问资源的问题,我们肯定会遇到。如果跨域请求被阻止,有可能导致css、js 、ajax请求、font字体等资源出现无法正常访问的问题。跨域跨域是指一个域下的文档或者脚本试图去请求另一个域下的资源。广义的跨域资源跳转:a链接跳转、重定向、表单提交;资源嵌.原创 2020-09-03 21:54:46 · 1103 阅读 · 0 评论 -
【亲自实践总结】微信小程序局域网通信之UDP通信demo(协议分析 + 客户端小程序代码)
文章目录一、WebSocket 概述二、UDP 协议简述三、基于udp通信的客户端代码(微信小程序)四、基于udp通信的服务器端代码(node.js)一、WebSocket 概述这个内容在上一篇文章中已经详细的介绍过了,如果你没有看过,欢迎移步【亲自实践总结】微信小程序WebSocket通信之TCP通信demo二、UDP 协议简述想看关于TCP的内容,请移步至 xxx在这里就开始正式写关于 tcp 通信的 WebSocket 的 demo 了。虽然网上有很多关于 tcp 通信的相关内容,原创 2020-11-03 15:55:28 · 4635 阅读 · 2 评论 -
微信小程序之父子组件传值通信与事件触发(最全实用总结)
我们这里说的都是微信小程序的自定义组件的相关内容哦。组件创建组件在对应目录下创建 Components 文件夹,用来存放我们的自定义组件。在刚刚创建的 Components 文件夹中右键 “新建 Component”,创建一组组件。组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成,在里面编写对应的内容即可。使用组件使用已注册的自定义组件前,需要在对应的页面或者组件的 json 下引入该组件{ "usingComponents": { .原创 2020-12-23 16:30:42 · 8683 阅读 · 0 评论 -
常用小工具在线网站分享
今天给大家分享几个我们在工作生活中经常用到的在线的小工具。一、流程图绘制软件 ProcessOn这是一个免费在线作图、实时协作的聚合平台。支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等,不需担心下载和更新的问题,不管Mac还是Windows,一个浏览器就可以随时随地的发挥创意,规划工作。也可以将作品分享给团队成员或好友,无论何时何地大家都可以对作品进行编辑、阅读和评论。传送门:ProcessOn使用教程:ProcessOn 使用手册二、文件格式转换器 Convertio该软.原创 2020-12-16 17:05:06 · 984 阅读 · 0 评论 -
Git教程学习笔记和填坑总结 以及 SourceTree 工具的使用
写这篇学习教程的原因是因为之前一直对原创 2020-12-16 10:26:29 · 732 阅读 · 1 评论 -
微信小程序优化之函数节流与函数防抖(代码封装)
小程序开发完成,闲来无事想要优化一下,就要用到这个函数节流和函数防抖了。这两个内容也算是老生常谈的问题了,他们都能优化js的性能,减少函数触发,减少页面请求。原创 2020-12-16 10:08:25 · 736 阅读 · 0 评论 -
区块链之概述和七大应用场景分析
最近在研究防伪溯源的方案设计,那么关于区块链的应用就显得尤为重要。截止目前而言,区块链仍为一个比较新兴热门的话题,但是它的相关应用与技术都是已经比较成熟的,可以将区块链理解为一门交叉学科,它结合了P2P网络技术、非对称加密技术、宏观经济学、经济学博弈等等知识,构建的一个新领域。一、区块链概述区块链特性:可追溯不可篡改去中心化开放性我简单的将区块链总结为这几个特性,当然区块链的特性还有很多,大家感兴趣的话可以单独去了解一下。区块链概念定义:其实,区块链本质上就是一个去中心化的分布式.原创 2020-12-15 14:01:18 · 5610 阅读 · 0 评论