前言

Web开发时偶尔会碰到这种错误, 主要是上一次服务未关闭导致的

解决方案

Windows平台

1. 打开cmd命令窗口,查看被占用端口号所对应的进程

   1	netstat -aon|findstr "端口号"

2. 终止对应进程

   1	taskkill /pid 这里填查询到的pid /f

Mac平台

1. 查看被占用端口号所对应的进程

   1	lsof -i:端口号

   

2. 终止对应进程

   1

   kill PID

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

在ChatGPT诞生之前, 如果我们想获取信息一般是通过搜索引擎, 在鱼龙混杂的网页中筛选相对有用的信息, 光是信息筛选甄别就极其消耗时间和脑力

ChatGPT出来后, 大大地简化了这一操作, 它可以帮我们进行大部分的垃圾信息过滤, 从而使得知识的获取变得简单直接

以前的操作流程:

关键词搜索👉鱼龙混杂的信息👉筛选得到各种碎片化的可用信息👉对得到的碎片信息进行可用性验证👉总结归纳

借助ChatGPT的操作流程:

关键词询问👉得到相对合理可靠的信息👉可用性验证->总结归纳

尝试

1. 周杰伦的主持水平如何😀

   

2. 乱码三千这个博客你觉得怎么样👀

   

3. 你觉得歌手十二越写的歌如何🌹

   

4. 给码box这个平台写一句吸引人的宣传语🤩

   

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

请求传递参数的方式

POST 请求传递参数有两种方式：

1. 将数据放在请求体（body）中

   一般用form-urlencoded格式进行编码传递，例如：

   1	name=value&age=20&gender=male

   这种方式的优点是可以传递大量的数据，安全性较高，传递的数据类型也比较灵活，可以传递文本、文件等。

2. 将数据放在 URL 查询字符串中

   例如：

   1	https://www.example.com?name=value&age=20&gender=male

   这种方式的优点是简单易用，实现比较容易，不需要对数据进行编码，对于一些小规模数据传输比较恰当。

以上两种方式在传递数据时都可能存在数据篡改、伪造等问题。一些安全敏感的数据（如密码等）应该采用更安全的传输方式（如加密传输）。

使用请求体传输，数据会按照具体的编码方式进行编码，而使用查询字符串进行传输，数据会经过 URL编码处理，因为URL中只能使用一部分 ASCII 字符，其他字符需要进行转义。

编码方式

POST常用的编码方式有三种, 分别为:

1. application/x-www-form-urlencoded

   这是最常用的编码方式，也是默认的编码方式。它将请求参数编码成 key1=value1&key2=value2 的形式，并将每个键值对用 & 连接起来。参数会被URL 编码，以便在传输时能够正确地处理特殊字符，例如空格会被转换为加号 (+)。

2. multipart/form-data

   这种编码方式适用于上传文件或二进制数据。它将请求参数分割成多个部分，每个部分都有一个Content-Disposition 头部和一个Content-Type 头部来描述它的内容类型。这个 Content-Disposition 通常包含一个表单字段的名称和一些其他的元数据，例如上传文件的名称。

3. application/json

   这种编码方式适用于传输 JSON格式的数据。JSON格式是一种轻量且易于使用的数据表示格式，广泛用于 Web 应用程序中。请求参数将被作为 JSON对象发送，它们必须以正确的 JSON格式进行编码。 需要根据具体的场景和需求选择合适的编码方式。

注意: 使用查询字符串进行传输的数据只能使用application/x-www-form-urlencoded的编码格式,而使用请求体传输则可以使用各种编码格式

GET请求和POST请求的区别

POST 请求和 GET 请求是HTTP 协议中常用的两种请求方法，它们之间的区别如下：

1. 参数传递方式：GET请求只能通过 URL 中的查询字符串来传递参数，而 POST 请求不仅可以通过URL还可以将参数信息放在请求主体中。

2. 请求参数长度：GET 请求传递参数的长度是有限制的，具体取决于浏览器和 Web 服务器的限制，而 POST 请求则没有这些限制。

3. 对服务器数据的影响：GET请求不会改变服务器上的资源状态，只是请求该资源的数据，而 POST 请求可能会改变服务器上的资源状态，如在服务器上创建新的资源或更新已有资源。

4. 安全性：GET请求会将参数暴露在 URL 中，比较容易被追踪和窃取，而 POST 请求的参数则放在请求主体中，安全性比 GET请求更高。

5. 使用场景：GET 请求通常用于请求数据，如获取某个页面的内容，而 POST请求用于提交数据，如提交表单信息。

总的来说，GET 请求适合请求数据，而 POST请求适合提交数据。需要根据具体的业务场景和需求选择合适的请求方法。

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

