云函数 examples
This commit is contained in:
3
examples/serverless-faas/frontend/.gitignore
vendored
Normal file
3
examples/serverless-faas/frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
.DS_STORE
|
||||
node_modules
|
||||
dist
|
24
examples/serverless-faas/frontend/package.json
Normal file
24
examples/serverless-faas/frontend/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "serverless-faas-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack serve --mode=development --open",
|
||||
"build": "webpack --mode=production"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^9.1.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"ts-loader": "^9.2.6",
|
||||
"typescript": "^4.5.4",
|
||||
"webpack": "^5.65.0",
|
||||
"webpack-cli": "^4.9.1",
|
||||
"webpack-dev-server": "^3.11.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"tsrpc-browser": "^3.1.4"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
]
|
||||
}
|
BIN
examples/serverless-faas/frontend/public/favicon.ico
Normal file
BIN
examples/serverless-faas/frontend/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
83
examples/serverless-faas/frontend/public/index.css
Normal file
83
examples/serverless-faas/frontend/public/index.css
Normal file
@@ -0,0 +1,83 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body>* {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.send,
|
||||
.list {
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
.send>* {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.send>textarea {
|
||||
height: 80px;
|
||||
background: #f7f7f7;
|
||||
border: #eeeeee 1px solid;
|
||||
}
|
||||
|
||||
.send>textarea:focus {
|
||||
background: #fff;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.send>button {
|
||||
background: #215fa4;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.send>button:hover {
|
||||
background: #4b80bb;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.list>li {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
line-height: 1.5em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.list>li>.content {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list>li>.time {
|
||||
font-size: 12px;
|
||||
color: #4b80bb;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.list>li:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
29
examples/serverless-faas/frontend/public/index.html
Normal file
29
examples/serverless-faas/frontend/public/index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TSRPC Browser</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>TSRPC Guestbook</h1>
|
||||
|
||||
<div class="send">
|
||||
<textarea placeholder="Say something..."></textarea>
|
||||
<button>Send</button>
|
||||
</div>
|
||||
|
||||
<ul class="list">
|
||||
<!-- <li>
|
||||
<div class="content">Hello, World</div>
|
||||
<div class="time">11:23:23</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
10
examples/serverless-faas/frontend/src/client.ts
Normal file
10
examples/serverless-faas/frontend/src/client.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { HttpClient } from "tsrpc-browser";
|
||||
import { serviceProto } from "./shared/protocols/serviceProto";
|
||||
|
||||
// Create Client
|
||||
export const client = new HttpClient(serviceProto, {
|
||||
server: "https://service-23pfz6cm-1253954497.gz.apigw.tencentcs.com/release/helloworld-1634897828/",
|
||||
// Remove this to use binary mode (remove from the server too)
|
||||
json: true,
|
||||
logger: console,
|
||||
});
|
9
examples/serverless-faas/frontend/src/env.d.ts
vendored
Normal file
9
examples/serverless-faas/frontend/src/env.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
// TSRPC would decode ObjectId as string in frontend.
|
||||
declare module 'mongodb' {
|
||||
export type ObjectId = string;
|
||||
export type ObjectID = string;
|
||||
}
|
||||
declare module 'bson' {
|
||||
export type ObjectId = string;
|
||||
export type ObjectID = string;
|
||||
}
|
50
examples/serverless-faas/frontend/src/index.ts
Normal file
50
examples/serverless-faas/frontend/src/index.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { client } from './client';
|
||||
|
||||
// This is a demo code file
|
||||
// Feel free to modify or clear it
|
||||
|
||||
// Reload message list
|
||||
async function loadList() {
|
||||
let ret = await client.callApi('GetData', {});
|
||||
|
||||
// Error
|
||||
if (!ret.isSucc) {
|
||||
alert(ret.err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Success
|
||||
const list = document.querySelector('.list')!;
|
||||
list.innerHTML = '';
|
||||
ret.res.data.forEach(v => {
|
||||
let li = document.createElement('li');
|
||||
li.innerHTML = `<div class="content"></div><div class="time"></div>`;
|
||||
(li.querySelector('.content') as HTMLDivElement).innerText = v.content;
|
||||
(li.querySelector('.time') as HTMLDivElement).innerText = v.time.toLocaleTimeString();
|
||||
list.appendChild(li);
|
||||
})
|
||||
}
|
||||
|
||||
// Send Message
|
||||
async function send() {
|
||||
const textarea = document.querySelector('.send>textarea') as HTMLTextAreaElement;
|
||||
let ret = await client.callApi('AddData', {
|
||||
content: textarea.value
|
||||
});
|
||||
|
||||
// Error
|
||||
if (!ret.isSucc) {
|
||||
alert(ret.err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Success
|
||||
textarea.value = '';
|
||||
loadList();
|
||||
}
|
||||
|
||||
// Bind Events
|
||||
(document.querySelector('.send>button') as HTMLButtonElement).onclick = send;
|
||||
|
||||
// Load list after page load
|
||||
loadList();
|
1
examples/serverless-faas/frontend/src/shared
Symbolic link
1
examples/serverless-faas/frontend/src/shared
Symbolic link
@@ -0,0 +1 @@
|
||||
E:/Projects/tsrpc-examples/examples/serverless-faas/backend/src/shared
|
23
examples/serverless-faas/frontend/tsconfig.json
Normal file
23
examples/serverless-faas/frontend/tsconfig.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2015"
|
||||
],
|
||||
"module": "esnext",
|
||||
"target": "es5",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"moduleResolution": "node",
|
||||
"outDir": "dist",
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"jsx": "react-jsx",
|
||||
"sourceMap": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
56
examples/serverless-faas/frontend/webpack.config.js
Normal file
56
examples/serverless-faas/frontend/webpack.config.js
Normal file
@@ -0,0 +1,56 @@
|
||||
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', '.mjs', '.cjs']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: [{
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
// Compile to ES5 in production mode for better compatibility
|
||||
// Compile to ES2018 in development for better debugging (like async/await)
|
||||
compilerOptions: !isProduction ? {
|
||||
"target": "es2018",
|
||||
} : 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'
|
||||
}
|
3624
examples/serverless-faas/frontend/yarn.lock
Normal file
3624
examples/serverless-faas/frontend/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user