治愈系的江予夺-CSDN博客

原创 React+AntDesign:关于table的rowSelection在多选批量删除后仍为选中状态

本来是准备删除完了以后表格默认不选中的，但是发现选中状态并没有清掉，还是保留着下面的展示效果，觉得头疼，后面仔细查看了官方文档API后，通过尝试找到了解决办法。2. 这块主要是用到一个selectedRowKeys属性，通过设置这个属性就可以实现在执行删除命令成功后数据就不会默认被选中原来的id位置了，附上代码如下：// table表格部分的代码 <Table rowKey="id" locale={{ emptyText: <Empty /> }} r.

2021-04-22 17:29:50 4026 2

原创 React+AntDesign实现Form表单的动态增加删除操作

效果示例1. 原来效果2. 点击+之后实现说明此次开发需要用到动态生成多行表单，因为新老数据要兼顾，老数据是对象存储走的一个接口，新数据走的多行配置，对象数组存储，走的另一个接口，所以在展示上就需要区分下。注意这里默认了第一行不能删除，当然你也可以在变成多行的时候，给每一行都加上删除，但是为了避免数据被删成一行都不剩了，你需要处理下，要么在删成一行的时候禁止删除或者隐掉删除按钮，要么就在删除后要调接口的时候判断处理下，具体的得看需求来开发。因为这块的按钮有设置，如果配置的参数含有passwo

2021-04-20 16:12:38 3747

原创 windows使用cmd查看指定端口号所占用的进程并杀死占用指定端口号的进程

1. 按住键盘 win 跟 R，弹出运行框，搜索 CMD ，执行命令2. netstat -ano 查看本地所有进程3. netstat -aon|findstr "端口号" 查看指定端口号所占用的进程4. 根据pid杀死进程

2021-03-18 11:22:33 1575

原创 SwitchHosts以管理员身份运行执行失败

1. 需要配置的hosts代理太多，借助SwitchHosts工具来管理，但是意外发现文件使用管理员权限运行的时候却控制不了，会弹出提示框如下：2. 使用快捷键 Win + R 快速输入以下这串 C:\WINDOWS\system32\drivers\etc. 进入电脑的hosts文件下，以记事本方式打开，将你修改的内容粘贴进去，你会紧跟弹出再下面的图片所示内容，提醒你手动更改也不行。3. 这个时候你应该就明白了，SwitchHosts控制不了也是有原因的，你打开hosts文件右击属性，可以看到

2021-03-09 10:27:34 1466 1

原创七个CSS相关的小技巧归纳

一、writing-mode 属性控制垂直排版一个CSS属性，常用于控制文本垂直排版，通常用于古诗古文。类似于float属性的用法，但是其语法学习要比其他的css属性高，因为前期的兼容问题到后期解决，慢慢的他便有了两套语法。一个是IE私有属性，一个是CSS3规范属性。css3语法/* 关键字值 */writing-mode: horizontal-tb; /* 默认值 */writing-mode: vertical-rl;writing-mode: vertical-lr;

2021-03-08 10:08:23 485

原创 Chrome谷歌浏览器http链接跳转成https的问题

因为这次开发需要用到的环境是需要http进行的请求，所以必须使用http而不能使用https进行请求。但是实际操作的时候，发现在GoogleChrome浏览器打开页面的http请求后面总是变成https，一开始以为是服务器自己开了重定向，看了下服务器的Nginx配置并没有配置负载定向。后面无意切换成IE浏览器的时候发现原本的http请求直接发出去了，后续查找资料了解具体原因发现这个竟然是谷歌浏览器默认开启了http转https请求，貌似现在新版的firefox火狐浏览器也这样了。那出现这样的情况肯定也是

2021-02-24 14:48:00 3985 1

原创 Linux：编写一个项目的自动化部署脚本

