竹石七-CSDN博客

原创前端JS在循环语句中调用API并保证循环语句外同函数作用域的代码同步执行

在开发中，可能难免会遇到需要将某个数组遍历获取指定字段的值，然后用此值作为参数来调用API的场景。那么，JS如何在循环语句中调用API并且保证同函数作用域中的其他代码同步执行，并且能使用循环语句中多次调用API请求到的全部数据？

2023-06-02 13:57:45 1717

原创 Microsoft Message Queue（MSMQ：微软消息队列）简介

最近在安装公司的一个产品时，接触到了MSMQ，在此对MSMQ做一个简单的介绍，以便各位能对它有一个快速、直观的认识。本文针对于Microsoft Message Queue，以下提到的消息队列均指代Microsoft Message Queue。

2022-10-14 15:03:49 3373 1

原创 React+Antd项目，Form的Input中已经有内容，但是还是提示此项为必填项，不能为空

我们在进行数据采集功能开发的时候，往往会用到Form表单，这其中必不可少的就会用到Input（多种type类型）输入框。经常还会对其中的某一些Input输入做一些必填或者某些输入格式的限制，设置默认值和placehoder等等需求场景。我在使用React + Antd构建含有多个Input组件的Form表格时，遇到了下述问题…...

2022-08-26 14:09:40 4956

原创 react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新

最近因为项目要求，开始学习并且使用React和Ant Design框架。在前端开发过程中，遇到这样一个页面：有多个tab，每个tab下都是一个table表格来进行数据展示。但，每个table的title都是一样的，如何进行表格的渲染和对应数据的展示就值得开发人员考虑。下面，我们一起来瞧瞧。...

2022-08-12 17:47:15 5902

原创设置单击右键可以选择用VS Code打开文件

在新电脑安装VS Code之后，发现对一个文件（夹）单击鼠标右键的菜单栏中，没有用VS Code打开的快捷方式。每次都要用拖拽文件（夹），或者用VS Code界面的菜单栏选择打开文件（夹），这样很麻烦。那么，现在和我一起，以一种十分简单的方式解决这个问题吧。......

2022-06-29 10:06:41 8258 14

一、前言今天有个做开发的朋友和我聊了一下Cookie和Session，又勾起了我的分享和写作欲…今儿就来白话一下Cookie和Session。二、Cookie和Session的对比因为HTTP协议是一种无状态协议，即客户端和服务端谁也不认识谁。所以，有必要让两者之间有一定的“媒介”，为其二者的联系“搭桥”。2.1、Cookie原理：客户端访问服务器的时候，服务器生成一份cookie给客户端，客户端会把cookie保存起来，以后每次客户端访问服务器，都会自带这这份cookie（比如，cookie中存

2022-04-19 15:05:01 250

原创 Vue生命周期详解

一、前言在使用Vue进行实际开发中，经常在created，mounted等生命周期钩子函数内进行数据，逻辑的处理，但基本都是看别人在哪个生命周期内请求数据，在哪个生命周期内操作DOM，自己也照搬如此使用，是“知其然而不知其所以然的”状态。今儿趁着手头工作忙完这段时间，特别研究了一下生命周期，记录一下自己的学习笔记。二、生命周期2.1、生命周期的四个阶段和8个生命周期钩子函数详解2.1.1、阶段一包含的生命周期钩子函数：beforeCreate、created；beforeCreate、crea

2022-04-15 18:01:49 1234

原创页面内锚点定位及其跳转

一、前言二、各种类锚点定位及其跳转方法优劣势分析三、说明参考链接：页面内锚点定位及跳转方法总结MDN Web Docs欢迎大家一起讨论、学习

2022-04-12 16:06:59 5861 2

原创 vue组件mounted中window.onresize无效

一、问题描述在开发中发现，有两个vue组件中mounted中都用了window.onresize，但是在其中一个组件中正常，在另一个组件中无效。二、问题分析我注意到组件A是组件B的父组件，组件A（父组件）中window.onresize功能正常，组件B（子组件）中window.onresize功能无效。初步猜测是由于父子组件中同时使用，导致子组件中的失效。三、问题解决我尝试把子组件中的window.onresize = () => { console.log(27)}写成：wi

2022-03-09 13:42:47 2161

原创 Element UI的组件el-input添加回车键监听事件

纵观Element UIde input输入框组件（el-input组件），都没有发现可以给输入框添加的回车键监听事件，因为Element UI对其做了进一步封装，对比原生HTML的input标签的监听键盘（回车键）事件： // 回车提交表单document.onkeydown = function (e) { // 兼容FF和IE和Opera var theEvent = window.event || e; var code = theEvent.keyCode || theEve

