fetch que 图形界面数据绑定 #45

.vscode/tasks.json

@@ -19,7 +19,7 @@
 		}, {
 			"label": "build",
 			"type": "shell",
-			"command": "zsh cli/build.zsh",
+			"command": "cd ismism.ts; zsh cli/build.zsh",
 			"group": {
 				"kind": "build",
 				"isDefault": true

cli/start.zsh

@@ -5,4 +5,4 @@ zsh cli/db.zsh
 curl "http://localhost:728/quit"
 sleep 0.5
 
-deno run --allow-net --allow-read src/ser.ts
+deno run --allow-net --allow-read cli/ser.js

ismism.ts/cli/build.zsh

@@ -1,10 +1,7 @@
 echo "building ismism.ts\n"
 
-rm -f cli/*.js
-rm -rf ui
-mkdir ui
-
-cd ismism.ts
+rm -f ../cli/*.js
+rm -rf ../ui; mkdir ../ui
 
 set -e
 deno check src/ser.ts ui/bind/bind.ts

ismism.ts/src/ont/json.ts

@@ -14,3 +14,11 @@ export function json<
 	try { return JSON.parse(`{"${s.replace(/&/g, ',"').replace(/=/g, '":')}}`) }
 	catch { return null }
 }
+
+export function json_s(
+	n: NonNullable<Json>
+): string {
+	return Object.entries(n)
+		.map(([k, v]) => `${k}=${typeof v == "string" ? `"${v}"` : v}`)
+		.join("&")
+}

ismism.ts/ui/bind/bind.ts

@@ -1 +1,7 @@
+import { que } from "./fetch.ts"
+
 console.log("从零开发！")
+
+const adm = await que({ que: "adm" })
+
+console.log(adm)

ismism.ts/ui/bind/fetch.ts

@@ -0,0 +1,21 @@
+import type { Que, QueRet } from "../../src/pra/que.ts"
+import { json_s } from "../../src/ont/json.ts"
+
+// 服务:端口
+const ser = `http://localhost:728`
+
+// 绑定数据（浏览器端）<->（服务器端）
+
+// 查询接口
+export async function que<
+	T extends QueRet[Que["que"]]
+>(
+	q: Que
+) {
+	const s = json_s(q)
+	const r = (await fetch(`${ser}/q?${s}`)).json() // HTTP GET 请求
+	console.log(`GET ${s}`)
+	return r as unknown as T
+}
+
+// 请求接口

readme.md

@@ -1,11 +1,17 @@
 # 【从零开发】主义主义网站
 
-## 代码结构
+## 代码结构 `ismism`
+
+编译环境 - 写的代码
+运行环境 - 跑的代码
+
+编译环境 =>编译生成=> 运行环境 =>部署=> 运行（服务器端 + 浏览器端）
 
 * `ismism.ts` 编译环境
-	* `cli` 命令接口 `command line interface`
+	* `cli` 命令 `command line interface`
 		- `sendsms.ts` 发送测试短信
-		- `bundle.ts` 编译并打包 `build and bundle`
+		- `bundle.ts` 编译 .ts 并打包 .js `build .ts and bundle .js`
+		- `build.zsh` 编译生成运行环境
 	* `src` 源代码 `source`
 		* `ont` 基础操作 `ontic`
 			- `base.ts` 进制转换
@@ -41,12 +47,17 @@
 			- `template.html` UI元素
 			- `style.css` UI样式
 		* `bind` UI定义（TS/JS）绑定服务器端与浏览器端的数据
+			- `fetch.ts` 绑定数据
 			- `bind.ts` 绑定UI入口
 			- `template.ts` 绑定UI元素
 		* `ui.ts` 打包UI `ui bundle`
-* `cli` 命令接口（运行环境）（服务器端）
-	- `build.zsh` 构建运行环境
-* `ui` 图形界面（运行环境）（浏览器端）
+* `cli` 命令（运行环境）（服务器端）
+	- `*ser.js` 服务 `serve`
+	- `db.zsh` 启动数据库
+	- `stop.zsh` 停止服务
+	- `start.zsh` 启动服务
+* `*ui` 图形界面（运行环境）（浏览器端）
+	- `*index.html` 网页界面
 * `mongod.service` `mongod.yaml` 数据库配置（服务器端）
 * `nginx.conf` 端口配置（服务器端）