乱码三千 – 分享实用IT技术

乱码三千 – 码出一个新世界


  • 首页

  • 归档

  • 搜索

关于POST请求的一些细节

发表于 2023-04-18

请求传递参数的方式

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请求适合提交数据。需要根据具体的业务场景和需求选择合适的请求方法。

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

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

去哪儿找好用的轮子

发表于 2023-04-17

开源大轮子聚集地

  1. Dromara社区

    官网: 点击进入

    image-20230418163057817

  2. Gitee GVP

    官网: 点击进入

    image-20230418165000336

  3. Github 中文社区排行榜

    官网: 点击进入

    image-20230418172752082

    image-20230418172823761

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

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

CURL的使用技巧

发表于 2023-04-17

前言

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
  1. 断点续传

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

    1
    curl -C -o "baidu.html" http://www.baidu.com/index.html
  2. 请求跟随服务器的重定向

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

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

参考资料

Curl Cookbook

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

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

一些可视化的开发工具推荐

发表于 2023-04-17

工具推荐

  1. Nginx可视化配置工具

    官网: 点击进入

    image-20230418145011544

  2. 可视化表单生成工具

    官网: 点击进入

    image-20230418150430126

    image-20230418150456156

  3. 正则可视化工具

    官网: 点击进入

    image-20230418150559813

  4. CSS动画可视化

    官网: 点击进入

    image-20230418151815374

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

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

使用Vercel+Github免费部署国内可访问的ChatGPT网站(ChatGPT3.5版本API)

发表于 2023-04-16

前言

总所周知,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

img

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

直接点击左下角Authorize Vercel

使用Vercel部署

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

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

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

点击右下角Authorize Vercel

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

选择Select a Git Namespace

在下拉框中选择Add GitHub Account

再次跳转至Github页面

img

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

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

img

点击右边Import,进行部署

img

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

点击Environment Variables

第一个空填入OPENAI_API_KEY

第二个空填入你的ChatGPT API KEY(sk-开头)

点击右边Add按钮

点击底部Deploy

img

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

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

img

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

img

点击中间DOMAINS中的URL

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

img

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

本文转载自: 速龙博客

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

基于Algolia实现网站全文搜索

发表于 2023-04-15

前言

目前,我的 个人网站 是基于 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三大小程序容器技术比较

发表于 2023-04-13

前言

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

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

FinClip 与 uniapp:轻应用平台与前端开发框架

Uniapp

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

其优势:

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

官网: 点击进入

FinClip

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

FinClip工作原理如图:

img

其优势:

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

image-20230414164600163

官网: 点击进入

Github: 点击进入

mPaaS

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

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

官网: 点击进入

image-20230414163702998

三者对比

uniMPSDK mPaaS FinClip SDK
SDK支持小程序开发框架 仅支持使用uni-app开发框架开发的小程序 仅支持基于支付宝小程序语法开发的小程序 支持微信小程序,也支持基于Taro、kbone、uniapp等三方框架生成的小程序
SDK支持集成的系统类型 仅提供iOS、Android两种类型的SDK 仅支持iOS、Android两种平台 提供iOS、Android、Flutter、.ReactNative、Windows等多种SDK
集成SDK后,App体积增大多少 集成后,App体积可能会增大7~16M左右 集成后,ApP体积可能会增大30M左右 集成后,App体积可能会增大3M左右
是否有小程序全生命周期管理平台 没有小程序的全生命周期管理平台 仅提供部分,如灰度发布与统计分析 拥有完善的管理平台,便于管理小程开发、测试、上下架等流程
渲染技术架构 采用了webview渲染或者原生渲染(React Native/,weex) 采用了webview渲染或者原生渲染(React Native/,weex) 采用与微信小程序一致的逻辑层与渲染层分离架构

img

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

FinClip uniapp mPaaS
容器的吸收包容能力 更倾向于吸收和包容, 它能兼容运行外部平台开发的小程序, 比如uniapp, 微信小程序等 当然支付宝小程序也可兼容 使用转换工具转换成微信小程序代码后即可 只能运行自身开发的小程序 只能运行自身开发的小程序
小程序分发能力 分发功能比较薄弱, 也就是由它开发的小程序只能运行在微信和自身容器 比较擅长分发 支持的小程序平台众多 局限于阿里系APP和自身容器上
容器可运行的宿主平台 iOS、Android、Flutter、.ReactNative、Windows, uniapp 仅支持iOS、Android两种平台 仅支持iOS、Android两种平台
容器的运行性能 在性能上FinClip要更胜一筹