2021-12-13 16:08:56 14794

原创解决git clone时fatal: unable to access ‘https://gitee.com/XXX.git/‘: The requested returned error: 403

一、前言我的电脑一直录入的是我的gitee账号，平常和同事协作开发，git pull、git clone等git操作都没有报错过。但是，今天要git clone另一个gitee账号的项目代码，出现报错403（如图1），我们一起来看看原因和解决办法。二、原因分析及其解决办法2-1、error：403常见原因我在网上搜索了error：403的原因，最常见的是无权访问。2-2、问题分析和解决既然最常见的原因就是没有权限的问题，我的思路就是先从这个点着手。我立即在网上进行了问题搜索，得到了一些答案（但

2021-11-22 13:31:26 90395 13

原创 rem结合媒体查询适配的vue项目（PC端和移动端共用一套代码）

一、前言上周四接到了一个简单的纯前端网页的项目，我用了三天时间已经开发并且部署完毕（为了实现快速简易部署，使用了gitee pages进行部署，这篇文章记录我使用gitee pages部署的详细过程）。这个展示页要求在PC端和移动端双场景使用，但是由于页面简单，为了简单起见，我采用rem结合媒体查询适配开发一套代码来实现这个场景要求。二、实现结合媒体查询的rem适配2-1、rem布局2-1-1、什么是remrem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区

2021-11-16 13:33:23 5519

原创使用gitee pages部署vue-cli4.X搭建的纯前端vue项目

一、前言最近做了一个纯前端的静态展示页面，为了方便起见，直接将它部署到了gitee pages上，期间也遇到了一些问题，比如部署后没有页面，控制台报错的404找不到资源的问题，但最后还是成功部署了项目。二、实现gitee pages部署2-1、gitee pages部署准备工作2-1-1、首先，你需要将gitee pages这个功能开通，开通这个需要身份证等一些个人材料...

2021-11-11 14:09:56 1409 3

原创 vue-cli4.X快速搭建项目

一、前言最近，接到一个新项目，又换了新电脑，安装vue-cli快速搭建项目时，没指定版本，直接安装到了4.5.14版本，记录一下从安装脚手架到项目搭建的全过程。二、安装vue-cli2-1、指定版本安装2-2、不指定版本安装（直接安装最新版本）三、使用命令行搭建项目3-1、3-2、3-3、四、使用图形化工具搭建项目五、说明...

2021-11-05 15:09:09 659

原创 Electron给自己的应用设置中文名

一、前言electron是一个很神奇的东西，它在开发中有一些“迷”一样的设置。对，今天我们要来看其中一个开发谜题——给自己的Electron应用设置中文名。二、实现中文名设置首先要说的是设置中文名无论你的打包工具用的是electron-builder还是electron-packager（这两种是比较常用的打包工具），都是在package.json这个文件中来完成设置的。所以，今天的解决的方案只是针对于使用这两种打包工具的应用而言。2.1、无效配置直接设置name：可以看到已经有警告黄色波浪线了。

2021-07-08 15:17:33 7531 1

原创 Vue多页面应用开发

一、前言我们平常对Vue的印象有这样一种感觉：Vue就像专门为单页面应用（SPA）而生，因为Vue的官方文档中也有这样的描述：实则非也，因为vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合到一块后形成一个html文件一堆 js文件, 如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件.vue的开发有两种，一种是直接的在script标签里引入vue.js文件即可，这样子引入的话个人感觉做小型的多页面会比较舒坦，一旦做大型一

2021-06-30 16:41:24 2558

原创剖析单页面应用和多页面应用

一、前言我们在开发的时候，越来越注重用户体验。对于用户，页面的切换加载快，是一个很好的体验。对于这点，单页面应用模式SPA的优势就很明显。但是有些时候我们需要运用多页面应用模式MPA，这篇文章就来聊聊SPA和MPA。二、单页面应用和多页面应用2.1单页面应用（Sing Page Application——SPA）由一个外壳web页面和多个页面片段组成，页面跳转刷新部分资源，一些公共资源（js、css）仅需要加载一次。页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段

2021-03-17 17:38:09 509 2

原创 JS的浅拷贝和深拷贝的剖析以及部分实现方法

