吴迪网络工作室

吴迪网络工作室:17634418124微信同号,react技术交流群:815413387,vue:942347564,JAVA技术交流群:830645840。

原创 如何将HTML转成图片?看这里你就会了!

笔者在去年的一个项目当中是给学校做的一个后台管理系统,当时是要有在页面上编辑卷子然后将卷子导出的功能。就这涉及到了富文本编辑器的知识和将HTML转成图片的技术。今天这个文章主要是讲如何将html转成图片,富文本编辑器的知识可以观看笔者的另外一篇博客富文本编辑器实现原理如果想将html元素转变成图片那么就需要俩个技术。1.html2canvas – 将html转变成canvas2.canv...

2020-06-05 17:42:06 33767

原创 前端AI语音方面的实现

文章目录前言一、开始写代码写html和简单的cssjs代码二、知识点讲解属性介绍:方法介绍:事件介绍三、兼容性介绍兼容写法三、实战演习全部代码:前言今天我们来点有意思的,AI语音转换!当我们遇到语音转换的需求感觉,哇,好难啊,这怎么开发啊。其实这是很简单的,今天笔者就来给大家演示一下我们用js实现语音转换功能!首先我们先来做俩个按钮,一个开始按钮一个结束并开始转换语音的按钮:一、开始...

2020-04-05 00:08:58 2433 3

原创 前端开发应知网站(强烈推荐!)

作为一名前端开发者(所有程序员)最起码遇到bug就算不会解决也应该会搜解决问题的答案。一般笔者会先在百度搜(关键词一定要输入正确)如果没搜到会再去bing里面看看还没有的话就去github的Issues里面再看看如果还不行就只能自己去看官方文档然后自己研究了。只是知道搜解决问题的方法这是最基础的,遇到问题才会去想办法解决,而作为一名...

2020-03-31 12:29:59 73549 110

原创 安装react-devtools工具详细步骤,不定期更新

网上很多安装react-devtools的教程都已经过时了,其实大家完全不需要看那些教程,看笔者的教程也不是非常有必要,但是笔者会交给你方法,并附带安装步骤:第一步,找到facebook的react-devtools地址进行下载【要关联远程,建议复制地址进行clone】:react-devtools地址:https://github.com/facebook/react-devtools复...

2019-11-25 09:07:58 13095

原创 一篇文章彻底搞懂异步,同步,setTimeout,Promise,async

之前翻看别的大佬的博客看到了关于setTimeout,promise还有async执行顺序的文章。观看了几篇之后还是没有怎么看懂,于是自己开始分析代码,并整理了此文章,我相信通过此文章朋友们能对异步同步还有,setTimeout,Promise,async这些内容了然于胸,接下来让我们走入正题:...

2019-06-10 13:18:14 30470 16

原创 彻底了解js的与和或

学过JS的朋友们应该都知道这俩个运算符(“||” 和 “&&”)的名字 - - 短路运算符。今天我们就来看一看它究竟是怎么个短路法!一:在if判断中的用法:||的用法:if (2 > 1 || 2 > 5) { console.log('CSDN吴小迪');}“||”的用法是如果前面的表达式满足了那么就不会再走到下一个表达式,之间就会进入到if的执行语...

2019-05-15 16:24:21 25937 2

原创 富文本编辑器涉及到的知识与一些坑

笔者最近在负责公司项目中的富文本编辑器的部分,由于是自己公司的产品,为了性能等方面的考虑要求笔者自己写原生代码实现。过程当中遇到了很多坑,现在来与大家一起交流一下。目录:要完成的功能:富文本编辑器的功能实现选中后映射属性到属性栏实现复制粘贴保留样式涉及到的知识:富文本编辑器底层实现原理鼠标选中时获取选中文本的样式集合过滤粘贴样式遇到的坑:获取鼠标选中文本的样式...

2019-05-03 18:28:01 17750 2

原创 JS获取鼠标选中的节点信息

