分类 react 下的文章 - Elysian的日常

2026-06-04

2026年06月04日
3 阅读
0 评论
0 点赞

2025-03-31

阿里云+DDNS-GO+宝塔反向代理内网穿透后使用域名无端口访问内网保姆级教程第1章需求的简介和应用功能的概述1.1 简介由于公司没有允许员工使用云服务，同时又需要远程存储家中监控摄像头的数据，笔者决定购买一台NAS设备来解决生活和工作上的问题。在经过多方考虑后，笔者选择了绿联NAS，因为它非常适合初学者，而且自带docker，可扩展性非常高。但是，想要玩转NAS，必须实现内网穿透。如果不进行内网穿透，那么即使购买了NAS，也无法实现远程访问。由于笔者家里的宽带没有公网IP，所以只能采用DDNS-TO进行内网穿透，但它还是存在一些局限性的，例如连接端口数量上限、带宽容量上限等。此外，如果安装应用程序，还需要在DDNS-TO上添加映射，操作较为繁琐。然而，DDNS-TO也有其优点，例如支持HTTPS方式访问，安装配置简单等。为了替代DDNS-TO的缺陷并保留其优点，笔者通过学习，决定使用 DDNS-GO、阿里云、NginxWebUI、cloudflare组合来实现我的需求。1.2 应用功能概述为了替换DDNS-TO的缺点，笔者决定使用DDNS-GO、阿里云、NginxWebUI下面简单概述这些工具各自的功能和解决的问题。1.2.1 阿里云阿里云提供了域名服务，可以申请短期免费或长期付费的域名，并且没有连接端口数量上限和带宽容量上限的限制。此外，用户还可以进行个性化自定义，非常方便。同时，阿里云还提供了API密钥（Accesskey id和Accesskey Secret）以及家庭局域网动态公网IP地址与域名的绑定，在NAS上安装应用程序时，只需要记住应用映射的域名即可。1.2.2 DDNS-GODDNS-GO是一款非常实用的内网穿透工具，仅限于无固定IPV4地址和IPV6地址，但有真实动态IPV4地址的内网环境。如果用户拥有固定IPV6或固定IPV4中的其中一种公网IP地址，则不必关注该工具，也无需安装。需要注意的是，获取公网IP需要将光猫改成桥接，而光猫如何改桥接及光猫开通IPV6因运营商而异，用户需要自行百度或咨询运营商的工作人员。使用DDNS-GO做内网穿透前，必须要确定公网IPV4地址是否真实有效，否则可能会出现问题。1.2.3 NginxWebUINginxWebUI是一款管理Nginx服务器的Web界面，支持在Nginx中添加和删除域名、配置文件等操作。它可以通过docker安装在绿联NAS上，方便用户进行管理。2.访问你的路由器，找到上网设置，查看你路由器上的公网IP 正常路由器地址：192.168.2.1 192.168.0.1 192.168.31.13.如果以上两个公网IP是一致的，这意味着公网动态IPV4地址是真实有效的。如果不一致，则说明当前没有公网IP地址。若出现后者，建议直接联系宽带运营商开通动态IPV4或提供固定IPV6地址。如果这些方式都无法满足需求，可以考虑更换宽带运营商或使用其他内网穿透方式（例如DDNS-TO）。1.2.3 NginxWebUINginxWebUI是一款非常实用的工具，它可以实现反向代理，从而访问内网NAS上安装的应用程序，在访问内网应用之前，需要先经过Nginx进行代理。此外，NginxWebUI还支持根据域名生成免费的SSL证书，并将http请求转化为https请求。1.2.4 cloudflarecloudflare是一个全球性的CDN网络，提供了很多有用的功能，例如网站加速、防火墙等。通过将自己的域名指向cloudflare，用户可以隐藏NAS真实的IP地址，避免黑客攻击。同时，它还能够转发URL路径重定向，使用户只需使用域名访问而不用带上特定的端口号。第2章各应用的安装配置2.1 阿里云的注册和域名申请2.1.1 注册为了使用阿里云提供的服务，首先需要注册一个账户。如果您已经拥有阿里云账户，则可以直接跳过这一步。在访问阿里云的官方网站后，点击“登录/注册”，按照指示填写信息并完成注册。2.1.2 域名申请在注册成功之后，可以开始申请域名。这里推荐申请一个.cn或.com的域名，因为这两种域名是最通用的。在阿里云的控制台中，选择“域名”选项卡，然后按照页面上的提示申请域名。当您完成付款后，就可以获得您自己的域名了。2.2 DDNS-GO的配置2.2.1 安装DDNS-GODDNS-GO可以通过绿联NAS上的docker进行安装，只需在终端中输入相应的命令即可。2.2.2 DDNS-GO的配置在安装完成后，需要进行一些配置工作。首先，在阿里云的控制台中创建一对API密钥，并将其保存起来。然后，在DDNS-GO的设置中输入相关信息，例如域名、密钥等。最后，启动DDNS-GO，测试与阿里云的连接是否正常。阿里云访问地址：https://www.aliyun.com，支持多种注册方式，自行注册。2.1.2 申请阿里云 API 的密钥A.注册并登录阿里云后，双击网站首页右上角的“控制台“并进入。B.设置权限模式C.在”AccessKey管理”界面创建AccessKeyD.AccessKey ID和AccessKey Secret申请成功后复制到本地保存，后面安装完DDNS-GO后做动态域名绑定时要用到2.1.3 注册域名 (有域名的可略过，没域名的买个最便宜的后缀即可)A.在阿里云首页双击搜索图标，选择域名搜索使用域名需要进行实名认证，具体操作请根据网站提示完成。注册时选择个人使用即可，不需要进行备案。2.1.4 添加二级域名在申请一级域名之后，我们需要再添加一个前缀来变成二级域名。例如，如果一级域名是“huixx.com”，那么可以加上前缀“www”来变成二级域名“www.huixx.cc”。理论上，只要前缀不同，我们就可以拥有无数个二级域名。A. 申请一级域名后，需要在阿里云的控制台中添加相应的记录来创建二级域名。2.2 DDNS-GO的安装和配置2.2.1 安装配置1.wget https://github.com/jeessy2/ddns-go/releases/download/v6.6.2/ddns-go_6.6.2_linux_x86_64.tar.gz2.tar-zxvf ddns-go_6.6.2_linux_x86_64.tar.gz3.cd ddns-go_6.6.2_linux_x86_644.sudo ./ddns-go -s install启动ddns-gosystemctl start ddns-go设置开机自启systemctl enable ddns-go查看运行状态systemctl status ddns-go.service9.通过宿主机访问浏览器页面进行配置（如果是gui的安装可以直接浏览器访问127.0.0.1:9876）2.2.1 配置DDNS-go （安装机器：192.168.2.x:9876）2.2.3 验证内网穿透A.登录阿里云上查看二级域名的记录值（绑定的动态公网IP）是否正确，是否正常B.将pve的8006端口在路由器里做端口映射C.在公网上用浏览器中域名+端口（例如http://www.huixx.cc:8006）的方式访问pve。如果能正常访问则说明内网穿透鼓捣成功了。为了验证的严谨性，测试终端连接的公网和pve接入的公网的不要不要在同一个局域网内通过以上步骤的设置基本解决了pve的内网穿透需求。通过在路由器中映射不同的端口，来开通NAS上安装应用的公网访问限制。但仍然有些小瑕疵，例如：1.使用的是http协议明文访问，未加密。终极目标是使用https协议加密访问。2.访问时需要带端口，不像正规的网站,并且不同的应用要映射不同的端口，不便于记忆。目标是只使用域名访问，例如：“https://www.huixx.com”。3.做端口映射还要登录路由器。目标是使用软件程序代替路由器来做映射。要解决以上问题，需要继续执行后面的工作。原文链接：https://blog.csdn.net/samly6/article/details/139878859