因为需要执行系列命令，需要手动操作执行，有时候会漏掉步骤，导致打包出错，这个时候执行一个简单的自动化部署脚本就很方便，类似于npm发包那种。1.在项目中创建一个文件夹再在里面创建一个以 .sh 后缀结尾文件，或者直接建一个以 .sh 后缀结尾文件，尝试在里面输入你的脚本命令。说明：（1）这个是一个shell脚本，脚本内输入的都是Linux命令（2）不同项目打包执行跟安装依赖包的执行命令方式会有所不同，记得区分。（3）以下以自己一个实际开发的项目为例，这个项目是react开发项目但是需要借助node

2021-01-20 14:55:17 2291

原创 scp文件到服务器出现Text file busy问题及解决办法

因为是需要事先在本地打包再使用scp复制本地打包好的代码到服务器上时，出现了Text file busy的错误。如下所示：经过排查发现，这是因为此操作是相当于去直接覆盖原来的代码，而原来的代码此时还处于运行状态，因此才会发生上述错误。1、连接登录远程服务器上ssh root@你的服务器IP地址2、先查看命令进程（这个是nodejs项目，使用的是pm2进程管理工具）pm2 ls3、停止进程pm2 stop 你的要关掉的进程4、重新推包scp 推的包的相对路径 root@你的服务器IP地

2021-01-12 14:54:44 6147

原创 React:使用AntDesign中的Upload组件实现文件上传功能

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。实现效果实现说明1、fileList 用于上传的文件列表（这个是受控的）。2、multiple 这个属性是用于是否支持多选文件，开启后按住 ctrl 可选择多个文件，ie10+ 支持。3、onChange 通过此方法可以用于上传文件改变时的状态。4、onRemove 用于点击移除文件时的回调，返回值为 false 时不移除。5、customRequest 通过覆盖默认的上传行为，可以自定义

2021-01-06 14:45:44 6773 2

原创 HTTP413：Request Entity Too Large

在上传文件时提示413 Request Entity Too Large错误，这里根据字面意思表示“请求实体过大”。查看http状态码可知是因为发起请求的实体过大，超出服务器的处理能力，导致服务器无法处理请求时就会返回此错误代码，可以通过修改服务器配置文件解决。因为用的是Nginx服务器，以下以Nginx服务器为例(注: 命令用的Linux命令)：1. ssh root@你的服务器IP输入命令后会提示一行需要输入密码2. cd /进入home文件目录ls 查看当前文件夹下文件，找到你的ngin

2020-12-31 17:06:31 1196

原创 React+AntDesign：disabledDate属性控制DatePicker的禁用日期选择范围

展示效果1.默认展示如下：2.选择计划开始时间后3.控制结束时间选择范围在开始时间之前不可选。实现说明1.这块的交互UI是使用的antd3.x版本的组件库。2.首先要做到这个是通过表单+时间控件组件组合使用，将基本页面布局出来，然后通过表单的方法获取到上一个时间控件所选的时间，然后进行禁用操作。<Form layout='inline'>//Row与Col是用来进行表单布局的，具体怎么操作可根据实际情况进行修改。 <Row className="edit-head

2020-12-23 09:54:08 1626

原创 React:实现一个增删改查基本管理页面

记录一下最近根据自己写代码的习惯进行了一个改进后的写法调整，主要是为了增强可阅读性与美观性的，实现了增删改查等基础功能，用的react+typescript开发。import { inject,observer } from 'mobx-react';import * as React from 'react';import { Table, Input, Button,Modal, Form, Select,message } from 'antd';import { FormInstance }

2020-12-09 14:14:29 3909

原创 Vue搭载项目初始环境

1.构建开发环境，输入版本号，确定已有开发环境2. 输入命令安装vue-cli，并查看Vue版本号确定OK了。npm install -g @vue/cli如果你需要下载指定版本npm install -g @vue/cli@指定版本号安装完成，检查vue版本3.确定好你需要的创建方式...

2020-12-03 16:44:56 220

原创 git取消或撤销本地的commit代码