一、前言JS的数据类型分为：基本数据类型和复杂数据类型。这两种不同的数据类型的数据的存放方式是有区别的，所以在拷贝赋值的时候就产生了深拷贝和浅拷贝的问题。二、数据类型和存放位置2.1、基本数据类型及其存放位置JS的基本数据类型一般有5种：number（数字）、string（字符串）、boolean（布尔类型）、null(null型)、undefined（underfind型）。存放位置：存储在栈里面，取用赋值的时候是值传递。2.2、复杂数据类型及其存放位置JS的复杂数据类型指引用数据类型，就是

2021-03-15 09:41:09 258

原创用VMware安装Windows 8.x虚拟机镜像系统详细流程

一、前言虚拟机（Virtual Machine）指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整的计算机系统。所以，你可以将它理解为基于你的一台电脑“生出”好几台一样（操作系统）或者相异（不同的操作系统）的电脑，并且这些“被生出来的”电脑都可以像使用普通电脑一样使用。这篇文章来介绍如何“生出”一个Windows 8.x系统的电脑。二、所需“材料”1、虚拟机VMware2、Windows 8.1系统镜像iso文件这个win 8.1的镜像文件已亲测完全OK，可以跟着下面即将详细

2021-01-15 09:42:58 6516 4

原创 Electron-Vue程序启动控制台报错：Uncaught ReferenceError: require is not defined at (index):1

一、前言我在使用electron制作exe安装包的项目中用到了nodejs的一个usb模块，遇到了一些问题。二、问题描述npm install安装（我的这个版本是：“usb”: “^1.6.3”,）之后，启动项目之后发现页面空白，我打开控制台发现了这样的报错：三、问题分析和解决1、分析这里需要知道electron本质是什么，来看一张图片：Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。Node.js ：让Electr

2020-12-23 17:40:39 6734 7

原创 package.json中的dependencies（生产依赖）和devDependencies（开发依赖）

一、前言项目开发过程中，难免会遇到需要npm install XXX的时候，这就又涉及安装的这个依赖模块是放到package.json中的dependencies或者是devDependencies中的问题，来区别一下吧。二、安装依赖1、npm install和npm uninstall下面以安装axios为例：在你才开始接触开发的时候，或许你也为npm install axios/npm uninstall axios、npm install axios -save/npm uninstall

2020-10-30 09:28:51 10076

原创 Electron设置窗口图标、设置桌面快捷方式图标

一、前言在开发一款桌面应用时，设置窗口图标和桌面快捷方式图标是两个必须的需求。下面来看看我基于Electron开发的实际项目中是如何配置最终实现了这个需求吧。二、实现设置窗口图标和桌面快捷方式图标1、准备好你的Icon图标要得到一个icon图标十分简单，你需要有一张目标图标的png格式图片，然后找一个可以免费在线转换icon图标的网站转换下载即可，这里我提供一个我用过的很不错的在线转换工具：在线转换icon图标工具。这里需要说明一下，有的童鞋可能在纠结转换成多大的图标才可以呢？我的快捷方式图标

2020-10-26 17:40:12 27277 14

原创基于nodejs的vue-electron架构项目中使用log4js将日志输入到文件

一、前言在项目开发中常需要打印一些log，常规的console.log()只是将信息反映在了浏览器的控制台中，是“一次性”的信息。为了查看历史日志，就需要做日志记录留存。实际项目是基于nodejs的vue项目，使用的日志记录工具是4.1.0版本的log4js。具体需求是为了记录常规日志，剥离错误日志，在有某些功能运行出错时快速通过记录的日志信息定位问题。二、实现log4js记录日志（以日期划分日志文件的方式）1、安装log4js// 注意：如果只执行npm install XXX,没有指定安装到那

2020-10-20 14:38:32 4197 13

原创 git pull提示有冲突时拉取代码（有＜＜＜＜＜＜＜ Updated upstream和=======和＞＞＞＞＞＞＞ Stashed changes冲突标记符的代码）

一、前言多人协作开发时经常会在git pull XXX时控制台提示：error: Your local changes to the following files would be overwritten by merge:Please commit your changes or stash them before you merge.的拉取报错。很明确，这是在告诉你，你当前修改的代码和要拉去分支的带有代码冲突，git并不知道该怎么处理这些冲突，所以给你报告出来了。那么，怎么解决这个问题？二

2020-09-03 11:23:17 13882

原创 Electron-Vue项目使用Element的el-table组件不显示

