p21

leecobaby · Apr 24, 2023 · b3aa209 · b3aa209
1 parent 9c369de
commit b3aa209
Show file tree

Hide file tree

Showing 19 changed files with 853 additions and 64 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/test
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,90 @@
+# rust-wasm
+
+这是一个简单的示例，展示了如何使用 Rust 和 WebAssembly 一起构建 Web 应用程序。
+
+## 安装
+
+你需要安装 Rust 开发工具。你可以通过运行以下命令来完成：
+
+```sh
+curl https://sh.rustup.rs -sSf | sh
+```
+
+## 运行数据库
+
+```sh
+cd db
+docker-compose up -d
+```
+
+现在你通过 `localhost:5432` 上访问数据库，用户名为 `postgres`，密码为 `postgres`。
+
+你还可以在浏览器上访问 `localhost:8081`，用户名为 `postgres`，密码为 `postgres`。
+
+## 运行 webservice 和 webapp
+
+首先，你应该设置 `DATABASE_URL` 环境变量，包含数据库凭据，如下所示：`postgres://postgres:postgres@localhost:5432/postgres`
+，放在项目根目录的 .env 文件中。
+
+其次，你应该设置 `HOST_PORT` 环境变量，包含主机机器的 IP 地址和端口，如下所示：`http://localhost:8080`，放在 webapp 根目录的
+.env 文件中。
+
+要运行 webservice，你可以运行：
+
+```sh
+cd webservice
+cargo run
+```
+
+现在你可以打开另一个终端并运行 webapp。要运行 webapp，你可以运行：
+
+```sh
+cd webapp
+cargo run
+```
+
+## 运行 WebAssembly
+
+要运行 WebAssembly，首先你需要安装 `wasm-pack` 工具：
+
+```sh
+cargo install wasm-pack
+```
+
+然后，你可以运行以下命令：
+
+```sh
+cd wasm-client
+wasm-pack build
+```
+
+安装 npm 依赖：
+
+```sh
+cd wasm-client/www
+npm install
+```
+
+运行 WebAssembly 应用：
+
+```sh
+npm run start
+```
+
+## 构建
+
+构建 webservices 和 webapp：
+
+```sh
+cargo build --bin teacher-service --release
+cargo build --bin svr --release
+```
+
+构建 WebAssembly 应用：
+
+```sh
+cd wasm-pack
+wasm-pack build --release
+cd www
+npm run build
+```
diff --git a/build/dist/0.bootstrap.js b/build/dist/0.bootstrap.js
diff --git a/build/dist/8be0f8e4c2e0004a6c12.module.wasm b/build/dist/8be0f8e4c2e0004a6c12.module.wasm
diff --git a/build/dist/bootstrap.js b/build/dist/bootstrap.js
diff --git a/build/dist/index.html b/build/dist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Hello wasm-pack!</title>
+  <!--引入bootstrap 5-->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+
+<body>
+  <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+  <nav class="navbar navbar-dark bg-primary">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Wasm-client</a>
+    </div>
+  </nav>
+  <div class="m-3" style="height: 600px">
+    <div class="row">
+      <div class="col">
+        <div class="card border-info mb-3">
+          <div class="card-header">Course</div>
+          <div class="card-body">
+            <button type="button" class="btn btn-primary">Add</button>
+          </div>
+          <table class="table table-hover table-bordered table-sm">
+            <thead>
+              <tr>
+                <th scope="col">ID</th>
+                <th scope="col">Name</th>
+                <th scope="col">Time</th>
+                <th scope="col">Description</th>
+                <th scope="col">Option</th>
+              </tr>
+            </thead>
+            <tbody id="left-tbody"></tbody>
+          </table>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card border-info mb-3">
+          <div class="card-header">Add Course</div>
+          <div class="card-body">
+            <form class="row g-3 needs-validation" id="form">
+              <div class="mb-3">
+                <label for="name" class="form-label">Course Name</label>
+                <input type="text" class="form-control" id="name" required placeholder="Please fill in Course name">
+                <div class="invalid-feedback">Please fill in course name</div>
+              </div>
+              <div class="mb-3">
+                <label for="description" class="form-label">Description</label>
+                <textarea class="form-control" id="description" rows="3"
+                  placeholder="Please fill in description"></textarea>
+              </div>
+              <div class="col-12">
+                <button type="submit" class="btn btn-primary">Submit</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="./bootstrap.js"></script>
+</body>
+
+</html>
diff --git a/build/svr b/build/svr
diff --git a/build/teacher-service b/build/teacher-service
diff --git a/db/db.sql b/db/db.sql
diff --git a/db/docker-compose.yml b/db/docker-compose.yml
@@ -0,0 +1,21 @@
+# Use postgres/example user/password credentials
+version: '3.1'
+
+services:
+  db:
+    image: postgres:alpine
+    restart: always
+    ports:
+      - '5432:5432'
+    volumes:
+      - ./init.d:/docker-entrypoint-initdb.d
+    environment:
+      POSTGRES_PASSWORD: postgres
+
+  adminer:
+    image: adminer
+    restart: always
+    links:
+      - db:db
+    ports:
+      - '8081:8080'
diff --git a/db/init.d/courses.sql b/db/init.d/courses.sql
@@ -0,0 +1,29 @@
+set
+timezone to 'Asia/Shanghai';
+
+drop table if exists courses;
+
+create table courses
+(
+    id          serial primary key,
+    teacher_id  INT          not null,
+    name        varchar(140) not null,
+    time        TIMESTAMP default now(),
+    description varchar(2000),
+    format      varchar(30),
+    structure   varchar(200),
+    duration    varchar(30),
+    price       integer,
+    language    varchar(30),
+    level       varchar(30)
+);
+
+
+insert into courses (teacher_id, name)
+values (1,
+        'First course');
+
+
+insert into courses (teacher_id, name)
+values (1,
+        'Second course');
diff --git a/db/init.d/teachers.sql b/db/init.d/teachers.sql
@@ -0,0 +1,16 @@
+set
+    timezone to 'Asia/Shanghai';
+
+drop table if exists teachers;
+
+create table teachers
+(
+    id          serial primary key,
+    name        varchar(100),
+    picture_url varchar(100),
+    profile     varchar(2000)
+);
+
+insert into teachers (name, picture_url, profile)
+VALUES ('zhang san', 'https://abc.xyz', 'zhang san is a good teacher'),
+       ('li si', 'https://abc.xyz', 'zhang san is a good teacher');
diff --git a/wasm-client/.gitignore b/wasm-client/.gitignore
@@ -3,4 +3,4 @@
 Cargo.lock
 bin/
 pkg/
