Web

Apisix Install docker install docker run -d --restart unless-stopped \ --network ${DOCKER_NETWORK} \ --name ${DOCKER_APISIX_NAME} \ -p 9080:9080/tcp \ -p 9091:9091/tcp \ -p 9092:9092/tcp \ -p 9180:9180/tcp \ -p 9443:9443/tcp \ -e APISIX_STAND_ALONE=true \ -v ${PWD}/apisix/apisix.yaml:/usr/local/apisix/conf/apisix.yaml:ro \ apache/apisix:${APISIX_VERSION} References APISIX - Getting Started APISIX - Deploy Modes API7 Docs - Configure HTTPS for APISIX APISIX - Centralized Authentication with Apache APISIX and Advanced Tricks APISIX - key-auth Usage Route # create upstream curl "http://127.0.0.1:9180/apisix/admin/upstreams/1" -X PUT -d ' { "type": "roundrobin", "nodes": { "httpbin.org:80": 1 } }' # create route curl "http://127.0.0.1:9180/apisix/admin/routes/1" -X PUT -d ' { "methods": ["GET"], "host": "example.com", "uri": "/anything/*", "upstream_id": "1" }' # route with rate limit curl -i http://127.0.0.1:9180/apisix/admin/routes/1 \ -H 'X-API-KEY: edd1c9f034335f136f87ad84b625c8f1' -X PUT -d ' { "uri": "/index.html", "plugins": { "limit-count": { "count": 2, "time_window": 60, "rejected_code": 503, "key_type": "var", "key": "remote_addr" } }, "upstream_id": "1" }' Consumer # consumer with rate limit curl http://127.0.0.1:9180/apisix/admin/consumers -H 'X-API-KEY: edd1c9f034335f136f87ad84b625c8f1' -X PUT -d ' { "username":"consumer1", "plugins":{ "key-auth":{ "key":"auth-one" }, "limit-count":{ "count":2, "time_window":60, "rejected_code":403, "rejected_msg":"Requests are too many, please try again later or upgrade your subscription plan.", "key":"remote_addr" } } }' # consumer with key auth curl http://127.0.0.1:9180/apisix/admin/consumers -H 'X-API-KEY: edd1c9f034335f136f87ad84b625c8f1' -X PUT -d ' { "username": "jack", "plugins": { "key-auth": { "key": "auth-one" } } }'

