云函数 examples

This commit is contained in:
k8w
2021-12-23 23:36:33 +08:00
parent ed409795d9
commit 82663162b7
35 changed files with 5767 additions and 0 deletions

View File

@@ -0,0 +1,3 @@
.DS_STORE
node_modules
dist

View 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"
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View 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;
}

View 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>

View 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,
});

View 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;
}

View 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();

View File

@@ -0,0 +1 @@
E:/Projects/tsrpc-examples/examples/serverless-faas/backend/src/shared

View 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"
]
}

View 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'
}

File diff suppressed because it is too large Load Diff