总结|

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

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

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

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

具体开发方案思考🤔:

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

参考资料:

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

《系统对比下 FinClip 与 mPaaS》

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

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

一些好用的静态文档网站生成框架

发表于 2023-04-12

前言

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

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

image-20230414122658260

image-20230414140619279

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

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

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

这里给大家推荐几款框架

静态文档生成框架

  1. Docusaurus

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

    官网: 点击进入

    Github: 点击进入

    image-20230418112631177

    示例网站: MPFlutter

    image-20230414140619279

  2. Gitbook

    示例网站: 面包多

    image-20230412122804341

  3. Read the Docs

    国外的一个文档托管网站

    官网: 点击进入

    image-20230418164731019

  4. VuePress

    官网: 点击进入

    Github: 点击进入

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

    image-20230418110720504

  5. vuepress-theme-vdoing

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

    官网: 点击进入

    Github: 点击进入

    image-20230418110531972

    示例网站: MyBatis-Plus, Variant Form

  6. VuePress Theme Hope

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

    官网: 点击进入

    image-20230418162654493

    示例网站: FastRequest

大图镇楼

76024c75-2c5e-4787-b2f5-8c5fc32531d4

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

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

盘点目前主流的跨平台开发引擎

发表于 2023-04-11

前言

我曾想, 有没有一款引擎可以实现PC端, 移动端, Web端和小程序的应用开发

那么对于大型应用而言, 我最先想到的就是使用游戏开发引擎, 即实现了跨平台又保证了程序性能, 生产效率大幅提高

比如目前有一些跨平台的桌面程序就是用Godot游戏引擎开发的

但是面对日常的展示类应用, 使用游戏引擎就有种牛刀杀鸡的感觉, 由于游戏引擎设计的初衷不同, 导致了使用游戏引擎开发日常应用会存在一些难点, 比如:

  • UI组件的不完善 需要自己造轮子
  • 第三方SDK的支持度不够, 同样需要自己造轮子
  • 游戏引擎默认的UI自刷新机制和日常应用的响应式刷新不同, 开发者需要具备对引擎修改调优的能力

除非有现成的框架能直接上手使用, 否则 前期开发的时间成本会比较大, 不过后期轮子造出来了这一部分的问题会得到有效解决

接下来咱们列举一下目前市面上主流的跨平台开发引擎:

跨平台开发框架

日常应用引擎:

引擎名称 Web端 移动端 PC端 小程序
flutter √ √ √
uni-app √ √ √ √
  • uni-app官方默认支持Web, 移动, 小程序三端, 和Electron结合后可实现桌面程序的开发, 具体文章参考: 《Uniapp+Vite+Vue3+Electron 快速构建桌面应用》

  • flutter很强 性能媲美原生, 唯一不足是不支持小程序, 目前有团队在研究小程序+flutter容器的方案, 也就是将开发小程序嵌入到flutter应用中,从而实现跨全平台, 对于企业而言只需开发和维护一套小程序即可, 具体参见:《FinClip 实现小程序反向生成 App》

    这种方案能方便现有的前端开发者快速上手, 不过感觉和uni-app有点类似, 可能内部交互原理不太一样, 这一块有兴趣的可自行研究

  • MPFlutter :是基于Flutter延伸出来的一个支持小程序的框架, 从而实现全平台开发, 不过仅适合展示类应用的开发, 而且得掌握Dart语言, 对于纯前端开发者来说有一定的学习成本, MPFlutter未来发展如何 咱们拭目以待

    image-20230414140355841

游戏引擎:

引擎名称 Web端 移动端 PC端 小程序
cocos √ √ √ √
godot √ √ √
unity √ √ √ √

关于游戏引擎开发日常应用的方案, 由于本人并未实操过, 暂不做评价, 等后续体验过了再来补充