本地代码已经commit，但未提交到远程仓库，远程仓库分支代码已经被另外覆盖或者已经不需要本地已经commit的代码，需要取消commit的代码避免后续开发或者出现问题。1.将已经commit的代码取消在暂缓存区。git reset --soft HEAD^2.将代码进行取消修改git reset --hard HEAD^3.查看缓存区还是否存在commit部分git status4.如果已经不存在了，就可以直接获取远程新的代码或者保留旧代码git pull...

2020-11-30 18:09:04 2631

原创 React实现下载导出Excel表格功能

功能说明点击下载按钮实现下载功能。实现说明1.如果请求后需要拿到的数据已经是正常的数据流，那么可以直接处理数据。2.处理数据流的方法3.如果拿到的是已经处理过的json数据，并不是我们所需要的直接数据流，那么就需要进行一些处理去帮助我们找到需要特殊处理到的数据流。设置一个“标志”，类似于定位符，找出定位做出相应处理。可以自己封装一个请求方式，在请求头部带上特殊“标记位”，然后在做请求的那块做处理。如果是用的已经封装好的请求，不想做额外封装处理，那可以在请求参数里带上，如下图所示。

2020-11-24 14:22:55 2630

原创 git将本地旧分支代码提交到远程仓库新分支

1.提交全部代码到缓存区git add .2.填写提交信息git commit -m '提交信息'3.拉取远程仓库，检查更新情况git pull4.切换到新分支git checkout 新分支5.拉取本地旧分支的代码到本地新分支git merge 需要拉过来提交的旧分支6.新分支代码推送git push...

2020-11-20 11:28:17 1455

原创 React+AntDesign：在Form表单内使用控件的value或defaultValue属性出现invalid Warning非法警告

问题简述在用到AntDesign的Form表单时往往有时候会用到一些选择器，通常有时候选择器本身会有一个默认值，我们往往习惯用value或defaultValue去注入默认值，但是实际上，在Form表单内写这些选择器组件的时候往往就会出现非法警告。出现原因选择器基本上都是写在表单字段组件内，用于数据双向绑定、校验、布局等，因为控件是被Form.Item 包装的，且被设置了 name 属性的，表单控件会自动添加 value，数据同步将被 Form 接管，这会导致不能用value 或 defaultVa

2020-11-09 18:03:09 1544 5

原创 React实现子组件向父组件传值更新状态

在做一个项目开发的时候，需要点击子组件的确定按钮在更新子组件的状态的同时去向父组件更新一个值状态，在我使用ref去进行传值处理的时候，出现了找不到这个方法的bug，后面换了下另外一种方式就能达到我要的效果。以下附上主要核心部分代码截图：...

2020-11-06 16:11:51 1683

原创 React+AntDesign使用Tree树形控件完整展现其中的层级关系，并具有展开收起选择等交互功能。

(一)需求展示效果图1.新增时树形控件展示效果2.编辑时树形控件展示效果(二)实现代码1.使用树形控件，选择自己需要实现的功能的相关调用方法跟值2.触发事件时获取数据及控件展示问题(三)关于树形结构转化说明如果后台传过来的树形数据跟展示不同，就需要前台这边自己进行处理比如这次后台传过来的数据格式：1.可以通过遍历，点扩展运算符获取数据每项做对应数据转化处理。2.也可以使用递归的方法进行一个树或者森林的遍历。下面是同样的树数据，但是有判断筛选处理。...

2020-10-26 14:37:31 3001

原创 GitLab简单配置SSHKey与计算机建立连接

操作前说明公司项目一般都是使用GitLab进行代码托管，所以提交代码前要确保你已经注册好GitLab账号，由于本地Git仓库和GitLab仓库之间的传输是通过SSH加密的，所以这就需要你通过本地ssh密钥跟远程仓库建立连接。SSH密钥使您可以在计算机和GitLab之间建立安全连接。操作如下1. 输入以下命令，检查本地电脑是否已经建立了ssh密钥（不排除公司电脑或者你自己的电脑之前已经注册过密钥）ls -al ~/.ssh注意：如果出现了id_rsa.pub这个文件就可以跳过下面操直接到第几步骤，

