
前端
涉及前端相关的全部的内容总览
治愈系的江予夺
这个作者很懒,什么都没留下…
展开
-
React+AntDesign:关于table的rowSelection在多选批量删除后仍为选中状态
本来是准备删除完了以后表格默认不选中的,但是发现选中状态并没有清掉,还是保留着下面的展示效果,觉得头疼,后面仔细查看了官方文档API后,通过尝试找到了解决办法。2. 这块主要是用到一个selectedRowKeys属性,通过设置这个属性就可以实现在执行删除命令成功后数据就不会默认被选中原来的id位置了,附上代码如下:// table表格部分的代码 <Table rowKey="id" locale={{ emptyText: <Empty /> }} r.原创 2021-04-22 17:29:50 · 4178 阅读 · 2 评论 -
React+AntDesign实现Form表单的动态增加删除操作
效果示例1. 原来效果2. 点击+之后实现说明此次开发需要用到动态生成多行表单,因为新老数据要兼顾,老数据是对象存储走的一个接口,新数据走的多行配置,对象数组存储,走的另一个接口,所以在展示上就需要区分下。注意这里默认了第一行不能删除,当然你也可以在变成多行的时候,给每一行都加上删除,但是为了避免数据被删成一行都不剩了,你需要处理下,要么在删成一行的时候禁止删除或者隐掉删除按钮,要么就在删除后要调接口的时候判断处理下,具体的得看需求来开发。因为这块的按钮有设置,如果配置的参数含有passwo原创 2021-04-20 16:12:38 · 3886 阅读 · 0 评论 -
SwitchHosts以管理员身份运行执行失败
1. 需要配置的hosts代理太多,借助SwitchHosts工具来管理,但是意外发现文件使用管理员权限运行的时候却控制不了,会弹出提示框如下:2. 使用快捷键 Win + R 快速输入以下这串 C:\WINDOWS\system32\drivers\etc. 进入电脑的hosts文件下,以记事本方式打开,将你修改的内容粘贴进去,你会紧跟弹出再下面的图片所示内容,提醒你手动更改也不行。3. 这个时候你应该就明白了,SwitchHosts控制不了也是有原因的,你打开hosts文件右击属性,可以看到原创 2021-03-09 10:27:34 · 1670 阅读 · 1 评论 -
Chrome谷歌浏览器http链接跳转成https的问题
因为这次开发需要用到的环境是需要http进行的请求,所以必须使用http而不能使用https进行请求。但是实际操作的时候,发现在GoogleChrome浏览器打开页面的http请求后面总是变成https,一开始以为是服务器自己开了重定向,看了下服务器的Nginx配置并没有配置负载定向。后面无意切换成IE浏览器的时候发现原本的http请求直接发出去了,后续查找资料了解具体原因发现这个竟然是谷歌浏览器默认开启了http转https请求,貌似现在新版的firefox火狐浏览器也这样了。那出现这样的情况肯定也是原创 2021-02-24 14:48:00 · 4355 阅读 · 1 评论 -
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 · 6600 阅读 · 0 评论 -
React:使用AntDesign中的Upload组件实现文件上传功能
上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。实现效果实现说明1、fileList 用于上传的文件列表(这个是受控的)。2、multiple 这个属性是用于是否支持多选文件,开启后按住 ctrl 可选择多个文件,ie10+ 支持。3、onChange 通过此方法可以用于上传文件改变时的状态。4、onRemove 用于点击移除文件时的回调,返回值为 false 时不移除。5、customRequest 通过覆盖默认的上传行为,可以自定义原创 2021-01-06 14:45:44 · 6936 阅读 · 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 · 1604 阅读 · 0 评论 -
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 · 1688 阅读 · 0 评论 -
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 · 3993 阅读 · 0 评论 -
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 · 240 阅读 · 0 评论 -
React实现下载导出Excel表格功能
功能说明点击下载按钮实现下载功能。实现说明1.如果请求后需要拿到的数据已经是正常的数据流,那么可以直接处理数据。2.处理数据流的方法3.如果拿到的是已经处理过的json数据,并不是我们所需要的直接数据流,那么就需要进行一些处理去帮助我们找到需要特殊处理到的数据流。 设置一个“标志”,类似于定位符,找出定位做出相应处理。可以自己封装一个请求方式,在请求头部带上特殊“标记位”,然后在做请求的那块做处理。如果是用的已经封装好的请求,不想做额外封装处理,那可以在请求参数里带上,如下图所示。原创 2020-11-24 14:22:55 · 2711 阅读 · 0 评论 -
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 · 1618 阅读 · 5 评论 -
React实现子组件向父组件传值更新状态
在做一个项目开发的时候,需要点击子组件的确定按钮在更新子组件的状态的同时去向父组件更新一个值状态,在我使用ref去进行传值处理的时候,出现了找不到这个方法的bug,后面换了下另外一种方式就能达到我要的效果。以下附上主要核心部分代码截图:...原创 2020-11-06 16:11:51 · 1746 阅读 · 0 评论 -
React新增编辑复用封装模态框数据污染复现问题
问题出现描述在做项目开发的时候,因为新增与编辑功能打开是同一个模态框,考虑到可复用,所以为了代码简洁性,在用的时候就将模态框单独封装成一个组件,在父组件里面调用子组件,但是出现了新增编辑时表单数据会污染复现,即出现新增时表单带数据,编辑时表单不带数据显示问题。问题显示情况1.先点编辑再点新增出现的状况。2.先点新增再点编辑的状况问题解决说明1.给表单设置一个值用来控制新增编辑时数据更新问题。2.父子组件之间传值,定义类型。3.父组件内写方法。注意:1.项目开发使用的re原创 2020-10-14 10:55:25 · 753 阅读 · 0 评论 -
React非表单内的组件手动清空Input输入框跟RangePicker日期范围
效果展示情况说明在项目开发的时候,因为显示效果需要使用通过重置按钮来清空控制的输入框与时间日期选中的值。因为是属于非表单,所以无法通过表单的属性来操作Input输入框跟RangePicker日期范围选择。所以重置清空值,则需要要求输入的值跟...原创 2020-10-12 11:49:33 · 2108 阅读 · 1 评论 -
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 · 3350 阅读 · 0 评论 -
Vue关于轮播设计与轮播组件的实现
轮播设计 实现轮播效果,首先需要在页面运用到我们的swiper轮播组件。<swiper :key="looplist.length"> <div class="swiper-slide" v-for="data in looplist" :key="data.bannerId"> <img :src="data.imgUrl" />原创 2020-07-14 00:14:52 · 455 阅读 · 0 评论 -
Vue+ElementUI实现下拉框二级联动搜索效果
(一)预计效果预览展示 预计初始显示效果如下图所示: 一旦在下拉框点击选项卡的内容进行选择后,下一个下拉框会在页面上显示出来,在下一个下拉框选择好后,就可以实现级联搜索了。(二)如何实现? 1.需要写入两个下拉框写入代码里面,并将我们要渲染的数据与下拉框进行一个绑定。原创 2020-07-10 17:14:45 · 8305 阅读 · 4 评论 -
为什么Vue打包出来的项目是空白页面?
有时候稍微没注意,用Vue打包出来的项目经过本地直接打开时发现竟然是空白页面! 1. 最直接的原因就是在打包项目的时候忘记创建vue.config.js文件了,这个时候在原Vue项目底下新建vue.config.js文件,内容为:module.exports = { publicPath:'/', out原创 2020-07-08 19:51:30 · 3536 阅读 · 0 评论 -
Vue:npm ERR!missing script:build
今天写到一篇博客,标题用了自己的代码提示报错信息。提交的时候,系统提示我标题含有非法字符,所以就不能发布文章。一开始很奇怪为什么会这样,仔细检查也没有发现标题有什么敏感词汇。尝试着各种修改,各种查询。后面发现,目前会提示这样的标题含有非法字符信息的原因:1)标题含有的转义字符,不可以直接作为标题发出去2)标题的文字环境需要是在中文环境下进行书写。...原创 2020-06-29 11:39:38 · 2541 阅读 · 0 评论 -
Vue渲染后再刷新页面为什么就没有显示数据了?
如果在写页面的时候可以显示数据,一刷新页面后显示的数据又没有了。其实这个问题也可以按照下面的方法进行排查,而前面出现数据的原因只不过是之前加载数据的缓存数据而已,一旦清除缓存,那些也不存在,所以,依然要对自己的代码进行系列的排查,看看是否请求对了,传参过去了,有拿取到响应数据吗?1.直接在页面上写出渲染数据名称{{数据名称}},刷新后再在页面上看是否在页面上有渲染成功的数据。2.如果还是没有数据,可以尝试去打印par原创 2020-07-08 15:51:48 · 5283 阅读 · 0 评论 -
Vue如何将获取到的时间戳对象转为日期格式?
在开发过程中获取的时间可能获取到的是一段时间戳,这样的数据显示在页面上会影响页面的美观效果,所以大多时候会直接将获取到的时间戳转换成日期格式显示出来.(1)确保自己的数据已经能显示在页面上可以看到了,否则你转换成功也显示不出来你的转换效果(2)在跟自己书写的同页面下新建一个filter文件夹用于存放自己转换日期的js文件书写如下代码:export function dateParse(dataStri原创 2020-07-01 11:43:47 · 1747 阅读 · 2 评论 -
[Vue warn]: Invalid prop: type check failed for prop “xxx“.Expected Boolean, got String with value
在输入框中使用clearable属性即可得到一个可清空的输入框,所以常常会用到这个属性。但是在使用时打开控制台提示出现了下面这条标红的信息。[Vue warn]: Invalid prop: type check failed for prop "clearable". Expected Boolean, got String with value "true".控制台显示如下:一开始以为是否是自己语法写错了,打开原创 2020-06-29 11:29:49 · 13327 阅读 · 0 评论 -
如何在写微信小程序开发的时候给其文本内容部分添加空格或者换行呢?
在写微信小程序开发过程中,有时候为了画面美观,里面的文本内容需要给它开头空格,段落换行,但是常用的HTML的语法书写跟微信小程序又不一样,这个时候就需要运用微信小程序特写的如下技能。书写前提条件注意: 必须在<text>标签中!1.单个空格、换行、\t 单个空格字符,无论写多少个都只会显示一个空格。\n 换行字符 代码原创 2020-06-10 22:01:50 · 6905 阅读 · 0 评论 -
如何将基于Vue的手机移动端开发项目进行APP项目打包?
1.找到项目文件夹新建vue.config.js(新建文件与package.json同级)module.exports = { publicPath:'/', outputDir:'dist', assetsDir:'static'}2.打开项目router文件夹底下的index.js 最底下的mode:'history'改成 mode:'hash'注意 两种路由方式:hash与history的区别1)原创 2020-06-09 22:36:03 · 1277 阅读 · 0 评论 -
Vue:These relative modules were not found
Vue框架总是不断更新所以在学习过程中也会经常容易出现一些小错误而导致无法实现一些相关操作。尤其是正在学习的新手,是经常且很容易因为疏忽而踩坑的。以下将针对Vue的学习过程中出现的一些踩坑雷区进行适当的汇总吧。1. These relative modules were not found: 出现这个问题时应该是意味着你的在进行原创 2020-05-31 20:08:46 · 6884 阅读 · 0 评论 -
JavaScript算术运算符,一元运算符,比较运算符,逻辑运算符,三元运算符的学习
算术运算符算术运算符 主要是+ (加)、- (减)、* (乘)、/ (除)、% (取余)等简单运算,以下借用操作系统中的node环境进行直接输出举例。一元运算符递增递减操作符 ++ 表示每次递增1,– 表示每次递减1。常用于遍历操作,比如要遍历某个数组,求所有值的和,需要将数组中...原创 2020-03-27 20:52:07 · 337 阅读 · 0 评论 -
JavaScript中Undefined未定义类型、Null空引用数据类型、Boolean布尔类型、number数值类型、String字符串类型、引用数据类型等数据类型的学习
数据类型ECMAScript不支持自定义类型,只有6种数据类型:5种基本数据类型(简单数据类型)以下直接通过一些实例代码情况来进行举例以用来帮助了解和具体情况学习。(注:console.log那一行输出的后面注释为输出结果)//undefined类型//未定义类型 声明了但是没有初始化的情况下 就属于undefined类型,undefined类型就只有一个值 undefined。...原创 2020-03-26 18:06:14 · 1541 阅读 · 0 评论 -
HTML5的相关知识学习笔记(三)
从HTML原有基础过渡到如今的HTML5,HTML5新增了一些表单元素及属性,和一些其他元素。HTML5以下是对此情况进行的一些相关的简单概括和举例,用以巩固对HTML5的学习。表单元素progress表示任务的完成情况,常用于进度条<progress max="100" value="20"></progress>output 表示用户动作产生的结果&...原创 2020-03-25 20:27:53 · 334 阅读 · 0 评论 -
HTML5的相关知识学习笔记(二)
二续的HTML学习主要是讲到表单的相关知识点,下列就是本次关于表单学习的一些知识点囊括情况。表单From表单用于用户与web应用程序进行数据交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。使用表单控件时一般要与label标签配合使用,用于描述其目的。action:用于处理表单信息method:浏览器用来提交表单的http方法,常用get/post。...原创 2020-03-25 16:38:28 · 335 阅读 · 0 评论 -
JavaScript的简单认识
作为前端相关的学习过程中,掌握JavaScript技术是必不可少的一部分,学习过程中整理老师讲课内容的学习笔记也是帮助自己学习的一个好办法。首先在进行具体操作之前应当对JavaScript有个简单了解。作为一个完整的JavaScript的实现应该包含:核心 ECMAScript文档对象模型 DOM浏览器对象模型 BOM1) ECMAScriptECMA-262 定义的...原创 2020-03-23 18:07:11 · 323 阅读 · 0 评论 -
HTML5的相关知识学习笔记(一)
最近学习了HTML+CSS的相关用法和操作,稍微整理下所学的知识内容,以供其他正在学习基础的朋友们共同探讨。HTML元素块级元素独占一行,用来布局段落,列表,导航菜单,脚注等结构,不可嵌套在行内元素中。行内元素与其他元素共享一行,一般被嵌套在块级元素中,通常作为段落的一部分出现。空元素只包含单个标签,通常用于在文档中插入部分内容。替代元素替代元素已经脱离了CSS的范畴,它们的表...原创 2020-03-19 20:41:59 · 255 阅读 · 0 评论