一、前言最近我把项目进行了整体重构，将原先的vue和electron分为两个工程文件夹的形式融合为了一个electron-vue工程文件，因为有很大的改动，特别是环境和相关配置方面与原先的工程有很大的不同，随之而来就有很多坑，这篇文章要将的就是今天碰到的element-UI一个组件重构前显示OK但重构之后显示不OK的问题，详情请继续阅读。二、问题描述在vue组件中，使用了Element的el-table组件，当重构了之后发现这个组件在相应页面不显示（高度为零），数据什么正常，语法OK，各种路径也OK，

2020-07-06 18:08:54 1185

原创切换页面保持element ui的select选择器组件的下拉框选中的数据项高亮

一、前言实际项目（vue+element）场景是这样的：国际化的功能切换语言选用了element的select选择器组件，下拉框中是多语种的语言标志词。我想要在页面来回跳转后，打开下拉框，当前的语种标志词仍是高亮显示的，这样，在语种多的情况选择时有一个提示，会提升用户体验。二、问题描述假定你当前选择器默认选中“双皮奶”选项（代码见2、select组件源码），然后你通过点选，改变了选项为“黄金糕”后跳转页面，如果不改变这个value的话，再回到这个select组件页面，打开下拉框，你会发现高亮值又回到了

2020-06-29 17:00:29 2541

原创切换Git(Gitee)账号

一、前言最近我们工作组来了一位新同事，使用的是之前一位同事的电脑。新同事第一次git push自己的新代码分支时遇见了这样一个问题：本次提交显示为已经离职的那位同事的git账户提交的。为了解决这个问题，下面就来介绍如何实现Git（Gitee）账户的切换。二、实现切换1、查看现在的账户是谁git config user.name2、查看现在的用户邮箱git config user.email上面两步只是为了查看一下当前电脑的Git(Gitee)的“户主”是谁，其实可查可不查。3、实现切换G

2020-05-27 17:34:52 7304 2

原创 v-for循环生成的元素有识别的精准控制

一、前言在实际的项目中，常常会使用for…in循环动态生成一堆样式和功能相同的元素。现在有这么一个场景：页面内v-for循环生成了“好几行”有相似内容的box，每行的box都有一个下拉按钮，操作的时候需要区分操作的是哪个盒子，即点击哪个盒子，这个盒子便会展示更多内容（变化高度）。一起来实现以下吧：二、demo展示1、未点击展开的状态2、点击展开按钮展开下面的蓝框三、代码实现1、html代码部分注意！我是通过操作改变el-container容器的高度，所以要在这个标签的内部加上 :styl

2020-05-27 15:17:47 592

原创解决（html标签）span、div标签模拟按钮点击时标签内部文本会被选中（类似于鼠标长按选择的情况）

一、前言出于需要，我没有直接用button标签和element的el-button标签，我用span模拟了一个标签，并且给与了一个点击事件，但是较快的点击这个模拟按钮，会出现自动选中其中的文本的现象，类似于鼠标长按选择文本的那种情况。造成了不好的体验，我提供一种解决方案。二、demo展示（直接上图）未处理之前(点击速度稍微较快就会选中）处理之后（正常了）哈哈，其实这里应该使用Gif的，但是，领会精神就好，嘻嘻。三、解决方案出现选中情况时候的代码（未解决之前）<span class=

2020-05-18 18:12:15 2695

原创 vue（+Element）项目用vue-i18n实现国际化

一、前言vue+element开发的项目实现国际化还是比较简单的，特别是对于前后端完全分离的项目。基于Node构建的Vue项目是有成熟的方案：vue + vue-i18n。但是其中还是有只得留意的点，特别是对于第一次实现国际化的童鞋。二、demo效果展示1、在首页选择语种实现语种切换2、内容页的中文效果3、内容页的英文效果三、前端实现国际化1、安装vue-i18n我的项目是基于vue开发的，首先需要安装vue-i18n，推荐使用cnpm（npm也可以，不过可能会比较慢）安装。输入命令：

2020-05-15 11:26:38 643 2

原创移动端（H5）的点击事件、滑动事件和长按事件

问题描述接上篇文章的项目。项目中有一部分是单选题答题环节，每道题的选项有文字、图片或者图文结合的形式呈现，所以导致每道题的长度不一样，需要做触屏的点击、滑动和长按判断。没做判断之前滑动和点击事件是不能区分开的，每次想滑动时都会触发点击，从而引发非意愿选择。问题分析我们熟知的点击事件click会有300毫秒的延迟（有相关插件可以解决这个问题，有兴趣的小伙伴可以自己上网康康）。还有一种就是touch事件，touch事件包含了touchstart（手指触摸到屏幕时触发）、touchmove（手指在屏幕上移动

2020-05-11 17:28:57 10964

BigFamer的博客