- 博客(229)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 nginx的配置以及常见命令
Nginx是一个功能强大且灵活的服务器，适用于各种不同的应用场景。通过了解其配置文件的结构和常用命令，您可以更好地掌握如何管理和优化您的Nginx服务器。随着经验的积累，您将能够更深入地了解Nginx的高级配置和优化技巧，从而充分利用其性能优势。希望本文能为您提供一个关于Nginx配置与管理的良好起点。如果您有任何疑问或想要深入了解，请参考Nginx的官方文档，或加入相关技术社区进行交流。
2024-05-21 14:52:17
355
原创 docker的使用以及常用命令
Docker 是一个开源的应用容器引擎，它允许开发者将应用程序及其依赖打包成一个容器，然后运行在任何支持 Docker 的机器上。容器化的应用程序可以在开发、测试和生产环境中保持一致性，从而简化了部署和扩展过程。Docker 的使用远不止于此，但掌握这些基础命令已经足够您开始 Docker 之旅。随着实践的深入，您将逐渐发现 Docker 强大的功能和便捷之处。记得，实践是最好的学习方式，不要害怕尝试和犯错。
2024-05-20 12:01:13
263
原创 通过 Vue3 研究框架的设计思路
最近在学习vue3，突然想研究一下源码，所以写了这篇文章。作为框架设计者的话，一定要对框架的定位和方向拥有全局的把控，这样才能做好后续的模块设计和拆分。
2024-05-14 09:30:45
410
原创 css背景图片，在不同的分辨率下，显示不全
这种方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默认为auto，根据上面的理论计算得背景图片的高度为300px,但是盒子只有50px高，超出的部分隐藏，所以看两种写法的效果自然就不一样啦。background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)这种方式设置完背景图片的大小后，会完全铺满整个盒子，并且背景图片的比例会因此改变为2:1。
2024-05-13 09:53:10
305
原创 如何让 (a === 1 && a === 2 && a === 3) 返回 true（数据描述符与存取描述符的利用）
对于严格相等的情况，一般来说只能通过劫持数据的 getter 来进行操作，但是里面具体操作的方法在上面列举的就有很多。对于宽松相等的情况，除了劫持 getter 以外，因为宽松相等 JS 引擎的缘故，还能用 Object ， Proxy 对象的 valueOf 和 toString 方法达到目的。
2024-05-11 09:32:13
353
原创 5个常见的前端手写功能：浅拷贝与深拷贝、函数柯里化、数组扁平化、数组去重、手写类型判断函数
上述写法，总是要以空括号()结尾，于是再改进为隐式转换.toString写法，原理：当用 Function的值做计算的时候，会调用toString做隐式转换。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。从上面普通的递归函数中可以看出，其实就是对数组的每一项进行处理，那么其实也可以用reduce来实现数组的拼接，从而简化第一种方法的代码。思路：利用闭包和递归，如果参数为空，则判断递归结束，求和，返回结果。
2024-04-22 10:47:30
452
原创 5个常见的前端手写功能：New、call apply bind、防抖和节流、instanceof、ajax
onreadystatechange设置监听函数，当对象的readyState变为4的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是200则为成功，404或500为失败。思路：接受传入的context上下文，如果不传默认为window，将被调用的方法设置为上下文的属性，使用上下文对象来调用这个方法，删除新增属性，返回结果。如果绑定的是构造函数，还需要继承构造函数原型上的属性和方法，保证不丢失。可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
2024-04-17 15:22:29
535
1
原创 手机适配，在真机上适配正常，在pc端适配出现横向滚动条
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。
2024-04-15 11:50:12
787
原创 用零宽字符来隐藏代码
一种不可打印的Unicode字符，在浏览器等环境不可见，但是真是存在，获取字符串长度时也会占位置，表示某一种控制功能的字符。常见的零宽字符有：空格符：格式为U+null00B，用于较长字符的换行分隔；非断空格符：格式为U+FEFF，用于阻止特定位置的换行分隔；连字符：格式为U+null00D，用于阿拉伯文与印度语系等文字中，使不会发生连字的字符间产生连字效果；断字符：格式为U+200C，用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果；
2024-04-11 11:28:35
457
原创 JS面向对象——多态
重载函数是函数的一种特殊情况，为方便使用，C++允许在同一范围中声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数、类型或者顺序）必须不同，也就是说用同一个函数完成不同的功能。这就是重载函数。重载函数常用来实现功能类似而所处理的数据类型不同的问题。不能只有函数返回值类型不同。与之相似的函数重写：函数重写，也被称为覆盖，是指子类重新定义父类中有相同名称和参数的虚函数，主要在继承关系中出现。多态是同一个行为具有多个不同表现形式或形态的能力。在JAVA中，多态通过在子类中重写父类方法去实现。
2024-04-08 09:59:43
956
原创 Access to image at from origin has been blocked by CORS policy: No ‘Access-Control-Allow-Origin 此图片来
最近，在平台上发现很多图片无法展示，显示此图片来自微信公众平台，未经允许不可引用，分析原因后，发现是在发布文章时，富文本编辑器get图片，有跨域问题。在网上搜了很多方案，例如img.setAttribute(‘crossOrigin’, ‘anonymous’)，发现无效，于是想到代理服务器。思路：传递图片地址过去 让后端给转成buffer返回给前端，前端再上传二进制图片，到oss，获得链接。传过去图片地址，前端根据后端返回的blob，上传图片，最终完美解决。在前端富文本中进行配置。新建一个node项目。
2024-03-27 15:22:51
268
原创 如何在服务器上传/下载文件
打开xshell，输入：ssh [email protected]。如果提示需要yes，直接enter，最后会让输入密码。如果文件是放在E盘，在E盘cmd。
2024-03-27 10:14:00
392
原创 前端部署到服务器，使用xshell和xftp
最近在做一个项目的时候，需要搭建测试环境，所以记录一下部署过程，备忘。前台项目用到的是nuxt2，后台管理系统用的是vue2，后端用的是egg。因为我们的后端已经在服务器上设置Nginx了，所以我们只需要简单的上传文件既可。
2024-03-26 10:37:00
1258
原创 用xshell7连接服务器，读取后台日志
有时候前端需要读取一些后台日志，比如，有时候接一些验证码啥的或者有时候前后端不分离时，前端上线项目先讲一下怎么用密码方式连接服务器。
2024-03-07 09:56:09
763
原创 实现粘性布局position:sticky
对于粘性定位这个概念，很多人都没有注意到，所以写这篇文章总结一下。粘性定位它基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？
2024-03-07 09:54:14
1139
原创 Aliplayer is not defined
阿里云视频播放器 报错：Aliplayer is not defined最近发现一个如果在当前页面打开，用了阿里云视频播放器的页面，就会报上面的错。
2024-03-07 09:49:37
439
原创 WebSocket实现聊天
基于webSocket通信的库主要有 socket.io，SockJS，这次用的是 SockJS。这里我们使用sockjs-client、stomjs这两个模块，要实现webSocket通信，需要后台配合，也使用相应的模块。
2024-02-21 15:03:39
1416
原创 强缓存与协商缓存、缓存失效的问题、缓存nginx配置、缓存存在哪里
前端缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。今天我们来总结一下。分类：前端缓存分为强缓存和协商缓存两种。
2024-01-24 09:57:02
924
原创 vuex在页面刷新后数据丢失
我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。之前，这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢，而且效率不高。区别在于存储的有效期和作用域不同。
2024-01-23 11:30:58
433
原创 JavaScript中的错误处理：throw、try 和 catch、finally 语句
throw 语句抛出一个错误。当错误发生时， JS 会停止执行并抛出错误信息。throw 语句创建自定义错误。技术术语是： 抛出异常。// 抛出文本throw 500;// 抛出数字如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。try {
2024-01-23 11:20:01
518
原创 font-display的使用：控制字体加载和替换
在介绍 font-display 之前，先了解一下什么是 Web Fonts。在以前使用 CSS 指定字体时只能使用用户电脑本地上现有的字体，而由于每个用户电脑上的字体可能都不一样，所以能用的基本上就是操作系统内置的一些字体，例如微软雅黑，宋体，苹果苹方，这些也叫做安全字体（Web Safe Fonts）。* {后来，CSS 开始支持 @font-face 这个指令，可以加载自定义的字体文件，这个时候可以把字体随网站一起发布，用户在浏览网站的时候，会下载 @font-face 中指定的字体。
2024-01-16 17:05:06
747
原创 CSS中用border画三角形等图形
最近在做一个官网项目的时候，UI小姐姐设计了一些特殊图形，例如三角形，虽然element-ui是带有相应模板的，但是设计的和模版的不一样，因此研究了一下。三角形实际上是border的产物 我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色 那么你就会发现，三角来了。当然我们要的三角通常不是这样的，现在，我们只要让border-color和border-width搭配，就可以变换各种三角。至于正三角、不规则三角等，只要知道它的原理，都是可以画出来的。我们看到了三角，却拿不到三角？
2024-01-11 11:13:58
528
原创 router全局守卫beforeEach导致infinite redirect in navigation guard 问题
其实这算是 vue-router 的一个机制了，当我们在router.push( {‘name’ : ‘login’} ) 时又重新进入了我们当前的这个router-beforeEach事件里，此时又进行了token的判断，还是没有token，导致又走到了router.push({name:‘login’}) 里，然后就是一直死循环。所以在判断之前，加了下面判断next();return。
2023-12-19 17:54:41
1612
原创 a标签下载文件重命名失败download 无效
download可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，文件名不变。但是需要注意的是此方法只适用于小文件，对于大文件来说耗时太久，不适用。因为它相当于先把文件下载下来了，所以需要比较长时间，但是这段时间的等待，对于用户交互来说，那是很不友好的。，即可直接下载，而且对于一些txt、img、mp4等浏览器直接渲染的类型，也可以实现下载，而不是直接打开。
2023-12-18 09:52:41
1154
原创 用egg搭建后端管理服务端
在 package.json 的 script 里面添加把数据库生成 model 的命令（ -o 表示生成 models 的路径，-h 表示主机，-p 表示端口，-d 表示数据库， -u 表示用户名，-x 表示密码）此时 sequelize-cli 和相关的配置也都初始化好了，我们可以开始编写项目的第一个 Migration 文件来创建我们的一个 users 表了。执行之后，我们的数据库初始化就完成了。执行 migrate 进行数据库变更。
2023-12-12 14:17:03
551
原创 为什么Vue3的proxy需要Reflect呢
Proxy 和 Reflect 是相辅相成的，通过结合使用它们可以实现更灵活和强大的代理功能，并且使用 Reflect 可以更好地管理和执行底层操作。
2023-12-11 19:14:21
604
原创 实现chatgpt聊天机器人打字机效果
思路：markdown-it和highlight是为了解决打字机过程中，写代码时，没有高亮效果的，同时还解决了，在打字过程中，滚动条没有随内容而自动滚动的问题。
2023-12-01 09:59:35
615
原创 el-select多选multiple数据无法删除，回显成功，但无法编辑，选中和删除都没反应
回显的数据是从后台接口得来，由于数据层次太多，导致render函数没有自动更新；使用 @change = “$forceUpdate()” 强制刷新视图。
2023-11-29 14:17:43
1285
3
原创 Egg.js的方法扩展
之前通过上下文来获取传递参数时，get方法请求和post方法请求的获取方式是不同的，我们编写的方法可以让这两个请求获取参数的方法统一化,都用params( )方法。按照Egg的约定，扩展的文件夹和文件的名字必须是固定的。Egg.js 对 Request 的扩展也需要在/app/extend文件夹下，新建一个request.js文件，然后在这个文件里写扩展属性。和上一个是差不多的, 需要设置的方法以set关键字开头，然后用this.set( )就可以设置返回的token了。eggjs的方法的扩展和编写。
2023-11-29 09:40:46
981
原创 Egg.js中Cookie和Session
HTTP请求是无状态的，但是在开发时，有些情况是需要知道请求的人是谁的。ctx.cookies.set( ) 方法是有三个参数的，第一个参数是key，第二个参数是value，第三个参数就可以进行配置。比如通过JS的方式document.cookie获取Cookie是不能获取的(需要在浏览器的控制台输入获取)。直接通过ctx.cookies.get( )方法获取，获取的是undefind，也就是无法获取的。Egg是对Koa的二次封装，所以中间件这部分和Koa框架是一样的，也追寻洋葱圈模型。
2023-11-28 11:39:30
613
原创 Egg.js 中 Service 的使用
打开/app/controller/home.js文件下，新建一个testGetGirl( )方法，然后新增好路由，这样id即可被数据库得到。配置静态资源：/app/public目录下，可以直接访问，不需配置路由，直接显示文件内容，因为Egg使用了egg-static插件。Service是用来编写和数据库直接交互的业务逻辑代码。简单来说，就是把业务逻辑代码进一步细化和分类，所以和数据库交互的代码都放到Service中。只要是和数据库的交互操作，都写在Service里，用了Egg框架，就要遵守它的约定。
2023-11-13 14:12:23
187
原创 Egg.js 中 Controller 的使用
什么是mvc，这个概念，我相信绝大部分人肯定是了解的。MVC是模型（model）- 视图（view）- 控制器（controller）的缩写。视图为用户展示数据控制器用来处理用户输入模型用户数据处理ps:这一整套流程实际上是一个闭环，你可以这么去理解，就是用户输入给控制器，然后控制器将用户输入的指令和数据传递给业务组件，业务组件进行业务逻辑判断，数据库存取，将要展示的数据返回到视图，用户得到了反馈，在进行下一步的操作。restful风格的url可以简化路由文件。
2023-10-30 10:15:39
231
原创 3分钟了解 egg.js
npm i // 安装依赖app/router.js 用于配置 URL 路由规则，具体参见 Router。app/controller/** 用于解析用户的输入，处理后返回相应的结果，具体参见 Controller。app/service/** 用于编写业务逻辑层，可选，建议使用，具体参见 Service。app/middleware/** 用于编写中间件，可选，具体参见 Middleware。app/public/** 用于放置静态资源，可选，具体参见内置插件 egg-static。
2023-10-17 16:35:48
1103
原创 如何使用jest
"moduleFileExtensions": [ //不需要配置"js","json",// 告诉 Jest 处理 `*.vue` 文件"vue"],testMatch: [ //test文件所在位置],"transform": { //不需要配置// 用 `vue-jest` 处理 `*.vue` 文件// 用 `babel-jest` 处理 js},"moduleNameMapper": { //不需要配置},
2023-10-09 17:11:07
146
原创 浅析前端单元测试
为检测特定的目标是否符合标准而采用专用的工具或者方法进行验证，并最终得出特定的结果。对于前端开发过程来说，这里的特定目标就是指我们写的代码，通过写的测试用例检查的结果展示测试是否通过或者给出测试报告，这样才能方便问题的排查和后期的修正对于给定的输入，单元测试检查结果。通过及早发现问题并避免 bug 回归，它可以帮助我们确保代码的各个部分按预期工作。前端可以写单元测试吗？答案是前端可以写单元测试，但是意义不大。前端项目中如果有一些基础类、方法，可以编写测试。但是组件、视图不太需要，性价比太低。
2023-10-07 18:20:30
654
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人