2020-10-23 11:45:44 824 3

原创 React新增编辑复用封装模态框数据污染复现问题

问题出现描述在做项目开发的时候，因为新增与编辑功能打开是同一个模态框，考虑到可复用，所以为了代码简洁性，在用的时候就将模态框单独封装成一个组件，在父组件里面调用子组件，但是出现了新增编辑时表单数据会污染复现，即出现新增时表单带数据，编辑时表单不带数据显示问题。问题显示情况1.先点编辑再点新增出现的状况。2.先点新增再点编辑的状况问题解决说明1.给表单设置一个值用来控制新增编辑时数据更新问题。2.父子组件之间传值，定义类型。3.父组件内写方法。注意:1.项目开发使用的re

2020-10-14 10:55:25 704

原创 React非表单内的组件手动清空Input输入框跟RangePicker日期范围

效果展示情况说明在项目开发的时候，因为显示效果需要使用通过重置按钮来清空控制的输入框与时间日期选中的值。因为是属于非表单，所以无法通过表单的属性来操作Input输入框跟RangePicker日期范围选择。所以重置清空值，则需要要求输入的值跟...

2020-10-12 11:49:33 2066 1

原创 JavaScript将数组里面的对象通过map()方法等将格式转换

整个过程使用到的数组方法是map()方法与Object.keys()方法，具体的单个使用可参考文档。Object.keys()方法参考文档map()方法参考文档1.当一组数组里面出现的每组对象都是以key，value的形式直接组成一组值对象，现在需要将他们进行处理一下，然后要给他们添加属性名。操作方法跟代码展示如下图所示：2.当一组数组里面出现的每组对象都需要将他们进行处理或者过滤一下，并且要给他们修改成由新的属性名组成的对象数组。...

2020-09-27 16:07:36 2054

原创 React+AntDesign在Table表格内关于单元格设置缺省处理，hover时显示

需求说明：从后端返回的一组数组，需要显示在表格内容区域一行显示4个，且每个应用之间需要用竖线隔开，前后各2个空格，且若应用权限显示的名称过长，最好可以省略，hover时显示完整的应用名称。具体效果显示图：具体操作说明：1. 从后台返回的是一组数组，要先将数组内容一个个显示，所以要先用到map方法，将数组里面的内容遍历显示。2. 控制溢出隐藏显示通过调整css样式修改控制，而hover隐藏内容显示则是使用它的title属性，通过title将隐藏的内容通过鼠标悬停时可以直接显示看到。3. 具体添加

2020-09-23 14:32:35 1410

原创 React:You cannot set a form field before rendering a field associated with the value

1. 在使用AntDesign的form表单时，在弄编辑新增使用同一个Modal框的时候，点击编辑按钮打开页面时，呈现编辑页面的表单需要渲染这一行record数据，虽说后台渲染的数据还是都渲染出来了，但是此时的页面打开控制台还是会出现警告。警告图如下所示：2. 出现这个原因，还是因为this.props.form.setFieldsValue在用传值的时候，所传的只能是form中使用到的参数，就是getFieldDecorator方法中的filed领域，没有的filed领域一律不允许多传，否则就会出现

2020-09-18 11:04:19 3212

原创 git 将本仓库的分支代码提交到另外一个仓库

因为新项目开发的项目代码是建立在另外一个项目的代码框架上进行样式与逻辑功能修改，所以为了省事，想着把旧仓库的temp分支代码直接提交到新仓库master分支底下进行项目开发。所以需要在git上进行一些操作，将本仓库的分支代码提交到另外一个仓库。1. 首先你要 cd 进入旧仓库底下，git pull 一下，确保你的仓库代码已经是在最新状态下了。2. 输入下面命令行，远程仓库重命名。git remote rename origin old-origin3. 执行下面命令行，远程仓库添加新clone地址