Basic Concepts Cookies 一种用于服务器与浏览器交换数据的方式 服务器响应时通过 Set-Cookie 的 HTTP header 写入浏览器 浏览器每次请求自动在 header 中带上 cookies set cookie 时可以设置过期时间、域名、路径、HttpOnly 等条件，满足条件的请求才会带上该 cookie Session 由于 HTTP 请求是无状态的，需要在多次请求中保持用户状态的话需要额外的数据，这个数据可以是一个随机的字符串（Session ID），这样带有同样 Session ID 的请求就可以被关联为同一个会话 Session ID 一般由服务端生成，并保存在服务端，来对每一次的请求进行关联。与客户端的交互可以用 set cookie 的方式实现 Token 客户端发送请求时携带的凭证，用于表明自己的身份（Authentication） 常见 tokens： 随机字符串：通过服务端生成随机字符串（Session ID），然后通过 Set-Cookie 写入客户端的浏览器作为 token 的形式，每次请求会在 header 中的 cookie 带上该 token/session id JWT：一种按照 JWT 通用协议签名过的信息，base64 解码后为 JSON 格式。由于信息经过了签名，有防篡改的功能。 Online Debugger 示例： { "iss": "example.com", # 表示令牌是由 example.com 这个实体发行的 "sub": "1234567890", # 令牌的主题是用户 ID 为 "1234567890" 的用户 "aud": "https://api.example.com", # 令牌的目标接收方 "exp": 1516239022, # 令牌的过期时间 "nbf": 1516238422, # 令牌的生效时间 "iat": 1516237822, # 令牌的发行时间 # 自定义字段，用于传递用户的权限角色、姓名和电子邮件地址等信息 "role": "admin", "name": "John Doe", # "email": "johndoe@example.com", "custom_data": { "department": "Engineering", "team": "Security" } } OTP (One Time Password) 动态口令，一次有效的验证码机制。最常用的 OTP 为 TOTP（Time-based One-Time Password），通常 30s 一变，服务端和客户端（APP）需提前对齐种子、提前校对时间。在同一时间窗口内，客户端（APP）计算的动态口令（OTP）应与服务端一致，从而通过认证。 ...

References Github - caddy 安装 Binary Keep Caddy Running 下载 binary：https://caddyserver.com/download 运行命令 sudo mv caddy /usr/bin/ sudo mkdir /etc/caddy sudo cp Caddyfile /etc/caddy/Caddyfile sudo groupadd --system caddy sudo useradd --system \ --gid caddy \ --create-home \ --home-dir /var/lib/caddy \ --shell /usr/sbin/nologin \ --comment "Caddy web server" \ caddy 将以下内容写入 /etc/systemd/system/caddy.service 文件 [Unit] Description=Caddy Documentation=https://caddyserver.com/docs/ After=network.target network-online.target Requires=network-online.target [Service] Type=notify User=caddy Group=caddy ExecStart=/usr/bin/caddy run --environ --config /etc/caddy/Caddyfile ExecReload=/usr/bin/caddy reload --config /etc/caddy/Caddyfile --force TimeoutStopSec=5s LimitNOFILE=1048576 PrivateTmp=true ProtectSystem=full AmbientCapabilities=CAP_NET_ADMIN CAP_NET_BIND_SERVICE [Install] WantedBy=multi-user.target 启动 sudo systemctl daemon-reload sudo systemctl enable --now caddy sudo systemctl status caddy 注意：centos 7 的 systemd 版本太低（219），需要先升级 ...

Snippets text center <div class="text-center"> <h1>Welcome</h1> </div> Design Margin & padding Flex A Complete Guide to Flexbox FLexbox Playground Fonts Google Fonts Top 10 Web Fonts Serif Georgia Times New Roman Merriweather Sans-Serif Roboto Open Sans Source Sans Pro Lato Raleway Poppins Ariel Color Color Harmonies Complementary colors: Colors that are directly opposite one another on the color wheel are known as complementary colors. Complementary colors have a high contrast and can be very effective as accent colors when paired with a more neutral palette. ...

HTML Basic Template <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

Basic var a = 10; // let b = 20; // 作用域以外不可引用，建议尽量用 let const c = 30; scope Hoisting Re-declaration var Function-scoped Yes, undefined if not initialized Yes let Block-scoped No, must be declared No const Block-scoped No, must be declared No String let s = "Hello, world" // => "ell": the 2nd, 3rd, and 4th characters s.substring(1,4) // => "ell": same thing s.slice(1,4) // => "rld": last 3 characters s.slice(-3) // => ["Hello", "world"]: s.split(", ") // => 2: position of first letter l s.indexOf("l") // => true: the string starts with these s.startsWith("Hell") // => true: s includes substring "or" s.includes("or") // => "Heya, world" s.replace("llo", "ya") // => "hello, world" s.toLowerCase() // => "H": the first character s.charAt(0) // => " x": add spaces on the left to a length of 3 "x".padStart(3) Template // greeting == "Hello Bill." let name = "Bill" let greeting = `Hello ${ name }.` Pattern Matching let text = "testing: 1, 2, 3" let pattern = /\d+/g pattern.test(text) text.search(pattern) text.match(pattern) text.replace(pattern, "#") text.split(/\D+/) 类型转换 // Number to string let n = 17 let s = n.toString() // String to number // => 3 parseInt("3 blind mice") // => 0.1 parseFloat(".1") // If the value is a string, wrap it in quotes, otherwise, convert (typeof value === "string") ? "'" + value + "'" : value.toString() 对象 let square = { area: function() { return this.side * this.side; }, side: 10 }; //等价于 let square = { area() { return this.side * this.side; }, side: 10 }; 数组 // forEach let data = [1, 2, 3, 4, 5], sum = 0 data.forEach(value => { sum += value; }) // map let a = [1, 2, 3] a.map(x => x*x) // filter let a = [5, 4, 3, 2, 1] a.filter(x => x < 3) // find and findIndex let a = [1, 2, 3, 4, 5] a.findIndex(x => x === 3) a.find(x => x % 5 === 0) // every and some a.every(x => x < 10) a.some(isNaN) // reduce a.reduce((x,y) => x+y, 0) // flat and flatMap [1, [2, 3]].flat() let phrases = ["hello world", "the definitive guide"] let words = phrases.flatMap(phrase => phrase.split(" ")) // concat let a = [1,2,3]; a.concat(4, 5) // stack and queue let stack = [] stack.push(1,2) stack.pop() let q = [] q.push(1,2) q.shift() // subarrays let a = [1, 2, 3, 4, 5, 6, 7, 8] a.slice(0,3) a.splice(4) // fill let a = new Array(5); a.fill(0) // indexOf let a = [0, 1, 2, 1, 0] a.indexOf(1) // includes let a = [1, true, 3, NaN] a.includes(true) // sort let a = ["banana", "cherry", "apple"] a.sort() // reverse a.reverse() // to string let a = [1, 2, 3] a.join(" ") [1,2,3].toString() 遍历 遍历列表 ...

Mini Program WXML 与 HTML 语法类似：WXML 使用 {{value}} 绑定数据 使用 wx:for 遍历数组 <view> <view class="title">Demo</view> <view> <view> <button type="default" size="mini" bind:tap="onChangeCnt">add cnt</button> cnt: {{cnt}} </view> <view> <button type="primary" size="mini" bind:tap="onChangeStr">reverse str</button> str: {{str}} </view> <view> <button type="warn" size="mini" bind:tap="onModifyObj">modify obj</button> obj.name: {{obj.name}}, obj.age: {{obj.age}} </view> <view> <button type="default" size="mini" bind:tap="onAppendArr">append arr</button> <button type="default" size="mini" bind:tap="onModifyArr">modify arr</button> <view wx:for="{{arr}}" wx:key="index"> index: {{index}}, name: {{item.name}}, age: {{item.age}} </view> </view> </view> </view> WXSS 与 CSS 语法类似：WXSS ...

安装 自动安装 # CentOS sudo yum install nginx # Ubuntu sudo apt-get install nginx 安装后nginx路径为/usr/sbin/nginx，配置文件为/etc/nginx/nginx.conf 手动安装 下载&解压 wget http://nginx.org/download/nginx-1.17.10.tar.gz tar zxvf nginx-1.17.10.tar.gz cd nginx-1.17.10 调整配置 ./configure --without-http_rewrite_module ./configure --prefix=/usr/local/nginx --with-http_ssl_module # 安装SSL模块 如果有的依赖库没有，需要先安装 # centos yum -y install pcre* #安装使nginx支持rewrite yum -y install gcc-c++ yum -y install zlib* yum -y install openssl openssl-devel # ubuntu apt-get install openssl apt-get install libssl-dev # 安装完后再次检查配置 ./configure 查看默认安装的模块 cat nginx-1.17.2/auto/options | grep YES 编译&安装 make sudo make install 修改配置 cd /usr/local/nginx/ vi conf/nginx.conf # 参看当前 Nginx 最终的配置 sbin/nginx -T # 检查配置是否有问题 nginx -t -c <配置路径> 启动Nginx cd /usr/local/nginx # 启动 sbin/nginx # 停止/退出/重启/重载配置 sbin/nginx -s stop/quit/reopen/reload 配置 nginx 开机自启 参考：https://www.nginx.com/resources/wiki/start/topics/examples/systemd/ ...

Install # centos # https://github.com/nodesource/distributions#redhat-versions sudo yum install https://rpm.nodesource.com/pub_16.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1 Install on Ubuntu How To Install Node.js on Ubuntu 22.04 版本管理 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash source ~/.bashrc nvm list-remote nvm install v20.10.0 node -v npm -v # change default node version nvm alias default 18 n # install sudo npm install -g n # 文档 n help # 切换版本 n # 安装指定版本 n 6.17.1 # 安装lts（newest Long Term Support official release） n lts # 删除版本 n rm 6.17.1 # 查看版本 node -v NodeJS 创建一个文件 index.js ...

Quick Start Nuxt - Introduction 基于 Vue 的 SSR (Server Side Rendering) 框架 Init： npx nuxi@latest init <project-name> # or using vite npm create vite@latest Run: # npm npm run dev -- -o # nuxi npx nuxi dev Commands Nuxt - nuxi # get nuxt info npx nuxi info # init project npx nuxi init <project_name> # add modules npx nuxi module add <NAME> # creates a .nuxt directory and generates types. npx nuxi prepare # run dev npx nuxi dev --dotenv .env.dev --host 127.0.0.1 --port 3000 # build npx nuxi build --dotenv .env.prod # preview after build npx nuxi preview # run type check npx nuxi typecheck Config Nuxt Configuration ...