挽枫blog-CSDN博客

原创 2021年9月学习记录和踩坑记录【手把手教你seo优化一周后你将收获seo搜索引擎排名前10】

前言傻逼总是喜欢折腾的，偶尔折腾一下这个折腾一下那个，最后什么也不精通，但什么都懂一点儿。最近呢，又喜欢上去打造个人品牌了。于是就用nextjs搭建了一个个人博客，从购买服务器到购买域名再到编写代码配置nginx做seo优化，这一套过程完全打通。上个月的时候我在百度搜索引擎检索挽枫blog的时候，完全检索不到我的博客，但是现在去检索的话，就一定能在搜索引擎返回的前十条记录里找到我的博客。读完这篇博客，你将收获如下能力：了解如何购买阿里云服务器并配置安全策略了解如何购买域名、备案以及绑定服务器了解r

2021-10-24 00:16:08 253

原创 2021年8月工作踩坑记录【适合web前端开发工程师阅读】

img标签的最佳实践<img src={imgPath} style={{objectFill:'fill'}} alt={imgTitle} onError={(e)=>{ e.target.onerror = null; e.target.src = staticImgPath;}} />onError实际生产环境中，可能存在img的src来自oss服务器上的一张图，由于某种原因获取不到，导致img无法加载出来，这个时候就会触发img的onError方法，通过该

2021-09-14 19:59:30 127

原创关于line-height以number设置值引发的css属性值的规范标准思考

line-height设置值的几种方式第一个normal默认值是22px第二个number最终结果是number16px第三个length固定值第四个 %当前百分比16px第五个inherit继承父元素的

2021-07-09 20:01:59 250

原创在react框架中实现打印过程中踩的坑

window.print()踩的坑window.print这种方法是最原生的方法，但是鉴于react是个单页应用，在打印完毕之后，会出现dom节点绑定的事件会被注销，以及页面会空白。读者可以自行将window.location.reload()注销掉，在调用打印方法之后，你会发现printtest失效。通过这种办法可以实现局部打印，你只需要把print绑定到你要打印的dom节点上即可。function App() { const printf = () => { const ol

2021-05-14 22:42:32 1437

原创 uni-app/js/小程序/生成支付二维码图片，类似于支付宝和微信商家码

业务需求一个电子商务公司需要一个支付功能，该支付功能通过微信扫码或者支付宝扫码实现的，并且该二维码商户可以下载下来，类似于微信商家码。如下图，鉴于公司相关的保密协议，我马赛克了头部和中间的商标相关说明文字。由于是用的uni-app，原生的js操作是无法实现的，因为安卓和ios是没有dom这个概念的也没有实现canvas的一些底层API，为此需要我们自己手撕uni-app的canvas相关的API。实现思路介绍上图呢是一个中间二维码，为了生成这个二维码，我才用了uni-app的第三方插件库“tki-q

2020-12-27 11:47:40 3121 3

原创 react服务端渲染next

一、配置next1、手动配置mkdir nextDemocd nextDemonpm init -y/** 配置package.json*/ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev" : "next" , "build" : " next build", "start" : "next start" }/** 启动命令*/npm

2020-10-31 13:38:24 261

原创如何理解JavaScript中的堆和栈

什么是堆和栈？堆和栈讲的是内存的分配和使用，与硬盘寄存器无关。堆用来存储引用类型数据比如Object，Function,new开头的包装类型,这样说也不准确，因为它的指针引用存到栈中。栈用来存储值类型的，比如Null,Number,String,Boolean,Symbole,Udefiend。二者区别栈内存是自动分配相对固定大小的内存空间，并由系统自动释放。方便操作和管理。堆内存是动态分配内存，内存大小不一，也不会自动释放。方便开辟新的内存空间。传值和传址var arry = [1,2,3

2020-10-31 13:36:53 99

原创 ant design文件上传与分页获取数据

前言以下是本人在利用react+antd结合开发web前端项目过程中遇到的问题的总结，还请大神不吝赐教，本人才刚入门。文件上传const uploadProps = { name: 'file', action: `${ServerIP}/web/uploadUrl`, headers: { authorization: 'authorization-text', '

2020-05-11 22:54:36 501

原创从零开始发布自己的npm依赖库

关于npmnpm是Node.js的软件包管理器。它创建于2009年，是一个开源项目，旨在帮助JavaScript开发人员轻松共享打包的代码模块。npm Registry是Node.js，前端Web应用程序，移动应用程序，机器人，路由器以及JavaScript社区无数其他需求的开源代码包的公共集合。npm是允许开发人员安装和发布这些软件包的命令行客户端。npm，Inc.是托管...

2020-02-26 13:13:28 358

原创深入理解JavaScript的对象

“对象”长什么样JavaScript对象中包含一系列属性，这些属性是无序的。每个属性都有一个字符串key和对应的value。验证：const obj = {};obj[1] = 0;obj["1"] = 10;console.log(obj)//{ '1': 10 }创建对象的方式字面量的形式创建const obj = { a:1, b:2,}创建对象ne...

2020-02-17 22:51:05 118

原创 JavaScript利用单例设计模式实现一个简单的模态框

首先介绍一下单例模式什么是单例模式？保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。为什么需要单例模式？一句话，优化代码。什么时候需要单例模式？1、有频繁实例化然后销毁的情况，也就是频繁的 new 对象，可以考虑单例模式；2、创建对象时耗时过多或者耗资源过多，但又经常用到的对象；3、频繁访问 IO 资源的对象，例如数据库连接池或访问本地文件；实例...

2020-02-15 22:54:17 247

原创前端如何实现文件下载，防止浏览器自动打开可预览文件

前端如何实现文件下载，防止浏览器自动打开可预览文件欢迎踩坑踩坑记录一**window.open()方法**踩坑记录二**html的a标签**踩坑记录三**window.location.href方法**解决问题**使用XMLHttpRequest对象**欢迎踩坑很高兴陌生的coder你能点进来，恭喜你，希望我的这篇博客能帮你解决浏览器自动预览txt，pdf等可预览文件，而不是下载这个文件。这篇...

2020-02-09 14:11:51 17372 31

原创【npm install -g cnpm --registry=https://registry.npm.taobao.org 】【cnpm install -g create-react-app】

配置react前端开发框架时踩过的坑下载淘宝的npm镜像时报权限错误：npm WARN checkPermissions Missing write access to /usr/local/lib/node_modulesnpm ERR! path /usr/local/lib/node_modulesnpm ERR! code EACCESnpm ERR! errno -13n...

2019-04-28 14:48:26 1747

原创 nextSibling和perviousSibling踩过的一些坑

目录菜鸟教程上对nextSibling、nextElementSibling、previousSibling、previousElementSibling的定义新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的Ka...

2019-04-07 16:46:06 744

qq_19313497的博客