the-first-api

2021-06-09 20:58:13 +08:00
parent dcfd1f025d
commit 6c0c206b05
17 changed files with 425 additions and 1 deletions
--- a/first-api/frontend/package.json
+++ b/first-api/frontend/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "first-api-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --mode=development --open",
+    "build": "webpack --mode=production"
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^9.0.0",
+    "html-webpack-plugin": "^5.3.1",
+    "ts-loader": "^9.2.3",
+    "typescript": "^4.3.2",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "tsrpc-browser": "^3.0.0-dev.15"
+  }
+}
--- a/first-api/frontend/public/index.html
+++ b/first-api/frontend/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TSRPC Example</title>
+</head>
+
+<body>
+    <h1>The First API</h1>
+    <p>Open "Devtool" to see client logs.</p>
+</body>
+
+</html>
--- a/first-api/frontend/src/index.ts
+++ b/first-api/frontend/src/index.ts
@@ -0,0 +1,25 @@
+import { HttpClient } from 'tsrpc-browser';
+import { serviceProto } from './shared/protocols/serviceProto';
+
+// 创建一个 TSRPC Client
+let client = new HttpClient(serviceProto, {
+    server: 'http://127.0.0.1:3000',
+    logger: console
+});
+
+async function test() {
+    let ret = await client.callApi('Hello', {
+        name: 'World'
+    });
+
+    // Error
+    if (!ret.isSucc) {
+        alert('Error: ' + ret.err.message);
+        return;
+    }
+
+    // Success
+    alert('Success: ' + ret.res.reply);
+}
+
+window.onload = test;
--- a/first-api/frontend/src/shared/protocols/PtlHello.ts
+++ b/first-api/frontend/src/shared/protocols/PtlHello.ts
@@ -0,0 +1,8 @@
+export interface ReqHello {
+    name: string
+}
+
+export interface ResHello {
+    reply: string,
+    time: Date
+}
--- a/first-api/frontend/src/shared/protocols/serviceProto.ts
+++ b/first-api/frontend/src/shared/protocols/serviceProto.ts
@@ -0,0 +1,57 @@
+import { ServiceProto } from 'tsrpc-proto';
+import { ReqHello, ResHello } from './PtlHello';
+
+export interface ServiceType {
+    api: {
+        "Hello": {
+            req: ReqHello,
+            res: ResHello
+        }
+    },
+    msg: {
+
+    }
+}
+
+export const serviceProto: ServiceProto<ServiceType> = {
+    "services": [
+        {
+            "id": 0,
+            "name": "Hello",
+            "type": "api"
+        }
+    ],
+    "types": {
+        "PtlHello/ReqHello": {
+            "type": "Interface",
+            "properties": [
+                {
+                    "id": 0,
+                    "name": "name",
+                    "type": {
+                        "type": "String"
+                    }
+                }
+            ]
+        },
+        "PtlHello/ResHello": {
+            "type": "Interface",
+            "properties": [
+                {
+                    "id": 0,
+                    "name": "reply",
+                    "type": {
+                        "type": "String"
+                    }
+                },
+                {
+                    "id": 1,
+                    "name": "time",
+                    "type": {
+                        "type": "Date"
+                    }
+                }
+            ]
+        }
+    }
+};
--- a/first-api/frontend/tsconfig.json
+++ b/first-api/frontend/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es2018"
+    ],
+    "module": "esnext",
+    "target": "es2018",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/first-api/frontend/webpack.config.js
+++ b/first-api/frontend/webpack.config.js
@@ -0,0 +1,58 @@
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const isProduction = process.argv.indexOf('--mode=production') > -1;
+
+module.exports = {
+    entry: './src/index.ts',
+    output: {
+        filename: 'bundle.[contenthash].js',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js']
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: [{
+                    loader: 'ts-loader',
+                    options: {
+                        compilerOptions: isProduction ? {
+                            "lib": [
+                                "dom",
+                                "es2015.promise"
+                            ],
+                            "target": "es5",
+                        } : undefined
+                    }
+                }],
+                exclude: /node_modules/
+            },
+        ]
+    },
+    plugins: [
+        // Copy "public" to "dist"
+        new CopyWebpackPlugin({
+            patterns: [{
+                from: 'public',
+                to: '.',
+                toType: 'dir',
+                globOptions: {
+                    gitignore: true,
+                    ignore: [path.resolve(__dirname, 'public/index.html').replace(/\\/g, '/')]
+                },
+                noErrorOnMissing: true
+            }]
+        }),
+        // Auto add <script> to "index.html"
+        new HtmlWebpackPlugin({
+            template: 'public/index.html'
+        }),
+    ],
+    devtool: isProduction ? false : 'inline-source-map'
+}