Run_youngman-CSDN博客

原创【解决】设备不支持Websocket取流

解释海康web开发包提示设备不支持websocket取流的问题。

2021-12-09 14:18:31 6412 5

说在前面目前我们项目，前端在打包并重新发布之后，系统经常会提示加载的页面发生异常，如下图：此时用户需要清除浏览器缓存，然后刷新才能看到正确的页面，目前项目处于测试阶段，等到真正部署并交由用户使用后，这种情况体验是比较差的。原因分析发生这种问题的原因，可能是加载的页面资源找不到了，但是为什么必须要清除缓存才可以解决问题呢？通过本地打包，发现打包之后的目录结构如下：通过上图可以发现，每次打包后生成的文件都是类似数字的命名方式，也就是说，下一次内容更新后，几乎仍然是此类数字命名的方式，两次打包的文

2021-10-24 14:08:04 9097

原创前端项目配置代理解决跨域问题

跨域是浏览器行为，不是服务器行为，是浏览器将请求阻止。说在前面前端开发过程中会遇到访问请求跨域的问题，比如调用如下方法访问疫情分布的公共接口，就会出现跨域的问题。export function getDiseaseInfo() { return axios({ url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', method: 'get' })}解决思路开头有说过，跨域是浏览器行为。实际上我们

2021-10-17 17:47:34 7861 3

原创大话网络爬虫

爬虫的简单介绍首先呢，今天要介绍的爬虫不同于我们日常生活中见到的昆虫，而是在网络世界中从网站中抓取数据的网络爬虫。我们日常百度搜索引擎中可以查询到诸如知乎，微博等网站的信息都要归功于爬虫，二者一个提供内容，一个提供流量，相得益彰。比如说tophub这个网站，他上面集成了知乎，微信，b站，豆瓣等网站的热榜，网站建造的初衷是为了告别各大网站的智能推荐，他只是提供了一个平台，涉及到详情都会跳转到各网站的原始网页，不抓取正文内容。robots.txt各行都有各行的规矩，提到爬虫就不得不说一下robots.t

2021-08-02 14:14:10 480

原创 HTTPS网站为什么值得信赖

初识HTTPShttps协议的诞生，是为了解决http传输信息不安全的问题。https不是一个独立于http的协议，而是基于http协议，套了一层TLS协议的外壳，TLS的前身是更为人熟知的SSL协议，与1999年被推出1.0版本并正式替代当时的SSL3.0。我们平时使用的大部分网站都已经升级为https了，大家都知道https更安全（网站前面会出现一把小锁），但是他为什么安全呢，他的安全是绝对安全吗，有没有可能仍然存在信息泄露？HTTPS的实现过程下面，让我们一起走进HTTPS的内心世界。对网站

2021-07-27 18:55:34 306

原创网络安全之加解密

说在前面经常看谍战片的小伙伴们都知道，诸如《悬崖之上》，《潜伏》等，好多需要传递的消息都不是直接发送出去的，而是通过加密的方式，收件方通过特定的密码本来对内容进行破译和解读，这是因为发送出去的消息可能会被特务或者其他无线电台拦截，如果不进行加密，消息很快就会被破解。网络中也是一样，一些商业机密，甚至是悄悄话都可能会被截获，消息会经过公司防火墙、路由器，也可能会有黑客对数据进行拦截，此时将发送的数据进行加密才可以保护隐私，你拦截到了，但是你破解不了！对称加密对称加密是最快速，最简单的一种加密方式，加密

2021-07-27 18:49:46 827

原创 Webpack中SourceMap简介以及提升前端项目编译效率实践

说在前面近日团队成员反馈前端项目修订部分内容后需要build很久，内存占用很大。我启动项目后查看确实存在这个问题（解决方案在文末）。之前了解过相关的内容，前端的代码想要在生产环境运行，肯定需要进行编译之类的操作，这时就很难调试了，因为只能看到构建后代码中错误的位置，无法定位到源代码对应的位置。这个时候就需要一个Map来映射构建后的代码和源代码之间的关系。SourceMapSourceMap是一个信息文件，里面存储着位置信息，有了他，出错的时候控制台就能直接显示原始代码，而不是转换后的代码。JQuery

2021-06-22 11:28:45 431

原创 32位和64位有什么区别？

说在前面我们平时经常会听到诸如这个软件是64位的，那个操作系统是32位的等此类话语，之前一直处于无感的状态，直到有一次培训，我32位的excel无法安装上64位中文版水晶球插件，这就勾起了我想了解其中缘由的兴趣。那么64位的究竟比32位区别在哪里？我们可以任何时候都义无反顾的选择64位吗？让我们带着疑问一起走近科学。冯诺依曼模型在冯诺依曼模型中，他提出了内存的存储单位是二进制进行运算，计算机内部存储器来保存运算程序，这两个方案大大加快了计算机的速度和运算效率。内存：存储的数据单位是一个二进制位，单

2021-06-22 11:24:05 705

原创 npm安装机制简述

说在前面我们在开发前端项目的时候经常会用到诸如 npm install来初始化依赖，这个过程中究竟发生了哪些事情，每次都需要从网络端重新下载依赖吗？安装依赖时，总会有一些莫名其妙的报错，这个时候我们只要删除package-lock.json，然后删除node_modules重新下载依赖，这样就能顺利安装依赖了，到底是为什么呢？让我们带着疑问一起往下走。经常使用npm的小伙伴应该知道，项目中用到的依赖，大部分都不是全局安装的，两个不同的项目，即使依赖的包完全一致，初始化都需要重新执行一遍 npm in

2021-06-15 20:10:21 583

原创一篇文章了解Promise，细节拉满！！！

为什么要有Promise“回调地狱”这个词大家应该不陌生，Promise的存在很大一部分原因也是要为我们解决回调地狱的问题，但是这个词可能不是你想的那么简单。首先多层嵌套这一个因素会导致代码稍微难以读懂，我这里为什么要用“稍微”呢，因为回调地狱并不仅仅是因为嵌套。更多的是因为传统的嵌套回调中的方法不能只考虑正常执行，要考虑可能导致步骤执行顺序偏离异常的情况，如果我们强行使用手工硬编码（将错误处理方式直接嵌入到程序）来处理，加之有多层嵌套，最终肯定会导致代码的复杂，以至于无法维护和更新。这句话对我而言

2021-02-24 15:45:30 329

原创解决： npm install 报错 ‘The operation was rejected by your operating system‘

背景最近准备开始一个新项目，但是在初始化依赖包这一块儿就卡住了，最初以为是公司的网络限制，结果仔细看了报错之后便尝试解决了。开门见山方案1、由于报错是 The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus),本能的想法就是权限不够，所以直接使用管理员权限打开了命令行然后执行 n

2021-02-23 14:36:08 51719 39

原创 typeof 和 instanceof讲解以及最佳类型判断实践

说在前面JavaScript作为前端当家的语言，其重要程度不言而喻，一些基础的语法以及概念之前经常有看，但是随看随忘，过程中有一些自己觉得惊鸿一瞥的发现也随着时间消失不见，特此开一个专题，把往往种种的体会分享出来，供自己回顾以及各位拿取。开门见山其实在阅读一些源码或者封装的代码时，经常会看到使用 typeof 或者 instanceof来进行一些判断，有时不能很好地理解判断的具体含义，下面通过分析这两者的使用方式以及自身特性来加强理解。typeof语法： typeof operand 后面可以

2021-01-28 15:20:54 538 2

原创 Vue中slot的理解与实际应用

背景最近重新回归了前端开发，在开发过程中发现在组件封装过程中slot使用频率相当的高，像比较主流的Element UI也是提供了不少的插槽来帮助用户来更灵活的开发，本着学习知识以及和大家一起共同提高的态度，把自己对于slot组件的理解写成文章和大家一起分享。深入浅出小插槽如果对于slot的基本概念已经十分了解了，可以跳过该段落，如果你不是很确定，建议读完本段落。语法比较简单，通过子组件中添加 | 代码块并且在父组件调用过程中使用默认插槽或者具名插槽来增加或者替换默认插槽内容。详情见官网。我理

2020-11-28 16:07:25 1587

原创浅析JavaScript字符串中的引号与反斜杠

最近在看《JavaScript语言精粹》这本书，读到了正则表达式一章，文中提及一个匹配JavaScript字符串的正则表达式对象，当我发现他的正则表达式的时候我就不淡定了，预感到自己要深陷其中了。var my_regexp = /"(?:\\.|[^\\\"])*"/我在研究这个正则表达式的过程中发现了自己的很多知识盲区，下面通过介绍这个正则表达式将知识内容一一列举出来。声明字符串时的反斜杠和引号声明字符串时，如果字符串内容中包含 ‘/’ 或者引号的时候是需要特别注意的。反斜杠如果你想声明一

2020-09-21 14:19:42 3764

原创《深入浅出vue.js》中变化侦测的源码以及解析

《深入浅出vue.js》中变化侦测的源码以及解析背景最近由于公司知识体系变动，需要学习vue来适应新的开发平台，我选择了《深入浅出vue.js》来进行学习，之前有了解过一些vue知识，这次打算深入学习一下，尤其是第一篇变化侦测，学习过程中对javascript也增加了不少理解，我把代码都手打了出来，代码中有很多按照自己理解打上的注释，这里分享给大家。开门见山这里我不给大家解释他是什么，书中...

2020-04-10 20:28:04 482

原创【VSCode】设置代码格式化插件Beautify

背景开发过程中，经常由于一些代码的复制粘贴，或者编写时的一些不良习惯，导致代码可读性比较差，这个时候就需要一个代码格式化插件来帮助我们把不规范的代码格式化一下。VSCode中拥有大量的插件库，其中最具代表性的使用库就是Beautify了。设置VUE代码模板在我们开发过程中，难免会新建一些文件，那么可不可以当我们新建文件的时候，就把一些VUE文件中的基本信息给代入其中呢？比如，再比如一些钩子函...

2020-03-14 22:08:13 15463 1

原创【解决】You are using the runtime-only build of Vue where the template option is not available...

直奔主题不想往下看的看这里。我是用的vue-cli4,项目报错是因为我对一个子路由的组件使用了非template模板，代码如下const User = { template: '<div>User</div>'}然后将User置于路由对应的组件，当把User新建到一个新的.vue文件中，系统便不在报错。背景今天在学习vue-router的过程中，当我通过声...

2020-03-11 21:37:10 536

原创 vue cli修改默认webpack配置

vue cli修改默认webpack配置背景 Vue CLI作为一个Vue的脚手架，帮助我们做了很多工作，比起create-react-app脚手架，丝毫察觉不到有webpack的身影，对于简单的开发工作，我们无需关注如何去修改他的默认配置，但是如果我们想做一些定制化的开发，比如修改一些公共变量或者添加一个插件，其实Vue CLI文档都有介绍，但是说实话为了理解这些东西我查了不少文档，说实...

2020-02-22 20:27:40 5207

原创 vue mounted方法执行多次问题的解决方案

问题背景今天帮忙解决问题的时候遇到了一个很奇怪的问题，点击一个按钮跳转的另一个页面，他的mounted方法执行了三遍，想到这个问题我确实是很困惑的，查阅网络资料说是v-if和v-show的问题，线下我自己验证了一下，确实没有找到使用v-if会导致mounted多次的情况。解决思路首先遇到这个问题我就在思考，是不是某些原因引发了组件生命周期的消亡，于是我在mounted函数周围添加了destr...

2019-08-01 20:10:25 27439 14

原创 Vue中scoped工作原理以及使用情景

为什么要使用scopedvue中为了让样式私有化，不至于当前组件的css样式对全局造成污染，添加了scoped属性，但同时也要慎重的使用，因为一旦出现问题，排查起来可能会很麻烦。scoped工作原理我们平时开发vue的时候可能会比较好奇，经常会看到data-v-asf23235kd33k在dom元素中出现，其实这就是scoped做的事情，比如我们一个button组件，我们定义了如下scope...

2019-07-12 11:40:30 1394

原创使用antd的Row、Col组件绘制word申请表

背景想到用Row,Col绘制word申请表，首先他的span属性调节可能更方便一些，而且整体使用起来也是React风格，避免了使用tr, td这种原生的标签带来一系列属性错误以及不兼容。当然了我使用tr,td完成了一版，踩了一些坑，如果你想用这种方式，希望这篇文章可以帮到你。开始coding说一句，嫌啰嗦直接拉到最后，拷贝一下就能用。当我一开始使用的时候JS文件代码是这样的。<d...

2019-03-18 22:02:01 9901 2

原创 react下绘制word申请表

背景最近项目里有个需求，绘制一个word表格，就类似大学的时候填写的那种表格。开门见山为了不耽误大家时间，我先说结论，如果你的代码拿到react环境中参差不齐了，可能是你把colspan这个属性放到style里面了，然而这个属性属于标签的固有属性，放到style中是起不到作用的。拿到这个需求之后我首先想到了tr,td的方式来绘制，然后绘制的效果大概是这样。代码如下：<!DOCT...

2019-03-18 20:08:46 2192 1

原创 python爬取微信好友信息并根据导出的csv做数据分析

写在前面：之前了解过一点python，前两天看了一篇文章,一件有趣的事：我用 Python 爬了爬自己的微信朋友,感觉还挺有意思的，不过文章看完了，自己敲代码的时候还是有点坑踩进去的，所以我写篇文章来填坑啦！顺便把省份统计拿出来做个范例。正文pip install itchat,pip install pandas安装依赖。多说一句，一般写python都会在文件开头加一句#coding=...

2019-01-29 16:12:27 2505 1

原创 react+koa+socket.io实现群聊功能

背景一直都想了解一下websocket，但是之前都半途而废了，最近项目压力不大，了解并整理一下其中内容。之前网上搜的教程说实话，项目有，理解起来不好理解（之前说过了，我有点笨），现在理解了，便迫不及待的分享出来。说实话，ui啊，细节啊都没怎么处理，但是，基本功能有了，就是websocket。什么？你也有类似的困惑，看这篇文章就对了！项目准备还是在之前项目基础上添加的功能。koa+mongo...

2019-01-10 14:32:28 1279

原创 Koa+Mongoose实现增删改查功能

背景最近在学习node相关的知识，说到后台就少不了数据库等知识，综合查阅的资料，我使用的是koa+mongodb+mongoose.在这篇文章中我会详细介绍这个项目的搭建过程，以及开发过程中遇到的坑点以及需要注意的点，适合初学者快速入门。资源准备本文后mvc台架构参考的是廖雪峰的koa mvc架构后台搭建项目地址 koa-learn 代码才是硬道理。对应的前端代码搭建过程，内含代码地址...

2019-01-06 17:55:23 3387

原创浅析Virtual DOM

说在前头：上文提到了浏览器的重绘和重排，并提到了一些优化的方式。框架的魅力就在于不知不觉的就帮你把事情做掉了，在编写react代码的时候我从没有考虑过添加节点的时候将元素移出文档流等操作。毕业之后就接触了react，但是被问到他的特点是什么还是有点不知所措，今天和大家一起了解一下他的特点，虚拟DOM。正文：说之前先看一个例子：<ul id = 'list'> <li ...

2018-12-24 16:43:32 383

原创重绘和重排

上一次说到了浏览器的渲染过程中，layout的重新布局是导致性能问题的主因，那么什么情况下会导致这一后果，并且有什么好的方式可以优化呢？ Let’s go.术语介绍：某一个或多个dom节点的变化会影响元素的集合属性【宽&amp;高】，这样会有一部分DOM节点受到影响，此时浏览器会使受到影响的部分失效，并重新构造渲染树，这个过程叫做重排。重排过后，浏览器要重新绘制受影响的部分到屏幕中，这个过程叫...

2018-12-24 10:07:42 1063

原创浏览器渲染过程

前言：渲染过程网上不少教程，但是感觉自己从头到尾梳理一遍也是有必要的。文章尽量用简洁易懂的形式来展现，方便自己日后复习和读者朋友的理解。资源:这是广为流传的浏览器渲染内容的过程图。正文：首先说明一下，浏览器渲染是要从服务器下载资源的，获取的资源包括HTML,CSS以及JavaScript。然后浏览器把下载的内容解析出来展示给用户。HTML解析器解析，将.html文件中的节点构建出来...

2018-12-21 15:44:05 430

原创 React Hooks入门

背景近期React又出了一个新特性，由于现在还是alpha阶段，所以不建议引入自己的项目进行使用，官方文档介绍的有点过于详细了，我这里总结几点关键的，大家一起学习。首先一句话概括他的作用：不用引入class，还能使用state和React的其他特性。引入他的原因也是升华React一直提倡的共用逻辑，重用组建中与状态相关的逻辑，并且方便开发维护。React组件是支持两种方式的，一种是函...

2018-11-28 15:00:07 869 1

原创 Taro开发微信小程序实现简单的登录退出功能

Taro是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架，还有我发现从某度上搜索的结果首页居然看不到Taro框架的任何信息，但是谷歌首页就直接给出了结果，Taro使用文档。我是准备用它来开发微信小程序的，而且公司使用的前端架构正好是React，感觉冥冥之中一切自有定数。一些初始化的例子我这里不多说了，官方说的很详细了，我选择的初始化方式是使用redux,Sass，并且不开启T...

2018-09-20 10:25:21 16792 3

原创微信小程序： navigator 设置 openType="switchTab"不起作用

最近刚开始学习小程序，官方文档不够充分的组件说明导致了一些现象无法说清楚。就比如这个openType=”switchTab”，我使用了一下这个，首先说明我的代码结构没有完全按照官网结构，只是截取了footer的功能。如图：就是有一个navigator，动作是用switchTab的方式跳转到首页面。我看了官方说实例是可以跳转的，但是我自己代码里面就没有办法跳转。代码：&l...

2018-08-28 19:06:16 6774 3

原创 react 项目使用highcharts滚动条来展示数据

在使用图表画图的时候总会，由于展示的面积有限，无法将数据完全展示到图表中，这个时候就可能考虑使用滚动条来滑动展示数据。讲一下过程，我首先找资源，找到了这个，发现很适合我的需求。 highcharts很有意思，他单独的为react创立了一个包叫react-highcharts,如果你引入这个包，并且你想使用滚动条来实现，要引入： var ReactHighstock = require(...

2018-08-21 16:12:50 1775

原创 react + redux 开发框架搭建超详细

最近周末有时间，想把加入前端一来一年时间对于react以及redux的理解记录下来，没有什么比一个产品更有说服力，在这里搭建一个简单的框架，供刚加入前端准备学习react的小白作为入门学习。项目代码，稍后会有升级。首先使用create-react-app要初始化一个脚手架，教程看这里。然后安装一个依赖包yarn add babel-plugin-transform-decorators...

2018-08-18 21:09:44 2803 1

原创运行 run eject命令之后报错

create-react-app这个脚手架很好，快速搭建一个react项目十分便利，但是这个里面也有很多坑，包括antd的引入，babel的配置，以及webpack的配置导出等。在这里我把我踩过的坑给大家分享一下，由于我写的代码也不够深入，所以可能不够全面，但是对于帮助一个初学者更快的了解项目肯定是十分有用的，我自己本身很笨，所以我写的比较啰嗦，方便自己遇到问题之后过来再温习一下，之前写过几篇文章...

2018-08-17 14:40:11 3267

原创 React项目报错 : Missing class properties transform

如果你报了这个错误，并且你使用的是create-react-app的脚手架，你一定是运行了yarn run eject这个命令。其实这个配置环境与我而言一直是一个比较玄幻的事情，一步只差就能让你的错误持续很久也解决不出来，目前的版本，推荐大家按照这个配置来搭建自己的项目，如果自己时间比较充足，也可以自己一步一步的试水。下面来说一下我的解决方式，几乎不怎么费力我就把问题锁定到了.babelr...

2018-08-17 14:33:32 4817

原创 Node报错: can't not set headers after they are sent to the client

今天在开发的时候，Node服务器端报了这个错误，根据他的提示不难发现，我在响应之后又去执行了设置响应头部的操作，导致了这一错误，下面我把代码截图一下，给大家做个参考：在代码执行一开始执行那几个设置type以及header的操作是可以的，不会报错。但是我这个操作，不知道什么原因，他在执行end()这个回调函数之前已经完成了response操作。所以，当我在里面的ctx.respons...

2018-08-16 11:38:59 2335

原创 koa2 : 返回Not Found

今天在写node服务器代码的时候，发现在浏览器中输入网址之后会显Not Found，没有任何其他内容，而且代码也没有报错，我在输出代码ctx.response.body之前也打印了相关信息，发现数据是成功的组织出来了，并且执行了这句话。这个时候考虑下原因，可能就是在输出这句话之前这个处理函数已经执行完成了，虽然我是在回调函数中执行的返回函数，但是他还是继续往下执行了。这里我...

2018-08-16 11:28:22 5866

原创 vscode 注释html代码

vscode是一个非常优秀的编辑器，其中有很多出色的功能为编程带来巨大的便捷。但是今天我使用的时候发现了一件事，就是我在注释代码的时候，居然用 //来帮我注释HTML代码，下面看一下效果：但是我看其他同事的电脑，他们都是可以正常生成{/**/}的注释，就像这个样子：这个我就很纳闷了，本着不撞南墙不回头的决心，我决定对比各个配置，来找出到底是哪里出问题了。我查找了首选项里面的所有...

2018-08-14 15:34:01 27191 2

原创从零开始搭建一个基于React框架的博客发布系统（SIX） Webpack编译配置

打包是门学问，用户浏览你的网站，你应该总是想用户查看不同的页面的同时去加载相应的资源，而不是用户访问你的网站你就一股脑的把服务端资源全部传送给用户，比如我要看第一篇博客，你凭什么把所有的博客全部发给用户，浪费流量倒是小事，但是网站资源过多，这就是性能的瓶颈。在config下新建blog.js文件，分别把每篇博客作为打包的入口。可以打印一下blog返回的内容。通过这个不难看出，他找到了博...

2018-06-29 10:54:51 792

原创从零开始搭建一个基于React框架的博客发布系统（五）展示博客内容

现在列表也有了，点击文章列表的缩略图之后，就要直接展示博客内容了。大家知道一篇博客如果过长的话，会有一个导航栏，帮住用户快速的定位到某个位置，这里也要加入这个功能。之前说过了，这里引入了react-markdown，还有这个代码高亮的插件prismjf，在Components中新建一个文件夹，用来保存markdown中可能存在的各种布局块，比如代码块，列表，字体等。可以通过自定义样式的方式添加...

2018-06-28 22:45:29 1367