没有JavaScript框架的单页网站？
我正在构建一个无服务器架构，其中所有业务逻辑都托管在谷歌云功能上没有JavaScript框架的单页网站？,javascript,single-page-application,serverless,Javascript,Single Page Application,Serverless,我正在构建一个无服务器架构，其中所有业务逻辑都托管在谷歌云功能上 我想把前端推到客户端，但我不知道如何用足够的Javascript创建一个“静态”网站，以便调用后端，并用结果更新页面。有很多方法可以做到这一点。理想情况下，您可以创建一个index.html文件并嵌入一些调用API的JavaScript和CSS，以使事情看起来漂亮，然后使用类似的东西来提供服务 下面的示例使用了一点点Javascript并使事情看起来很好 <!DOCTYPE html> <html style="
我想把前端推到客户端，但我不知道如何用足够的Javascript创建一个“静态”网站，以便调用后端，并用结果更新页面。有很多方法可以做到这一点。理想情况下，您可以创建一个index.html文件并嵌入一些调用API的JavaScript和CSS，以使事情看起来漂亮，然后使用类似的东西来提供服务 下面的示例使用了一点点Javascript并使事情看起来很好
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>Weather Frontend</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script>
function getWeather() {
var l = document.getElementById('location-select').value;
fetch('https://weather.hightowerlabs.com/api?location='+l)
.then(function(response) {
return response.json();
})
.then(function(weather) {
document.getElementById('Temperature').innerHTML=weather.Temperature+' ℉';
document.getElementById('Location').innerHTML=weather.Location;
});
}
</script>
</head>
<body style="height: 100%; background: black;" onload="getWeather()">
<div class="container-fluid h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="text-center">
<h1 class="text-white" id='Temperature'></h1>
<h2 class="text-white" id='Location'></h2>
<form method="post" class="row align-items-center justify-content-center">
<div class="form-row align-items-center">
<div class="col-auto">
<select class="form-control" name="location" id="location-select">
<option value="Portland, Oregon, USA">Portland</option>
<option value="New York, New York, USA">New York</option>
<option value="Orlando, Florida, USA">Orlando</option>
<option value="Seattle, Washington, USA">Seattle</option>
</select>
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary" onclick="getWeather();">Submit</button>
</div>
</div>
</form>
<img src="images/google-cloud.png" height="140">
</div>
</div>
</div>
</body>
</html>
天气前端
函数getWeather（）{
var l=document.getElementById（'location-select'）。值；
取（'https://weather.hightowerlabs.com/api?location=“+l）
.然后（功能（响应）{
返回response.json（）；
})
.然后（功能（天气）{
document.getElementById（'Temperature'）.innerHTML=weather.Temperature+'℉；'；
document.getElementById（'Location'）.innerHTML=weather.Location；
});
}
波特兰
纽约
奥兰多
西雅图
提交
-4分钟后5分钟？我不确定其他人认为这个问题有什么不对。也许他们不想在他的下一个视频中出现——答案出现在这个视频@psaxton中。主要问题是这个问题太广泛了，有很多不同的方法来解决这个问题。是的，我们今天都在谷歌云下一个LondonNice演示的大屏幕上！伦敦古格伦特酒店