-wasm-pack.log
+wasm-pack.log  
diff --git a/wasm-client/Cargo.toml b/wasm-client/Cargo.toml
@@ -1,7 +1,6 @@
 [package]
 name = "wasm-client"
 version = "0.1.0"
-authors = ["Leeco <[email protected]>"]
 edition = "2018"
 
 [lib]
@@ -12,13 +11,29 @@ default = ["console_error_panic_hook"]
 
 [dependencies]
 chrono = { version = "0.4.19", features = ["serde"] }
+js-sys = "0.3.45"
 serde = { version = "1.0.136", features = ["derive"] }
-serde_json = "1.0.79"
 serde_derive = "1.0.136"
-js-sys = "0.3.56"
+serde-wasm-bindgen = "0.4"
+serde_json = "1.0.79"
 wasm-bindgen = { version = "0.2.79", features = ["serde-serialize"] }
 wasm-bindgen-futures = "0.4.29"
-web-sys = { version = "0.3.56", features = ["Headers", "Request", "RequestInit", "RequestMode", "Response", "Window", "Document", "Element", "HtmlElement", "Node", "console", "HtmlButtonElement", "MouseEvent", "Location"] }
+web-sys = { version = "0.3.56", features = [
+    "Headers",
+    "Request",
+    "RequestInit",
+    "RequestMode",
+    "Response",
+    "Window",
+    "Document",
+    "Element",
+    "HtmlElement",
+    "Node",
+    "console",
+    "HtmlButtonElement",
+    "MouseEvent",
+    "Location",
+] }
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires
@@ -36,4 +51,4 @@ wasm-bindgen-test = "0.3.13"
 
 [profile.release]
 # Tell `rustc` to optimize for small code size.
-opt-level = "s"
+opt-level = "s"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		DATABASE_URL=postgres://postgres:postgres@localhost:5432/test