今天给大家分享一下如何在项目中获取鼠标选中的节点和其他的信息项目实战:项目需求:在富文本编辑器上获取选中dom节点的内容,和鼠标所在的位置。笔者前不久在某项目开发的过程中就遇到了这个问题,全网搜,感觉总结的好的还不是很多,就算是好的也不是很全,所以笔者决定把这些东西结合着我项目的需求去把这些知识点串起来,以供后面的朋友们解决问题。首先要有一个输入框或者富文本编辑器(没有富文本编辑器朋友可以...

2019-05-02 15:41:39 24444

原创 react详细介绍性能优化

今天给朋友们详细介绍react如何进行性能优化。首先要了解网页性能不好的罪魁祸首  浏览器的重绘和重排版(reflows&repaints)(DOM操作都会引起)才是导致网页性能问题的关键。  而React虚拟DOM的目的就是为了减少浏览器的重绘和重排版。一:react中的问题有时候组件的render方法会在不必要的情况下被调用。比如:  组件渲染的过程中,并没有使用prop...

2019-04-21 09:05:50 16280

原创 React底层原理解析之diff算法

React的diff算法是在哪里进行计算的?diff算法是在render里面进行计算的。React的diff算法与传统的diff算法的区别:传统的diff算法:计算一棵树形结构转换为另一颗树形结构需要最少步骤,如果使用传统的diff算法通过循环递归遍历节点进行对比,其复杂度要达到O(n^3),其中n是节点总数,效率十分低下,假设我们要展示1000个节点,那么我们就要依次执行上十亿次的比较。...

2019-04-20 20:27:54 18016

原创 你不知道的console,控制台也能玩出花样~

平时前端开发的过程console是大家用到的最多的命令之一,但是大部分人只会console.log(),并不知道console它还有其他很多的骚操作,今天就给大家分享一下~。1. 首先是大家最常用来调试的console.log([data]:any[,…args]:any),很多时候我们需要查看函数的参数是不是我们想要的值或者结果是不是我们预想的值的时候一般会使用它。console.log("...

2019-04-14 11:26:43 16255 4

原创 查看前端代码在各浏览器的支持情况的方法

今天给大家带来了如何查看前端代码在各浏览器的支持情况肯定会有朋友问到,我们为什么要在用新属性之前查看一下它的兼容性,因为我们开发到最后上线的时候要保证浏览器能够正常运行,前端的界面的效果还有交互效果能够正常实现。比如说你现在使用了CSS3的弹性盒,display:flex。页面布局的时候轻松愉快,可是顾客的要求是兼容到IE8。那么你就惨了,因为当你的代码放到IE9之前的版本去运行的时候会发现界面...

2019-04-13 20:18:27 16656

原创 如何跨行学习前端?一个小白的跨行之路~

如何跨行学习前端?一个小白的跨行之路~此篇文章讲述了一个小白跨行学习前端过程遇到的问题,以及是如何解决的。希望此篇文章能够帮助到更多的人。前端小白该如何入门?(先给大家分享**干货**最后在讲故事)*干货分享完了最后给感兴趣的朋友分享分享笔者的真实经历*此篇文章讲述了一个小白跨行学习前端过程遇到的问题,以及是如何解决的。希望此篇文章能够帮助到更多的人。大家好,我叫吴小迪,在前端行业这个领域已经...

2019-04-13 14:55:17 12738 3

原创 thinkjs使用事务

首先需要警告下朋友们,千万别去thinkjs官网群里面去问那些大佬,个别大佬的脾气是真的惹不起系列。比如:行了,不扯没用的了,但是说实话真的是在官网群里面被气死了。这个项目之后再也不用thinkjs了。【手动微笑】下文当中有任何疑问问题请在评论区评论,笔者会在第一时间回复。或者进入笔者技术交流群互动:react:815413387,vue:942347564,JAVA:830645840。1.model中使用手工操作事务async addData(data) { // 如果添加成功则 c

2020-08-02 23:36:53 1427

原创 前端自动化测试

什么是Web自动化测试?让程序代替人为自动验证web项目功能的过程什么Web项目适合做自动化测试?需求变动不频繁项目周期长项目需要回归测试如何进行Web自动化测试?(主流测试工具)QTP(收费)QTP是商业的功能测试工具,支持web,桌面自动化测试。Selenium(开源)Selenium是开源的自动测试工具,免费,主要做功能测试。Jmeter(开通、web、...

2020-07-30 15:55:11 1395

原创 React Hooks相对高阶组件和Class组件有什么优势/缺点

文章开始前需要事先跟朋友声明下,此篇文章仅仅是笔者自己的分析与感想,非官方说明。如有不当之处,欢迎指出。文章目录React Hooks相对高阶组件和Class组件有什么优势/缺点?一、Hooks组件相比于Class组件二、Hooks组件相比于高阶组件React Hooks相对高阶组件和Class组件有什么优势/缺点?一、Hooks组件相比于Class组件首先我认为hooks组件其实是降低了react开发的使用难度的,让新手可以在不使用class组件的情况下依然可以进行项目开发。可能会有朋友感.

2020-07-30 15:45:49 2321

原创 pm2同时启动服务端以及前端 示例:thinkjs+antd-pro

如果你不会如何部署项目请参考笔者的部署项目的博客:https://wudi98.blog.csdn.net/article/details/96706276我们在平时项目部署的时候大家都喜欢用pm2去启动服务和前端项目。这样在关闭命令行的时候服务也不会跟着一起关闭了。笔者相信大部分朋友都是跟笔者之前一样,先到服务端目录pm2启动服务,然后在跑去前端pm2启动项目。太麻烦了。。。接下来我们就来个简单的~我们先来看下效果:直接就启动了服务端加前端那我们在启动项目的时候如何把前端和服务端.

2020-07-25 23:24:27 2291

原创 使用group by对数据进行汇总计算

select id, code, name, unit_id, sum(quantity) as total_put_quantityfrom ( select a.id as id, a.code as code, a.name as name, a.unit_id as unit_id, b.quantity from product as a left join put_in_storage_item as b on a.id=b.product_id) as

2020-07-21 16:12:26 3769

原创 数据库系统原理【三】

数据库系统原理

2020-07-19 12:09:42 8869

原创 sql多表连接

下面演示一个三表连接查询。用户表、部门表、用户部门关联表select a.id as userId,dept_id,c.name as deptNamefrom user as aleft join user_dept as bon a.id=b.user_idleft join department as con b.dept_id=c.id;

2020-07-14 14:29:23 8442

原创 内连接、左外连接与右外连接的区别及作用介绍

SQL语句当中比较难的部分就有今天要给朋友们分享的这个,inner join, left join 和 right join他们三个的作用以及区别是什么。顺便也会把交叉连接一起分享了。上面会分享一些基本的语法与使用,下方会详细介绍1)交叉连接,又称笛卡尔积SELECT * FROM tb1 CROSS JOIN tb2;// 简写SELECT * FROM tb1,tb2;2)内连接// 语法SELECT some_columnsFROM table1INNER JOIN ta

2020-07-09 22:13:10 5007

原创 thinkjs接收get请求、post请求

此文介绍使用 thinkjs 如何获取前端的请求参数。文章目录笔者使用环境:服务端对前端请求进行校验服务端接收前端的请求参数GET请求POST请求笔者使用环境:服务端:thinkjs前端:react请求:umi-request服务端对前端请求进行校验文件目录: src/logic/user.js请确保logic的目录和controller目录结构一致module.exports = class extends think.Logic { checkTools(rules) { /

2020-07-03 17:38:35 4745

原创 thinkjs全局设置所有请求都允许跨域处理

在开发环境的时候我们是要处理跨域这个问题的。如果我们在开发环境要进行跨域处理想要一劳永逸该怎么办呢?本文介绍的是thinkjs解决跨域的方法。有俩种方法,第二种是最省事的。第一种方法:写一个父类方法进行继承使用。如果在不引入任何依赖的情况下我们可以这么做:在你的src/controller/base.js里面追加一个方法专门处理跨域的:module.exports = class extends think.Controller { __before() { } setCors

2020-07-03 14:41:10 1066

原创 数据库系统原理【二】

上一篇:数据库系统原理【一】文章目录第三章:数据库设计1.数据库设计概念1)数据库的生命周期2)数据库设计的目标3)数据库设计的内容4)数据库设计的方法a. 直观设计法b.规范设计法c.计算机辅助设计法5)数据库设计的过程2.数据库设计的基本步骤1)需求分析需求分析的四个工作步骤:2)概念结构设计概念模型:1.实体分析法(自顶向下法)2.属性综合法(自底向上法)3)逻辑结构设计4)物理设计5)数据库实施6)数据库运行与维护3.关系数据库设计方法1)E-R图的表示方法2)概念结构设计方法a.局部信息结构设计