关于其他游戏引擎可参考文章《常用游戏开发引擎汇总》

总结

展示类应用推荐uniapp和MPFlutter, 高性能应用的开发推荐原生flutter

游戏和大型桌面程序的开发使用游戏引擎进行开发

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

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

个人开发者收款方案之--面包多

发表于 2023-04-10

前言

收款,是大多数个人开发者的梦想。如果你正在搜寻这方面的内容,恭喜你,至少说明你的项目有赢收的可能。作为一个WEB前端开发者,我对接过目前一些比较常见的收款方案,并应用于自己的项目中,现在把自己对接的过程记录下来,希望对你有所帮助。

本文仅讨论WEB端(包括H5、浏览器扩展)售卖虚拟商品(激活码),且支持全程自动化的收款方案。

介绍

“面包多”属于创业团队作品,作者@greatdk偶尔活跃于V2等论坛,个人博客偶有更新,是个喜欢思考的人。

官网:点击进入

优缺点

优点:申请免费、对接简单、实时提现
缺点:入驻需实名认证、支付流程在平台进行,且用户需登录

价格费用

普通模式:5%服务费+1%的第三方支付手续费。
闪电结算:5.7%的服务费。

ps:官方预告2022-10-01之后服务费将提高到13%
官方价格说明:https://mbd.pub/help/#/withdraw

对接过程

流程:(开发者)创建商品–>(用户)登录后支付–>(平台)发送回调通知–>(开发者)获取通知、查询订单、完成入库、发货。
官方帮助文档:https://mbd.pub/help

第一步:入驻申请

填写基础资料、实名认证后,拿到Developer Key。

第二步:创建作品

(略)

第二步:接收回调请求(非必须)

在面包多后台设置回调地址,用户支付后平台会主动向开发者推送回调请求,内容如下:

1
2
3
4
5
6
7
8
{
"order_id": "3faa1cfd5a364d29a5d2aec8606a2fxa", //面包多订单号
"out_order_id": "211234132", //独立订单号
"product_name": "新品小报第123期", //作品名称
"product_url_key": "usdas", //作品urlkey
"amount": 0,1, //支付金额
"state": 1, //支付状态,成功支付则为1
}

注意:如果担心回调通知有延迟或失败,可引导用户手动复制订单号进行查询以入库。

第三步:主动查询订单信息

在收到面包多的支付通知回调后,开发者可以主动去查询一次订单支付信息,双重验证后入库。

订单查询接口地址:https://x.mianbaoduo.com/api/order-detail
请求方式:GET
Header公参:x-token (string, 必须,即第一步拿到的Developer Key)
入参:order_id (string, 必须)
出参:

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
{
"code": 200,
"result": {
"ordertime": 1590508123,
"orderamount": 3,
"payway": "alipay",
"orderid": "d878ee7909c902b19d193fb8fd0af695",
"creatorid": "a2w=",
"state": "success",
"expire_at": 1593186560,
"rounds": 1,
"urlkey": "Y5ublZk=",
"re": {
"ordertime": 1594108875,
"orderamount": 3,
"payway": "alipay",
"orderid": "4a03d948c448fb8b5f51a31ab33011e0",
"creatorid": "a2w=",
"state": "success",
"expire_at": 1596787295,
"rounds": 1,
"urlkey": "Y5ublZk="
}
},
"error_info": ""
}

第四步:入库、发货

入数据库、发激活码(略)

总结

面包多最大的问题在于支付全程在平台进行,且用户必须登录,体验不是很好。类似的还有“爱发电”、“Buy Me A Coffee”等。

流程调通之后,我因为上面的原因,选择了其它方案。但如果仅作为打赏捐赠平台,还是可以考虑。目前面包多的功能还在更新迭代,可以持续关注。

其它方案

《个人开发者全球收款方案实践之–Paddle支付》

本文转载自: 前端邓浩

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

1…678…48

乱码三千

android程序员一枚,擅长java,kotlin,python,金融投资,欢迎交流~

479 日志
139 标签
RSS
© 2024 乱码三千
本站总访问量次
由 Hexo 强力驱动
|
主题 — NexT.Muse v5.1.4
0%