大家好，我是凌览。前段时间手撸ChatGPT接口，简单搭建一个小工具[搭个网页应用,让ChatGPT帮我写SQL](https://linglan01.cn/post/63)，接口代码部署在一款Serverless产品平台。

Serverless 这个单词第一次出现是在2012年，由 Iron 公司提出，字面意思就是不需要服务器。国内是在 2017 年，阿里云和腾讯云先后推出了自己的 Serverless 平台，本文咱们就来谈谈 Serverless。



## 什么是Serverless

互联网产品离不开服务器，小的网站可能一台服务器就能支撑起访问量，大一点的可能需要数十台甚至上百台，而大厂级别的公司所需服务器的数量往往都是以千或万来作为单位。

所以不管是个人项目还是中小型创业公司都需要：

- 购买服务器
- 利用Docker或其他手段部署业务代码运行环境
- 监控报警保证服务器正常运行
- 如果访问量突然增大，可能需要自动弹性伸缩应对这些突发访问量

服务器运维是跑不了的，这部分工作要花费不少的成本精力。

Serverless的目的就是为了解决上面痛点，有了Serverless开发者只需要关心业务代码即可，完全可以从繁杂琐碎的服务器运维事项中解脱出来：

- 不需要管服务器的购买和销毁
- 不需要配置运行环境
- 不需要担心服务器的监控报警
- 不需要操心服务器资源的弹性伸缩问题


![](https://files.mdnice.com/user/38618/9d25694d-cdd2-4b50-a58b-defdd14a5113.png)


小结一下，Serverless有以下优点：

- 降本提效，服务器管理运维由厂商提供，开发者能把更多精力专注于业务逻辑上
- 按量付费，用多少付多少
- 弹性伸缩，项目在流量增加的时候，自动扩容，在流量降低的时候，自动缩容

## Serverless产品有哪些

Serverless产品国内外都有公司布局，实力较强的厂商有[腾讯的云函数 SCF](https://cloud.tencent.com/product/scf)、[AWS的Lambda](https://aws.amazon.com/cn/lambda/)、[阿里云的函数计算 FC](https://www.aliyun.com/product/fc?spm=5176.21213303.J_qCOwPWspKEuWcmp8qiZNQ.18.20802f3d6LVcb1&scm=20140722.S_product@@%E4%BA%91%E4%BA%A7%E5%93%81@@90871._.ID_product@@%E4%BA%91%E4%BA%A7%E5%93%81@@90871-RL_%E4%BA%91%E5%87%BD%E6%95%B0-LOC_llm-OR_ser-V_3-RK_rerank-P0_1),它们收费及提供的资源都不同。

这里不重点展开介绍，我推荐一下其他两款产品。

### **laf**

[laf](https://doc.laf.run/guide/)官网广告词”号称像写博客一样写代码”。


![](https://files.mdnice.com/user/38618/d68070e6-ed93-4b90-aab8-959fe669b035.png)


它提供了一个WebIDE平台，写几行代码即可部署并提供链接访问接口。


![](https://files.mdnice.com/user/38618/0992d009-35b5-4b33-88f1-3fadb6710a49.png)


### ****AirCode****

[AirCode](https://docs-cn.aircode.io/)一个在线开发和部署 Node.js 应用的平台，与laf是一样的。

它与laf的区别在于收费模式。AirCode有一个每月基本额度，超出额度要办理更大的额度套餐，没有超出不收取任何费用；而laf是按占用资源量计时收取费用。

![](https://files.mdnice.com/user/38618/e9cd23d2-cd5d-4c6a-84ba-ef085422f39e.png)

对于个人开发者，AirCode无疑更具性价比，验证一个想法前期不需要过多的成本投入，后期再考虑是否购买资源额度更多的套餐。

## **总结**

Serverless让开发者不再操心运行所需的资源，只需关注自己的业务逻辑，并且为实际消耗的资源付费。如果你是个人开发者，不妨试试Serverless，它肯定能给你带来惊喜。  

> 关注公粽号【程序员凌览】回复"666"，拉您进【人类高质量前端交流群~】  
往期推荐：[linglan01.cn/about](https://link.juejin.cn/?target=https://linglan01.cn/about)

三分钟搞懂Serverless，互联网个人创业者必备

大家好，我是凌览。  

开门见山，我搭了一个网页应用名字叫sql-translate。访问链接挂在我的个人博客([https://linglan01.cn/about](https://linglan01.cn/about))导航栏，也可以访问[https://www.linglan01.cn/c/sql-translate/](https://www.linglan01.cn/c/sql-translate/)直达sql-translate。  

![](https://files.mdnice.com/user/38618/9c99b592-c056-4c78-839a-087493ec343e.png)

它的主要功能有：人类语言转SQL、SQL转人类语言。文章演示一下人类语言转SQL。  
show time!!!  



# 人类语言转SQL
## 案例一  
输入：
创建了一个名为"T_USERS"的表，包含了以下字段：
1. id：作为主键的整数类型字段。
2. username：最大长度为50的字符串类型字段，用于存储用户名。
3. email：最大长度为100的字符串类型字段，用于存储电子邮件地址。
4. age：整数类型字段，用于存储年龄。
5. gender：最大长度为10的字符串类型字段，用于存储性别信息。

ChatGPT输出：`create TABLE T_USERS (id integer primary key, username varchar(50),email varchar(100),age integer gender varchar(10));`  

效果如此动图：  

![](https://files.mdnice.com/user/38618/2c95a05b-2647-472c-95d1-096a0d36fe37.gif)


## 案例二  

我设置Table Schema：
```sql
1CREATE TABLE T_USERS (
  id INT PRIMARY KEY,
  username VARCHAR(50),
  email VARCHAR(100),
  age INT,
  gender VARCHAR(10)
);
```
输入：在表名叫T_USERS 表上拓展添加学校、学历、就职公司字段<br />ChatGPT输出：`alteb table t_users add column school varchar(100), add column education varchar(100) add column company varchar(100);`    

效果如此动图：  

![](https://files.mdnice.com/user/38618/0a8489cc-8b88-47ca-accb-f35fc75e978b.gif)

## 案例三 

输入：查询username为程序员凌览并且email为lanling@qq.com的所有数据     

ChatGPT输出：`select * from t_users where username = '程序员凌览' and email = 'lanling@qq.com';`

效果如此动图：  

![](https://files.mdnice.com/user/38618/b0e9f03c-7e50-49cd-afb7-587d4150bfa2.gif)


# 最后
无论你是初学者还是有经验的SQL用户，都可以来玩玩。我强烈推荐你尝试一下 sql-translate，少写点curd，早点下班不香吗？

搭个网页应用,让ChatGPT帮我写SQL

我的创业故事：两年内从零到每4.5万美元

大家好，我是凌览。  

日常GitHub划水发现一款超级6的日历工具库lunar，它支持阳历、阴历、佛历和道历，甚至还玩上了星座、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋、凶煞宜忌、吉神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶等。大多数日历需求使用它都能满足。  

lunar还提供了多种开发语言支持，包括有：javascript、java、.net、php、python、go、typescript、flutter、swift。



## 示例  

我们来看看它给出的示例。
- 年历

![](https://files.mdnice.com/user/38618/c5286016-758b-4a47-b14f-08ad5f58b4f9.png)

- 仿百度搜索月历

![](https://files.mdnice.com/user/38618/3b1e1926-dc6a-402d-b388-d9c3450f9f03.png)

- 月历

![](https://files.mdnice.com/user/38618/3a4ae16c-422e-4472-a4e6-4e7b09e6ff0d.png)

- 农历月历

![](https://files.mdnice.com/user/38618/2dd375d3-21bb-4b50-a573-97e9542f720a.png)

- 周历

![](https://files.mdnice.com/user/38618/fd38f965-00f4-46cf-bcd7-d64cc5230796.png)

- 老黄历

![](https://files.mdnice.com/user/38618/81a3dba5-f864-49bd-934a-904ac5f161f6.png)

## 快速上手
这里演示lunar的javascript版。
安装：
```js
npm install lunar-javascript
```
使用：
```js
const {Solar, Lunar, HolidayUtil} = require('lunar-javascript')
console.log(Lunar.fromDate(new Date()).toFullString())
console.log(Solar.fromYmd(2016, 1, 1).toFullString())
console.log(HolidayUtil.getHoliday(2020, 5, 2) + '')
```

lunar仅提供了API，并没有提供现成直接用的日历组件。
比如，阳历获取年月日、儒略日、星期、是否闰年、节日、星座、日期推移、日期相减、日期比较、薪资比例、转阴历。  
```js
const {Solar} = require('lunar-javascript')

//获取年、月、日
var d = Solar.fromDate(new Date());
console.log(d.getYear());
console.log(d.getMonth());
console.log(d.getDay());

//儒略日
var d = Solar.fromDate(new Date());
console.log(d.getJulianDay());

//获取星期
var d = Solar.fromDate(new Date());
console.log(d.getWeek());//数字
console.log(d.getWeekInChinese());//中文

//是否闰年
var d = Solar.fromDate(new Date());
console.log(d.isLeapYear());

//....
```

比如，阴历获取年月日、获取时辰、获取星期、节日、干支、禄、生肖、节气、物候、数九、三伏、
二十八星宿、八卦方位、吉神方位等等。

```js
const {Lunar} = require('lunar-javascript')

//每日宜忌
var d = Lunar.fromDate(new Date());
// 宜var l = d.getDayYi();
for (var i=0, j=l.length; i<j; i++){
  console.log(l[i]);
}
// 忌
l = d.getDayJi();
for (var i=0, j=l.length; i<j; i++){
  console.log(l[i]);
}
```

阴历五花八门的，此处不再列举更多视自身需求选择。  

工具文档地址：https://6tail.cn/calendar/api.html#solar.festivals.html

（完）

一款支持星座、干支、生肖、节气、节日、彭祖百忌、每日宜忌等超卷的日历工具库

![Vuepress 三分钟搭建一个精美的文档或博客.jpg](https://www.linglan01.cn/static/img/8c0a2355cbde0472e4161a4d74ae844d.Vuepress%C3%82%C2%A0%C3%A4%C2%B8%C2%89%C3%A5%C2%88%C2%86%C3%A9%C2%92%C2%9F%C3%A6%C2%90%C2%AD%C3%A5%C2%BB%C2%BA%C3%A4%C2%B8%C2%80%C3%A4%C2%B8%C2%AA%C3%A7%C2%B2%C2%BE%C3%A7%C2%BE%C2%8E%C3%A7%C2%9A%C2%84%C3%A6%C2%96%C2%87%C3%A6%C2%A1%C2%A3%C3%A6%C2%88%C2%96%C3%A5%C2%8D%C2%9A%C3%A5%C2%AE%C2%A2.webp)

大家好，我是凌览。

作为一个程序员，相信每个人都想折腾一个属于自己的博客。技术文章的输出是我们程序员能力的一种体现，也是一种非常好的个人总结。

网上有很多文档编写网站及工具，比如语雀、石墨等等。但多数需要付费，不能自己DIY。

为了少写点curd，我推荐使用`VuePress`，它可以帮助我们快速地搭建出技术文档或个人博客。

Vuepress搭建地址：[https://jshai.gitee.io/vuepress-blog/](https://jshai.gitee.io/vuepress-blog/)



## 什么是Vuepress

VuePress是由Vue.js开发团队创建的一个静态网站生成器。它的设计目标是用于编写技术文档或者博客，并且提供了一系列的默认主题和插件，使得构建和维护现代化的静态网站变得更加简单。

它有以下优点：

*   基于Vue.js，可以使用Vue.js编写功能
    
*   支持Markdown
    
*   简单易用
    
*   开箱即用的主题
    
*   丰富的插件
    

## 本地搭建文档

快速上手同[官方文档](https://vuepress.vuejs.org/zh/guide/getting-started.html)

1.  创建新目录
```shell
mkdir vuepress-starter && cd vuepress-starte
```
2.  初始化项目，自行选择喜欢的包管理器
    
```shell
npm init #yarn init
```
3.  安装VuePress为本地依赖
    
```shell
npm install -D vuepress # yarn add -D vuepress
```
4.  创建一篇文档
```shell
mkdir docs && echo '这是知识库的介绍' > docs/README.md
```
5.  在 `package.json` 中添加一些 [++scripts++](https://classic.yarnpkg.com/zh-Hans/docs/package-json#toc-scripts)
```json
{
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
 }
}
```
6.  启动本地服务器
```shell
npm run docs:dev #yarn docs:dev 
```
VuePress 会在 [http://localhost:8080](http://localhost:8080/)启动一个热重载的开发服务器。

## 基础配置

在`docs`创建一个`.vuepress`文件夹，`.vuepress`下再创建`config.js`文件，Vuepress的配置由`config.js`文件内容决定。这里我们的项目结构可能是这样的：
```shell
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
```
配置网站的标题和描述，`config.js`写入内容：
```js
module.exports = {
    title: '凌览的知识库',
    description: '凌览，微信搜索「凌览社」关注我，长期交流学习。不知名前端，Node.js爱好者'
}
```
页面长这样：
![](https://files.mdnice.com/user/38618/78210e0b-8b81-40b0-8611-1aa8d488020c.png)

## 添加导航栏

给首页的上方添加导航栏，`config.js`修改：
```js
module.exports = {
    title: '凌览的知识库',
    description: '凌览，微信搜索「程序员凌览」关注我，长期交流学习。不知名前端，Node.js爱好者'
    themeConfig: {
        logo: 'https://www.linglan01.cn/favicon.JPG',
        //顶部导航栏
        nav: [
            { text: '博客', link: 'https://linglan01.cn/' },
            { text: '掘金', link: 'https://juejin.cn/user/3350967174565198' },
            { text: 'Github', link: 'https://github.com/CatsAndMice' }
        ]
    }
 }
```
页面变成了这样：

![](https://files.mdnice.com/user/38618/031b3c62-cf7c-4af9-94d7-5cbe99cd9574.png)

更多导航栏配置参考[VuePress导航栏配置](https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F)。

## 添加侧边栏

我们在`docs`文件夹下，创建`introduce`文件夹，此时结构如下：
```shell
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|   └─ introduce
|            └─ haha.md
|            └─ README.md
└─ package.json
```
配置`config.js`如下：
```js
module.exports = {   
    themeConfig: {
        nav:[...]
        sidebar: [
            {
                title: '侧边栏分组1', 
                collapsable: false, 
                sidebarDepth: 1,    
                children: [
                    '/introduce/',//自动获取README.md
                    '/introduce/haha'
                ]
            },
        ],
    },  
}
```
页面效果如下：

![](https://files.mdnice.com/user/38618/ebca1b11-1365-470a-8db2-19ca0b99d978.png)

还可以设置多组侧边栏：
```js
module.exports = {   
    themeConfig: {
        nav:[...]
        sidebar: [
            {
                title: '侧边栏分组1', 
                collapsable: false, 
                sidebarDepth: 1,    
                children: [
                    '/introduce/',//自动获取README.md
                    '/introduce/haha',
                   '...'
                ]
            },
             {
                title: '侧边栏分组2', 
                collapsable: true, 
                sidebarDepth: 1,    
                children: [
                     '...'
                ]
            },
        ],
    },  
}
```
更多侧边栏配置参与[Vuepress侧边栏](https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F)。

## 更换主题

社区有[vuepress-theme-hope](https://theme-hope.vuejs.press/zh/)、[vuepress-theme-reco](https://vuepress-theme-reco.recoluan.com/)等主题，可以根据喜好选择。

![](https://files.mdnice.com/user/38618/69fdd47b-b17f-4c8e-9ac6-35b0ae8b67d1.png)

这里我们以[vuepress-theme-reco](https://vuepress-theme-reco.recoluan.com/)为例，现在安装vuepress-theme-reco：
```shell
npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
```
config.js配置：
```js
module.exports = {
    // ...
    theme: 'reco'
    // ...
}  
```
刷新页面即可看见改变。这里就不贴具体图样了

## 添加文章信息

我们的文章必需要标题，可能需要展示文章作者信息、创建日期等信息，我们可以给文章的md文件添加一些信息修改：
```md
--- 
title: 凌览的知识库 #文章标题
author: 凌览 #作者
date: '2023-10-24' #日期
tags: #标题
  - 配置
  - 主题
  - 索引
---
公众号【程序员凌览】
```
此时页面效果如下：


![](https://files.mdnice.com/user/38618/b4d5a9ea-8236-4c08-a671-99e50c720179.png)


## 设置语言

Vuepress默认使用`en-US`，所以日期我们明明设置的是2023-10-24，但它页面展示的是10/24/2023 。

这里修改`config.js`：
```js
module.exports = {
    // ...
    locales: {
        '/': {
            lang: 'zh-CN'
        }
     },
    // ...
}  
```
页面效果：

![](https://files.mdnice.com/user/38618/a1cb0f5c-c511-46cb-98b0-22ce1f8fcb73.png)

## 网站部署

到这里，我们的博客或文档算是正式做好了。接下来我们部署到免费的 Gitee Pages 上，这里有两种方式：

*   直接在Gitee 创建一个名为`vuepress-blog`的仓库，手动触发Gitee Pages
    
![](https://files.mdnice.com/user/38618/80b058ed-426e-449c-b450-6c4714d6e779.png)

![](https://files.mdnice.com/user/38618/03f8070d-2d13-4b58-b716-926543d658ef.png)

![](https://files.mdnice.com/user/38618/02285077-b276-4a22-8078-4e68fbc29237.png)

*   Github创建一个名为`vuepress-blog`的仓库，Gitee也相同创建一个名为`vuepress-blog`仓库，通过Github Action 每次一次仓库更新时将Github仓库自动同步到Gitee并自动触发Gitee Pages，详情操作请阅读[Github Actions实现仓库自动同步Gitee并更新文档](https://juejin.cn/post/7049317964281020446)
    
（完）

> 关注公粽号【程序员凌览】回复"666"，拉您进【人类高质量前端交流群~】  
往期推荐：[linglan01.cn/about](https://link.juejin.cn/?target=https://linglan01.cn/about)