2025年03月31日
105 阅读
0 评论
0 点赞

2023-04-24

向ChatGPT提问要素向ChatGPT提问要素https://chat1.aichatos.com/① 语言简洁明了，指令清晰以李白的风格写一首古诗以李白的风格写一首古诗，描绘长沙天气多变② 问题聚焦我要买一台车我想买一辆车，预算30万，要国产新能源的③ 同一个话题内容尽量相关、换话题要建立新对话（清除上文感染）④ 给GPT一个身份你是一个管理者，马上到月底了，你们团队的月计划还没完成，你怎么办你是一个培训讲师，请帮我向大家介绍一下ChatGPT我希望你担任前端开发人员。您应该将文件合并到单个 index.html 文件中，别无其他。不要写解释。我的第一个请求是“写一个网页程序，黑色背景，模拟星星在夜空闪烁，要很多6px大小的五角星，每个五角星的颜色要随机”⑤ 指定提示信息明确风格用小红书的风格回答这个问题，”豆腐脑是吃甜的还是咸的“，要有emoji表情明确信息品牌名称：欧派家居，品牌成立时间：1994年，品牌定位：一线品牌、中国最有价值品牌500强，请以上述信息写一篇800字的品牌招商文章⑥ 扩散思维扮演一个母老虎和我对话第一步：请问中文语境下，夫妻关系中的母老虎是什么意思？第二步：按GPT描述的母老虎形象复制到对话里面，让GPT扮演第三步：持续带入，引导；比如可以让GPT加上表情、动作等描述让GPT提问，你来回答假装你是一位教中国古诗的老师，我是你的学生，现在课程完毕了，你需要给我出题目让我解答，然后对我的解答做出点评，现在请开始出第一道题让它当工具程序解释器输入php语句，它会给你发送执行结果统计/辨别文本某个词语出现多少次，手机号码筛选等等技巧学习地址https://www.zhihu.com/question/584402332/answer/2956335225https://ai.sph.net/chatgpt-prompthttps://www.aishort.top/StableDiffusionhttp://192.168.1.247:7860/# 羊毛衫玩偶chilloutmixNiPruned.Tw1O.safetensors 基础模型Fantz cartoon monster cat wearing cardigan, Impasto,massurrealism , backlight, voxel art ,psychedelic 提示词bad-picture-chill-75v, text, bad anatomy, crop frame, doubling figures,human 反提示词euler a step 30 系数9 LoRA funnyCreatures 1 参数# 国画美女anything-v4.5 基础模型(masterpiece),best quality,good anatomy, shuimobysim,(1 girl:1), (upper body),(smile),short hair,(hanfu),(ecchi0.5), (trees:0.5), (flowers:0.6) ,(wooden house:0.2),(bamboo forest:0.2),(creek:0.2),(river:0.2) 提示词nsfw,mutated hands, (poorly drawn hands:1.331),(fused fingers:1.61051), (too many fingers:1.61051), bad hands, missing fingers, extra digit, (worst quality:2), (low quality:2), (normal quality:2),bad face,bad hands,bad anatomy, 反提示词DPM++ SDE Karras LoRA Moxin 0.5 Moxin_Shuke 0.8 系数 5 step 28 参数