开源大轮子聚集地

1. Dromara社区

   官网: 点击进入

   

2. Gitee GVP

   官网: 点击进入

   

3. Github 中文社区排行榜

   官网: 点击进入

   

   

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

curl是一个命令行下工作的文件传输工具, 支持网络请求和文件的上传下载, 非常强大, 很多操作系统默认安装了curl, 比如macOS,Windows, Linux等

当我们在使用无界面的操作系统时, 如果想要模拟网络请求, 此时没有浏览器也没有Postman, 那么curl这个工具就能派上大用场

网络请求

1. GET请求

   1	curl -X GET http://baidu.com

   curl默认是GET请求, 所以可以简写成:

   1	curl http://baidu.com

2. POST请求

   1	curl -X POST http://baidu.com

   同理, 如果是PUT, DELETE请求, 只需修改-X后面的参数即可

3. 指定请求头

   使用-H指令, 注意大小写:

   1	curl -X POST -H "Accept:*/*" http://baidu.con

   如果需要指定多个请求头, 那么需要填多次-H指令, 如:

   1	curl -X POST -H "Accept:*/*" -H "Content-Type:multipart/form-data" http://baidu.com

4. 请求时携带请求参数

   使用-d指令, 注意大小写:

   1	curl -X POST -d "password=11111111&username=3333" http://baidu.con

   默认是以Content-Type:application/x-www-form-urlencoded的形式对参数进行编码

   如果我们需要携带json格式的数据, 那么我们指定相应请求头即可, 如下:

   1	curl -X POST -H "Content-Type:application/json" -d '{"content":"发送一条消息"}' http://baidu.con

5. 文件上传

   修改Content-Type为multipart/form-data, 使用-F指令指定需要上传的文件,注意大小写:

   1	curl -X POST -H "Content-Type:multipart/form-data" -F "file=@文件名称.png" http://baidu.com

