feat(backend): use Vercel Serverless Functions for backend

This commit is contained in:
arielherself 2023-11-26 22:17:55 +08:00
parent 919df1fd53
commit 1b95222346
7 changed files with 63 additions and 28 deletions

1
.gitignore vendored
View File

@ -16,3 +16,4 @@ npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.vercel

View File

@ -5,14 +5,26 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment=""> <list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/api/click.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/api/handshake.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/Networking.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Networking.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/UMap.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/UMap.js" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" /> <option name="LAST_RESOLUTION" value="IGNORE" />
</component> </component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="JavaScript File" />
</list>
</option>
</component>
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component> </component>
@ -27,21 +39,23 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent">{ <component name="PropertiesComponent"><![CDATA[{
&quot;keyToString&quot;: { "keyToString": {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;, "RunOnceActivity.OpenProjectViewOnStart": "true",
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;, "RunOnceActivity.ShowReadmeOnStart": "true",
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;, "WebServerToolWindowFactoryState": "false",
&quot;git-widget-placeholder&quot;: &quot;dev&quot;, "git-widget-placeholder": "dev",
&quot;last_opened_file_path&quot;: &quot;/home/user/Documents/fd_data-structures/pj/frontend&quot;, "last_opened_file_path": "/home/user/Documents/fd_data-structures/pj/frontend",
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;, "node.js.detected.package.eslint": "true",
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;, "node.js.detected.package.tslint": "true",
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.eslint": "(autodetect)",
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.tslint": "(autodetect)",
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;, "nodejs_interpreter_path": "/home/user/.nvm/versions/node/v20.10.0/bin/node",
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot; "nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "settings.nodejs",
"vue.rearranger.settings.migration": "true"
} }
}</component> }]]></component>
<component name="RunManager"> <component name="RunManager">
<configuration name="start" type="js.build_tools.npm" temporary="true" nameIsGenerated="true"> <configuration name="start" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" /> <package-json value="$PROJECT_DIR$/package.json" />
@ -69,7 +83,8 @@
<updated>1700814200305</updated> <updated>1700814200305</updated>
<workItem from="1700814201341" duration="315000" /> <workItem from="1700814201341" duration="315000" />
<workItem from="1700814808669" duration="47000" /> <workItem from="1700814808669" duration="47000" />
<workItem from="1700822693197" duration="9005000" /> <workItem from="1700822693197" duration="9493000" />
<workItem from="1701004587189" duration="3052000" />
</task> </task>
<servers /> <servers />
</component> </component>

7
api/click.js Normal file
View File

@ -0,0 +1,7 @@
const getArgs=(s)=>s.split('@@')
export default function handler(req,res){
res.status(200).json({
log: `Method: click\nArgs: ${getArgs(req.query.query)}`,
});
}

12
api/handshake.js Normal file
View File

@ -0,0 +1,12 @@
const __DEBUG__=1,
__APP_VERSION__='v1.0a1',
__APP_INTRO__='<list>\n' +
' <li>We can actively detect the connection status now!</li>\n' +
'</list>';
export default function handler(req,res){
res.status(200).json({
version: __APP_VERSION__,
intro: __APP_INTRO__,
});
}

View File

@ -22,7 +22,7 @@ export default function App() {
const [intro, setIntro] = useState(''); const [intro, setIntro] = useState('');
const hs = setInterval(() => { const hs = setInterval(() => {
post('handshake', []).then((response) => { post('handshake', []).then((response) => {
const [version, intro] = response.split('@@'); const {version, intro} = response;
setVersion(version); setVersion(version);
setIntro(intro); setIntro(intro);
clearInterval(hs); clearInterval(hs);

View File

@ -1,15 +1,13 @@
export function post(method,args) { export function post(method,args) {
const data = new FormData(); const payload=args.join('@@');
data.append('method', method)
data.append('payload', args.join(','));
let res = ''; let res = '';
let ft = async () => { let ft = async () => {
const response = await fetch('http://127.0.0.1:825/', { const response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, {
method: 'POST', method: 'GET',
body: data // body: data
}); });
const response_data = await response.text(); const response_data = await response.json();
console.log(`Received: ${response_data}`); console.log(`Received: ${JSON.stringify(response_data)}`);
return response_data; return response_data;
}; };
return ft(); return ft();

View File

@ -70,9 +70,11 @@ function MapClickHandler({mks}) {
const lat = e.latlng.lat, lng = e.latlng.lng; const lat = e.latlng.lat, lng = e.latlng.lng;
console.info(`Clicking on ${lat} ${lng}`); console.info(`Clicking on ${lat} ${lng}`);
mks.current.addMarker(lat, lng); mks.current.addMarker(lat, lng);
post('click', [lat, lng]).catch((e)=>{ post('click', [lat, lng]).then((response)=>{
console.log(`Response:\n${response['log']}`)
}).catch((e)=>{
console.error(e); console.error(e);
location.reload(); // location.reload();
}); });
}, },
// TODO // TODO
@ -148,7 +150,7 @@ function ChangeView({center,zoom}){
export default function UMap() { export default function UMap() {
const markersRef = useRef(null); const markersRef = useRef(null);
const [focus, setFocus]=useState([37.334835049999995,-122.01139165956805]); const [focus, setFocus]=useState(AppleParkLoc);
const zoom=16; const zoom=16;
const sf=(a)=>{setFocus(a);console.log(`triggered focus update, new focus is ${focus}`);}; const sf=(a)=>{setFocus(a);console.log(`triggered focus update, new focus is ${focus}`);};
return ( return (