2023年04月24日
636 阅读
0 评论
0 点赞

2021-11-27

反编译微信小程序和解分包操作方法下载文件： wxappUnpacker-master输入: node wuWxapkg.js _1514036652_28.wxapkg 解包,其中_1514036652_28.wxapkg是包名.如提示:检测到此包是分包后的子包, 请通过 -s 参数指定存放路径后重试,就看其他包里文件大小最大的拿来先解,文件大的一般是主包下面进入解分包，命令: node wuWxapkg.js _19871000_28.wxapkg -s=../_1514036652_28就这样把所有的分包一个一个的解包,解分包无先后顺序之分,全部解包完成后,把分包里的内容按照目录文件结构手动复制到主包里覆盖,解包就完成了.wxapkg文件位置，用模拟器，开root模式，使用微信打开小程序后，在“根目录datadatacom.tencent.mmMicroMsg一堆很长的文件夹appbrandpkg”PS：其中一个大于14M左右的可以不用管，是固定生产文件

2021年11月27日
408 阅读
0 评论
0 点赞

2021-10-22

Antd Upload 组件上传文件接收数据流并下载一、应用场景主要是需要上传一个PDF文件，然后服务器会针对PDF文件，转换成WORD文件，然后返回WORD文件的下载流。二、解决方法1、默认情况下Antd的Upload组件上传文件后接收服务端返回的字符串，再返回给fileList，如果服务端返回二进制文件流，则Upload组件接收的也是二进制流的乱码字符串。2、JS接收流文件然后提供下载，主流是使用 blob对象来将流转变为blob地址，然后提供下载。3、Ajax默认情况下，如果不设置responseType为blob则返回的内容就是字符串，但是直接返回的二进制流，转换成 blob对象会造成数据损坏，查了资料说是utf8编码等之类的问题引起的，所以就需要设置 responseType='blob' 或者是 'arraybuffer' 然后转换为 blob对象。4、antd的Upload组件，正好提供了一个 customRequest 属性可以自定义ajax请求。基于上述4点，我们只需要修改组件的 customRequest属性，就可以实现应用场景具体customRequest属性代码如下：customRequest(option) { const getError = (option, xhr) => { var msg = "cannot ".concat(option.method, " ").concat(option.action, " ").concat(xhr.status, "'"); var err = new Error(msg); err.status = xhr.status; err.method = option.method; err.url = option.action; return err; } const getBody = (xhr) => { debugger; if (xhr.responseType && xhr.responseType !== 'text') { return xhr.response; } var text = xhr.responseText || xhr.response; if (!text) { return text; } try { return JSON.parse(text); } catch (e) { return text; } } // eslint-disable-next-line no-undef var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; if (option.onProgress && xhr.upload) { xhr.upload.onprogress = function progress(e) { if (e.total > 0) { e.percent = e.loaded / e.total * 100; } option.onProgress(e); }; } // eslint-disable-next-line no-undef var formData = new FormData(); if (option.data) { Object.keys(option.data).forEach(function (key) { var value = option.data[key]; // support key-value array data if (Array.isArray(value)) { value.forEach(function (item) { // { list: [ 11, 22 ] } // formData.append('list[]', 11); formData.append("".concat(key, "[]"), item); }); return; } formData.append(key, option.data[key]); }); } // eslint-disable-next-line no-undef if (option.file instanceof Blob) { formData.append(option.filename, option.file, option.file.name); } else { formData.append(option.filename, option.file); } xhr.onerror = function error(e) { option.onError(e); }; xhr.onload = function onload() { // allow success when 2xx status // see https://github.com/react-component/upload/issues/34 if (xhr.status < 200 || xhr.status >= 300) { return option.onError(getError(option, xhr), getBody(xhr)); } return option.onSuccess(getBody(xhr), xhr); }; xhr.open(option.method, option.action, true); // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179 if (option.withCredentials && 'withCredentials' in xhr) { xhr.withCredentials = true; } var headers = option.headers || {}; // when set headers['X-Requested-With'] = null , can close default XHR header // see https://github.com/react-component/upload/issues/33 if (headers['X-Requested-With'] !== null) { xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); } Object.keys(headers).forEach(function (h) { if (headers[h] !== null) { xhr.setRequestHeader(h, headers[h]); } }); xhr.send(formData); return { abort: function abort() { xhr.abort(); } }; },修改上述属性后，则onChange等方法接收到的file或者fileList中的response则变为blob对象，然后将blob对象输出url放到对应的下载标签中就可以了。

2021年10月22日
1,407 阅读
0 评论
0 点赞