阿里云+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

向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 参数

反编译微信小程序和解分包操作方法 下载文件： 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左右的可以不用管，是固定生产文件

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 年对 React 前端程序员的 10 个代码最佳实践建议 写 React 程序这么多年，有些人可能还没注意到如何去规范项目代码，接下来呢，给 10 个建议，希望能帮到你！1. 组织好项目目录结构在 React 项目中，没有强制规定目录的结构，但是有一个好的规范，可以让你更好地组织代码，也能更好的进行代码后期维护。这里有个建议：经常被重复利用的 Component（组件）要抽出来，放到一个同一个目录下。这样的代码好理解，好维护。2. 让你的组件（Component）更紧凑注意一个原则：不要重复，不要重复，不要重复！！！让你的组件足够小，不要包含多余的内容，这样好维护。如果组件有包含别的组件，应该抽出来的，让其变成一个单独的组件。注意下面的两个原则：重用性 - 重复利用你的代码可维护性 - 迟量小，不复杂3. 明智地命名你的组件选择一个好记，容易理解的名称来命名组件。用英文名，而且首字母大写，以跟 html 元素区别开来。4. 不要重复（Don’t Repeat Yourself）不要重复是作为程序员写代码的原则了，这个不限于前端。不重复写代码会僻免代码冗余，而且更好维护，不会出现，改动一个功能，要到处改相同代码的情况。在 React 中僻免重复，可以适当使用 高阶组件5. 管理好状态数据（state）不要把 state 一把梭，跨组件间传递数据会让代码变得难维护。可以适当使用 context 或 redux6. 在 JavaScript 中写样式（CSS)我们经常在 .css 或 .scss 文件中写样式，当项目变得很大时，对可读性不友好，而且难维护 。我们应该在组件中写样式，这样维护样式时，直接找到组件，很好维护。可以使用下面的流行库来解决：https://styled-components.com/https://emotion.sh/docs/introductionhttps://glamorous.rocks/7. 把 render 和 state 尽量分开我们经常需要区分出有状态的组件和无状态组件。我们经常会从远程 load 一些数据，load 的数据可以作为参数传给子组件，迟早做到分开。如下图：8. 多用类型检查系统多用 TypeScript 作为类型约束，在运行之前就可以僻免一些不必要的出错。当然学习 TypeScript 是要成本的，但是 TypeScript 确实是强有力的工具，不仅有代码提示，还能提前发现错误。9. 使用 ESLint 工具每个程序员有自己的代码风格，如果在团队中开发，不同的代码风格会让项目合作变得困难。如何保证统一的代码风格呢？就要用工具来约束。我们可以使用 ESLint 这样的工具。写测试代码单元测试或集成测试能够在模拟环境跑一遍代码，很好地代替肉测。大团队都有这个，可以更好的保持代码健全性。一处代码修改了，整个功能都要测试，肉测很难全面测试，这个时候需要用到代码测试，金融系统更需要这个。推荐的工具：jesthttp://cypress.io/好，希望对大家有所帮助！文章转至：http://react-china.org/t/topic/37372/1