2020-09-15 16:17:00 5630

原创安装使用commitizen规范标准化Git提交信息

Commitizen是一个格式化commit message的工具。使用它可以用于git的规范化commit message。但是它的安装需要NPM的支持，而NPM是Node.js的包管理工具，所以首先安装node.js，下载对应系统的包，安装即可。如果没有安装node.js跟npm，那么请按顺序执行，如果都安装了，那么可以跳过前面两个步骤直接操作下载commitizen。...

2020-09-15 14:11:18 1076

原创 git将远程仓库代码进行回滚/回退

起因：提交代码到远程仓库分支下的时候忘了切分支提交，提交代码提错了，导致代码被覆盖掉了，为了回退到上一次提交，需要回滚代码。执行下面命令，查看代码提交日志。$ git log找到回退那步操作的commit信息然后复制下来，执行下一步操作。$ git reset --hard commit后面那条信息当命令执行后出现箭头指向那块以横线开头的，就可以了。最后执行下面这条命令，就可以实现代码回滚了。$ git push -f origin xxx(这的xxx指的是回滚的分支)最后

2020-09-02 14:27:07 1512

原创 fatal: ‘origin/xxx‘ is not a commit and a branch ‘xxx‘ cannot be created from it

git远程仓库拉取dev分支，但是操作失败，提示操作出错。fatal: 'origin/dev' is not a commit and a branch 'dev' cannot be created from it1. 首先要确定你在远程仓库是否创建成功dev分支$ git branch -r 输入这个命令后查看远程所有的分支，检查你所需要下拉的分支是否已经在远程仓库底下。2. 如果分支已经创立好了，而执行还是同样的错误，那么就需要从git上重新拉取数据然后再创建远程分支到本地。

2020-09-01 16:50:58 4525

原创 error: Cannot delete branch ‘xxx‘ checked out at ‘xxx‘

出现这个的原因，是因为你正好处于你要删除的那个分支底下，你执行删除此分支，这个操作是不可以的。解决办法：直接退出当前要删除的分支，然后再删除这个分支就可以了1.切换到上一个分支/切换到指定分支$ git checkout - / $ git checkout [分支名字]2.删除分支$ git branch -d [分支名字]...

2020-09-01 10:01:17 3484

原创 Vue+ElementUI+VueRouter实现左边导航栏切换页面内容组件显示

显示效果如下：效果说明：实现左边导航栏这一效果就得借用到ElementUI组件中关于导航菜单的使用，NavMenu 导航菜单，这个是为网站提供导航功能的菜单样式。而点击导航栏能够实现内容页面的切换主要是依赖于VueRouter功能。左边点击导航栏进行导航时，路由切换到对应的页面，这里需要使用 <router-link><router-link>组件可以支持在具有路由功能的应用中 (点击) 导航，通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，

2020-08-28 09:07:57 8032

原创 Vue+ElmentUI在table表格中表头位置插入Dropdown下拉菜单实现过滤效果

效果说明：在el-table的表头插入一个下拉菜单Dropdown鼠标悬停下拉框浮现，点击下拉框选项就可以进行页面信息过滤。预览效果图：功能代码实现+说明：1. 首先需要在表格里的表头位置加入下拉框，需要通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。所以就有slot="header"这个具名插槽引入。这段可参看图片中的第一条横线位置2. 设置鼠标悬停时就能出现下拉菜单，这个要用到trigger这个属性，这个属性是用来控制下拉框的出现。默认情

2020-08-22 22:22:13 3487

原创关于HTTP的相关了解认知

什么是HTTP协议？HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。 HTTP是一个应用层协议，由请求和响应构成；是什么？工作原理HTTP协议工作于客户端—服务端架构上。浏览器(作为HTTP客户端) 通过URL向HTTP服务端—发送所有请求。Web服务器有：Apache服务器，IIS服务器（

2020-08-11 21:04:37 196

Vue.js基础学习记录v2.x.txt

Git命令帮助文档.md

空空如也