6. 文件下载

   使用-o指令保存请求到的文件, 注意大小写:

   1	curl -o "baidu.html" http://www.baidu.com/index.html

   如果使用大写的-O, 同样也能下载, 它会将URL 的最后部分当作文件名, 此时URL`必须写具体, 否则报错:

   1	curl -O http://www.baidu.com/index.html

7. 断点续传

   使用-C指令, 一般我们会配合文件下载一起使用:

   1	curl -C -o "baidu.html" http://www.baidu.com/index.html

8. 请求跟随服务器的重定向

   使用-L指令, 一般我们会配合文件下载一起使用:

   1	curl -L -o "baidu.html" http://www.baidu.com/index.html

参考资料

Curl Cookbook

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

工具推荐

1. Nginx可视化配置工具

   官网: 点击进入

   

2. 可视化表单生成工具

   官网: 点击进入

   

   

3. 正则可视化工具

   官网: 点击进入

   

4. CSS动画可视化

   官网: 点击进入

   

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

总所周知，Chat GPT不管是注册、登录还是使用，都需要国外科学环境，且国内、香港、俄罗斯等IP无法使用，本文介绍使用Vercel+Github免费部署国内可访问的ChatGPT网站，APi采用Chat GPT3.5版本

工具介绍

Chat GPT API KEY（SK） 获取方法：获取ChatGPT账号的API KEY(sk)

Github账号

Github仓库，可参考本人仓库：Github仓库

vercel账号，可使用Github直接登录

Fork仓库

登录自己的Github账号，进入Github仓库，选择右上角第二个图标Fork

跳转后的页面可自行修改仓库名称，建议不修改

直接点击左下角Authorize Vercel

使用Vercel部署

入口：https://vercel.com/signup

登录前，请先注册，本次教程教学内容为注册

进入页面后，选择第一个Github账号登录

点击右下角Authorize Vercel

等待一会后，跳转至Vercel主页

选择Select a Git Namespace

在下拉框中选择Add GitHub Account

再次跳转至Github页面

点击左下角Install进行授权安装

等待授权完成，自动跳转至Vercel页面，在此可看到Github中的仓库

点击右边Import，进行部署

注：在此页面不建议修改其他参数，只需修改环境变量即可

点击Environment Variables

第一个空填入OPENAI_API_KEY

第二个空填入你的ChatGPT API KEY（sk-开头）

点击右边Add按钮

点击底部Deploy

进入这个页面即表明正在部署当中，一般耗时3-5分钟

部署成功后自动跳转至成功页面

点击右上角黑色Continue to Dashboard按钮

点击中间DOMAINS中的URL

即可跳转至你个人所有的Chat GPT国内版

自此，部署步骤全部完成，后续更新将Vercel域名更换为自有域名~

本文转载自: 速龙博客

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

目前，我的 个人网站 是基于 VuePress 搭建的，其中 VuePress 内置的搜索只会提取文档的标题（h1、h2、h3）构建搜索索引，我个人觉得不太好用，因此想借助第三方提供的免费搜索服务 Algolia DocSearch 来实现个人网站的全文搜索。

Algolia

Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。

VuePress 的官方文档就是使用的 Algolia 搜索，使用 Algolia 搜索最大的好处就是方便，它会自动爬取网站的页面内容并构建索引，你只用申请一个 Algolia 服务，在网站上添加一些代码，就像添加统计代码一样，然后就可以实现一个全文搜索功能。

Algolia DocSearch

Algolia DocSearch 是 Algolia 提供的自动化的全文搜索服务，DocSearch 会定时爬取指定网站（通常就是我们的文档网站）上的内容，自动构建搜索索引，不需要繁琐的配置，操作简单，用户只需要用相关的 API 直接调用就行了。

基本原理

Algolia 服务器会 定期抓取 我们指定的 文档地址 中的内容进行分析并 建立索引，这样在网站搜索框中输入关键词后，前端会调用 Algolia DocSearch 的接口并显示搜索结果。这些请求、结果显示的相关逻辑都封装好了，我们要做的就是按要求插入代码、配置好网站样式以及搜索框。

备注：根据 Algolia DocSearch 的官方文档，默认情况下它通常一周爬取一次网站内容，用户也可自行触发爬取，详见：DocSearch 的快速描述。

使用要求

Algolia DocSearch 提供的免费服务是需要申请的，当我们的网站满足下列条件时，Algolia 那边的工作人员才会让我们的申请通过：

我们必须是云文档网站的 所有者，网站必须是 公开的。
网站内容必须是 开源项目的技术文档 或 技术博客。
网站申请服务时必须有 完整稳定的设计和内容，即确认网站做好生产准备。

实现全文搜索

申请Algolia DocSearch服务

前往 Algolia DocSearch Apply 网站，填写网站地址、邮箱、仓库地址等信息，然后提交申请。

备注：这里填写的网站地址必须是公开的、且设计完整、内容稳定。如果网站还处于测试阶段，申请通过的概率很小。

回复确认邮件

申请通过后，Algolia DocSearch 官方会发送确认邮件到上一个步骤中填写的邮箱，收到后需要回复一下这个网站是我们负责开发维护的，并且可以修改网站代码。

回复邮件内容：

1
2
3

Thanks!

I am the maintatiner of the website, I can modify the code.

启动搜索服务

通过确认后，Algolia DocSearch 会再发一封使用邮件，其中包含 appId、apiKey 和 indexName，用于在网站生成框架中配置使用，例如在 VuePress 中配置如下，其他框架类似：

1
2
3
4
5
6
7
8
9

module.exports = {
    themeConfig: {
        algolia: {
            appId: '请看邮件',
            apiKey: '请看邮件',
            indexName: '请看邮件'
        }
    }
}

并且该邮件还会提供接受邀请的链接，前往该链接重新设置密码后（账号是申请时填的邮箱），即可登录 Algolia。

后台管理数据

申请 Algolia DocSearch 成功后，我们也可以前往 Algolia 管理自己的后台数据。步骤如下：

步骤一：登录账号后，点击右上角的 “Dashboard” 按钮前往后台。

步骤二：点击左侧列表里的”Search”，可以查看对应的 “indexName” 数据，如果 “Browse” 里面没有显示数据，那么说明 DocSearch 的爬虫有点问题，导致没有生成对应的 Records：

步骤三：前往 Algolia 的爬虫后台，同样需要登录。在首页进入我们需要修改的爬虫，可以看到右侧的 Records 数据为 0 条，很明显爬虫有问题：

步骤四：点击左侧菜单中的”Editor”查看并编辑爬虫代码，注意看代码中的 pathsToMatch 路径，很明显是不对的，后面多了个 docs，将它改成正确的网站路径 https://rainmic1019.github.io/**：

修改前：

1
2
3
4
5
6
7
8

new Crawler({
  actions: [{
      ...
      pathsToMatch: ["https://rainmic1019.github.io/docs/**"],
      ...
    }],
  ...
});

修改后：

1
2
3
4
5
6
7
8

new Crawler({
  actions: [{
      ...
      pathsToMatch: ["https://rainmic1019.github.io/**"],
      ...
    }],
  ...
});

步骤五：修改完成后，进行测试，如果能成功提取到数据则表示没问题，点击右上角的”Save”按钮保存代码：

步骤六：切换回”Overview”，点击右上角的 “Restart crawling” 重新爬取数据即可。

添加CSS和JavaScript

如果使用的是 VuePress 的默认主题，那么按照 VuePress 官方文档中的方法直接配置好 appId、apiKey 和 indexName 就可以了。但在其他主题中，比如 vuepress-theme-rec，它是自己实现的搜索框，所以按 VuePress 官方文档进行配置是没有效果的，此时就需要按照 Algolia 发给我们的邮件里的方法，给网站添加 CSS 和 JavaScript，然后在加载完毕的时候调用提供的 API。

修改config.js

.vuepress/config.js 是 VuePress 中最重要的文件，它是 VuePress 项目的配置文件入口，导出一个 JavaScript 对象，其中设置 head 属性可以指定额外需要被注入到当前页面的 HTML 中的标签，每个标签都可以以 [tagName, { attrName: attrValue }, innerHTML?] 的格式指定，比如这里我们把 Algolia 邮件中指定的 HTML 标记添加进去：

1
2
3
4
5
6
7
8

module.exports = {
    head: [
        ......
        /* 添加 Algolia 搜索框的 CSS 和 JavaScript 文件*/
        ['link', { href: "https://cdn.jsdelivr.net/npm/@docsearch/css@3", rel: "stylesheet" }],
        ['script', { src: "https://cdn.jsdelivr.net/npm/@docsearch/js@3" }],
    ]
}

修改enhanceApp.js

.vuepress/enhanceApp.js 文件是 VuePress 中仅次于 config.js 的第二重要的文件，我们可以通过修改该文件来对 VuePress 应用进行拓展配置。这个文件应当 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。我们可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等，比如这里我们把 Algolia 邮件中的代码添加进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

export default ({
    Vue,      /* VuePress 正在使用的 Vue 构造函数*/
    options,  /* 附加到根实例的一些选项 */
    router,   /* 当前应用的路由实例 */
    siteData  /* 站点元数据 */
}) => {
    /* 应用级别的拓展优化 */
    Vue.mixin({
        mounted() {
            setTimeout(() => {  /* 添加 setTimeout 避免报错（该报错不影响效果） */
                try {
                    docsearch({  /* 添加 Algolia DocSearch 提供的代码 */
                        appId: "请看邮件",
                        apiKey: "请看邮件",
                        indexName: "请看邮件",
                        container: '.search-box',
                        debug: false
                    });
                } catch (e) {
                    console.log(e);
                }
            }, 100)
        },
    });
};

注意：其中的 container，参考 docsearch 的 官方仓库，这里提供的不是 input 输入框的选择器，而是一个挂载节点，比如 div 的选择器。

修改搜索框样式

VuePress 提供了一种添加额外样式的简便方法。我们可以创建一个 .vuepress/styles/index.styl文件。这是一个Stylus文件，但也可以使用正常的CSS 语法。

此处我们通过该文件来设置一下 Algolia 搜索框的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

.search-box .DocSearch.DocSearch-Button {
    cursor: text;
    width: 10rem;
    height: 2rem;
    color: #5b5b5b;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    padding: 0 0.5rem 0 0rem;
    outline: none;
    transition: all 0.2s ease;
    background: transparent;
    background-size: 1rem;
}

.search-box .DocSearch-Button-Container {
    margin-left: 0.4rem;
}

.search-box .DocSearch-Button .DocSearch-Search-Icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: 0.1rem;
}

.search-box .DocSearch-Button-Placeholder {
    font-size: 0.8rem;
}

.search-box .DocSearch-Button-Keys {
    display: flex;
    position: absolute;
    right: 0.1rem;
}

.search-box .DocSearch-Button-Key {
    font-size: 12px;
    line-height: 20px;
}

最终显示的效果如下图所示：

总结

Algolia DocSearch 可以说真的跟官网描述一样，算是目前构建可在线搜索文档的最简单的方式之一了。我们只需要关注文档本身，进行少量的配置，其它的 Algolia 全包了。另外，Algolia 还有一些其它优秀产品及服务，感兴趣的也可以前往官网自行探索。

本文以自己的 个人网站 为例，但 Algolia DocSearch适合很多类型的网站，更方便的是许多网站构建器本身就内置了对Algolia 的支持，比如 Hexo、 VuePress、Docusaurus 等等。

本文转载自: CSDN

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

想要让自己的APP也想微信一样具有装载小程序的功能, 可以借助FinClip,Uniapp或者mPaaS来实现

今天我们来对比一下三者各自的优势

Uniapp

一款优秀的前端框架, 实现了一套代码多端运行, 不仅支持移动端和小程序, 还能给APP实现小程序能力

其优势:

• 一套代码 多端运行 (Web端 移动端 小程序)
• 小程序支持厂商众多(微信小程序, 抖音小程序, 百度小程序…….)
• 赋予App小程序能力
• 以前端跨平台为核心
• 提供各种增值服务 比如广告联盟，插件市场，云打包增值服务方便开发者快速变现
• 框架使用完全免费

官网: 点击进入

FinClip

一个小程序容器, 可以将这个容器集成到原生APP或者桌面程序甚至uniapp应用中, 让应用实现小程序能力, Flutter+FinClip容器的结合弥补了Flutter不支持小程序的缺陷, 实现真正意义上的一次开发 到处运行, 对于开发者而言只需维护一套小程序代码即可

FinClip工作原理如图:

其优势:

• 一套代码 全平台运行 (宿主为Flutter的情况下 可实现Web端 移动端 PC端 小程序四端跨平台)
• 赋予App小程序能力
• 以小程序为核心 反向生成各个平台应用 方便企业快速升级
• 可兼容基于 Taro，kbone 或 uni-app 框架生成的全部小程序
• 按流量和就看调用收费

官网: 点击进入

Github: 点击进入

mPaaS

mPaaS 小程序容器，源自于支付宝小程序框架，继承了支付宝小程序框架的易开发性、跨平台性以及 Native 性能，不仅帮助开发者实现面向自有 App 投放小程序，还可快速构建打包，覆盖支付宝、淘宝、钉钉等应用。

• 一套代码 多端运行 (Web端 移动端 小程序)
• 市场验证 容器稳定可靠
• 按使用流量和接口调用次数收费
• 小程序只能投放至阿里系平台宿主中比如付宝、淘宝、钉钉等, 无法给微信使用

官网: 点击进入

三者对比

我们换个角度进行分析补充:

总结|

FinClip更倾向于吸收和包容, 它能兼容运行外部平台开发的小程序, 比如uniapp, 微信小程序等 当然支付宝小程序也可兼容 使用转换工具转换成微信小程序代码后即可

但是FinClip分发功能比较薄弱, 也就是由它开发的小程序只能运行在微信和自身容器上, 这一点uniapp比较擅长

mPaaS只能运行支付宝系的小程序, 另外分发也局限于阿里系APP

因此 我们可以取长补短, 开发小程序我们使用uniapp, 运行小程序使用FinClip, 完美😝

具体开发方案思考🤔:

1. 我们用uniapp进行跨平台应用开发时, 不用官方提供的uniMPSDK, 而是选择FinClip来实现应用的小程序能力, Webview基础上套一层小程序容器, 性能不知如何
2. 我们用uniapp进行小程序开发, 然后使用Flutter宿主+FinClip容器运行小程序, 最后实现全平台分发(PC端 移动端 Web端 各大平台小程序), 🐂🍺

参考资料:

《FinClip 与 uniapp：轻应用平台与前端开发框架》

《系统对比下 FinClip 与 mPaaS》

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

对于开发者而言, 可能需要编写一些框架或者某个产品的使用说明文档, 一般这种文档都是系统化的由多个页面组成

此时如果使用博客的形式, 就显得比较零散不成体系, 我们如果将其整合成一个带目录的文档手册, 比如这种:

不仅让阅读者一目了然, 对于编写者而言也能起到规范作用

这种文档不仅适合开发者使用, 同样适合其他文字创作者, 比如作家, 小说家等等 对于普通人而言 一开始就使用这种文档式的创作模式能有效培养体系化的创作思维, 为未来创作长篇文章打下良好基础😁

好了 回归主题 如何快速生成这种静态文档网站呢?

这里给大家推荐几款框架

静态文档生成框架

1. Docusaurus

   是Facebook专门为开源项目开发者提供的一款易于维护的静态网站创建工具,使用 Markdown即可更新网站

   官网: 点击进入

   Github: 点击进入

   

   示例网站: MPFlutter

   

2. Gitbook

   示例网站: 面包多

   

3. Read the Docs

   国外的一个文档托管网站

   官网: 点击进入

   

4. VuePress

   官网: 点击进入

   Github: 点击进入

   一款由Vue驱动的静态网站生成器

   

5. vuepress-theme-vdoing

   🚀一款基于VuePress修改和拓展的知识管理&博客(blog)主题

   官网: 点击进入

   Github: 点击进入

   

   示例网站: MyBatis-Plus, Variant Form

6. VuePress Theme Hope

   一个具有强大功能的 vuepress 主题✨

   官网: 点击进入

   

   示例网站: FastRequest

大图镇楼

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站