2020-07-03 08:55:25 5343

原创 数据库系统原理【一】

文章目录一、考试介绍第一章:数据库系统概论1、数据库基本概念a、什么是数据?b、什么是数据库?c、数据库中存储的数据的三个基本特点d、数据库管理系统及其功能e、数据库系统的构成2、数据管理技术的发展a、人工管理阶段b、文件系统阶段c、数据库系统阶段3、数据库系统的结构a、数据库系统的结构分类数据库系统的三级模式结构b、数据库系统的三级模式结构c、客户/服务器(C/S)结构d、浏览器/服务器(B/S)结构4、数据模型第二章:一、考试介绍第一章:数据库系统概论1、数据库基本概念a、什么是数据?数据(

2020-06-27 16:53:56 8935

原创 查找某数据库里所有的表名与查找字段的sql

文章目录如果我们想要查看数据库里面所有的表名以及其对应的描述的话请使用:如果我们想要看哪些表里面有相关的字段名,那么请使用:如果我们想要查看数据库里面所有的表名以及其对应的描述的话请使用:select TABLE_NAME, TABLE_COMMENTfrom INFORMATION_SCHEMA.Tableswhere table_schema ='nky' # 这是你的表名如果我们想要看哪些表里面有相关的字段名,那么请使用:SELECT TABLE_NAME, COLUMN_

2020-06-24 11:06:53 4692

原创 webpack踩坑笔记之 “使用CleanWebpackPlugin插件无法打包” 问题解决

后面的话笔者会发一系列webpack的踩坑笔记,如果笔者写的没有你想要看的,可以私信笔者或者评论在文章下面,说出你的复现步骤,笔者帮你解决并整理文章出来~我们按照官网文档进行到使用插件的时候都是正常的,但是按照官网文档去配置cleanWebpackPlugin的时候就出现了问题,无法打包!...

2020-06-19 17:41:25 5408

原创 发布组件到npm上面

文章目录前文一、项目准备二、npm发布三、持续集成四、删除包五、总结前文npm包管理工具前端同学应该不陌生了,npm平台上有大量的优秀包,我们只需要简单几行命令就能下载下来我们想要的东西,不用到处求种,而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去,方便项目中使用和其他人使用,本文介绍如何将一个组件发布到npm平台上去。一、项目准备发布到npm平台的包,是一个项目工程,跟我们平时工作中的项目类似,应该有完整的一套构建,开发,测试,打包压缩等步骤,所以应该把这个包当成一个项目来对待

2020-06-19 15:03:50 5196

原创 移动端开发遇到的一些兼容性问题及其整理

IOS手机测试时会发现加了margin-bottom的属性无效。解决:替换为padding-bottom或者放个空盒子有高度宽度占位即可。IOS手机的输入框出现未知的内阴影。解决:input: {-webkit-appearance: none;}控制手机上方的标题:document.title;...

2020-06-19 09:42:44 5299

原创 前端代码注释模板

前端代码注释/*** @name 名字* @abstract 申明变量/类/方法* @access 指明这个变量、类、函数/方法的存取权限* @author 函数作者的名字和邮箱地址* @category 组织packages* @copyright 指明版权信息* @const 指明常量* @deprecate 指明不推荐或者是废弃的信息* @example 示例* @exclude 指明当前的注释将不进行分析,不出现在文挡中* @final 指明这是一个最终的类、方法、属性,禁止

2020-06-04 10:18:20 5247

原创 下载旧版本的jetbranis系列工具的方法

如果我们想要下载其他版本的jetbranis工具,请在后面加入/download/other.html比如我想要看之前版本的webstrom那么我就在webstrom的介绍页后面加入/download/other.html

2020-06-03 10:45:50 4753

原创 js比较版本号

在实际的开发工作中我们会对项目前后的版本号进行对比,从而进行缓存的更新。下面我们就使用js对标准的版本号进行比较大小。实现一个方法,用于比较两个版本号(version1、version2)如果version1 > version2,返回1;如果version1 < version2,返回-1,其他情况返回0版本号规则x.y.z,xyz均为大于等于0的整数,至少有x位示例:compareVersion(‘0.1’, ‘1.1.1’); // 返回-1compareVersion(

2020-05-13 08:41:20 9106

原创 网络经济与企业管理【一】

文章目录一、企业管理概论一、企业管理概论自主经营、自负盈亏、独立核算、承担风险

2020-04-28 21:35:48 188

原创 Taro的一些问题总结

笔者最近在用Taro做小程序,但是发现了一些莫名其妙的问题,此文章做一总结并将解决办法附上:一、配置tabbar的icon未生效最开始笔者用的是svg的格式,但是不显示。后来改成png格式的图片就可以了。其他注意点:官方文档说明:icon 大小限制为40kb,建议尺寸为 81px * 81px。二、map渲染了一组数据,对其中某一项进行操作的时候获取到的item始终是最后一个代码如下...

2020-04-26 22:29:37 1302

原创 微信小程序配置合法域名

当我们在开发微信小程序去调用接口获取数据的时候如果之前未做任何配置,那么当我们发请求的时候会发现如下报错:根据报错得知他说我们的是非法域名,那么如何变成合法的呢?我们需要点进这个链接看一下:然后我们就通过进入https://mp.weixin.qq.com/这个链接进行登录配置下滑找到服务器域名这里,然后点击修改在这边配置好之后我们回到微信开发者工具里面刷新一下看看。然后在...

2020-04-25 22:01:45 475

原创 微信公众号的推广

公众号涨粉一直是90%的新媒体公司制定的目标其中一项,在几乎已经没有增长红利的今天,粉丝增长已经越来越困难了,新媒体运营已经由“采摘狩猎”时期进入到了“农耕时期”,所以谁能掌握粉丝增长的方法,谁就获得了在新媒体的“农耕时期”的先发优势,就意味着你可以升职加薪。既然在“农耕时期”的粉丝增长这么重要,我们需要怎么高效率的获取粉丝呢?今天这篇文章给大家梳理下,如何利用第三方渠道,0成本高效获取粉丝。...

2020-04-20 21:08:33 1051

原创 前端开发常用JS功能函数(下)

接上一篇:前端开发常用JS功能函数(中)数字的加减乘除numAdd - -计算数字相加function numAdd(num1, num2) { let baseNum, baseNum1, baseNum2; try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) {...

2020-04-19 09:38:24 1262

原创 股票 - - 常用指标【下】

股票 - - 常用指标【下】接上一篇文章,文章地址:八、巴菲特最看重的指标1. 简介九、快速读懂股票的估值十、筹码分布 - - 一个一用就上瘾的指标十一、TOWER宝塔线接上一篇文章,文章地址:上一篇文章地址:八、巴菲特最看重的指标1. 简介沃伦·巴菲特,在1988年花13亿美元投资了可口可乐。购买可口可乐之前,巴菲特研读它的年报,并分析了公司十年来的净资产收益率变化趋势。1978年-...

2020-04-18 16:37:20 238

原创 股票 - - 常用指标【中】

股票常用指标【中】接上一篇:[股票 - - 常用指标【上】](https://blog.csdn.net/weixin_43606158/article/details/105343082)四、选股也需要心理学-PSY1. 简介2.PSY探底功能的使用五、捉超跌反弹利器 - DMI1. 简介2. DMI基本线介绍3. DMI具有的实战功能:六、捉超跌反弹利器 - 乖离率七、好用的指标居然这么简单...

2020-04-11 14:43:28 239

原创 将字符串按指定规则切割,加入指定内容

比如下面这个需求:将证件号码按照6-8-6分割将银行卡按照4-4-4-4-4分割将手机号按照3-4-4分割都是分割,那么我们就可以单独写一个方法来进行这个处理:function segmentTheStr(str = '', segmentArr = [], customSymbol = ' ') { // TODO:自己在这里写一下类型判断的代码,如果传入的参数的数据类型不对...

2020-04-09 16:12:21 9054 2

提示
确定要删除当前文章?
取消 删除