shao
This commit is contained in:
parent
115c18cd20
commit
486abc09c9
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>3D Scatter Plot with Input</title>
|
||||||
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#plot {
|
||||||
|
height: 80vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
#inputForm {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="inputForm">
|
||||||
|
<input type="number" id="xInput" placeholder="X value">
|
||||||
|
<input type="number" id="yInput" placeholder="Y value">
|
||||||
|
<input type="number" id="zInput" placeholder="Z value">
|
||||||
|
<button onclick="submitData()">Submit</button>
|
||||||
|
</div>
|
||||||
|
<div id="plot"></div>
|
||||||
|
<script>
|
||||||
|
var trace = {
|
||||||
|
x: [], y: [], z: [],
|
||||||
|
mode: 'markers',
|
||||||
|
type: 'scatter3d'
|
||||||
|
};
|
||||||
|
var layout = {
|
||||||
|
title: '3D Scatter Plot'
|
||||||
|
};
|
||||||
|
Plotly.newPlot('plot', [trace], layout);
|
||||||
|
|
||||||
|
function submitData() {
|
||||||
|
var xValue = document.getElementById('xInput').value;
|
||||||
|
var yValue = document.getElementById('yInput').value;
|
||||||
|
var zValue = document.getElementById('zInput').value;
|
||||||
|
|
||||||
|
fetch('http://localhost:8000/data', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({x: xValue, y: yValue, z: zValue}),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
Plotly.extendTraces('plot', { x: [[data.x]], y: [[data.y]], z: [[data.z]] }, [0]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -10,13 +10,12 @@ import uvicorn
|
||||||
|
|
||||||
app = FastAPI()
|
app = FastAPI()
|
||||||
|
|
||||||
# CORS中间件的设置
|
|
||||||
app.add_middleware(
|
app.add_middleware(
|
||||||
CORSMiddleware,
|
CORSMiddleware,
|
||||||
allow_origins=["*"], # 允许所有源
|
allow_origins=["*"],
|
||||||
allow_credentials=True,
|
allow_credentials=True,
|
||||||
allow_methods=["*"], # 允许所有方法
|
allow_methods=["*"],
|
||||||
allow_headers=["*"], # 允许所有头部
|
allow_headers=["*"],
|
||||||
)
|
)
|
||||||
|
|
||||||
class Item(BaseModel):
|
class Item(BaseModel):
|
||||||
|
@ -24,17 +23,21 @@ class Item(BaseModel):
|
||||||
y: float
|
y: float
|
||||||
z: float
|
z: float
|
||||||
|
|
||||||
@app.get("/data")
|
@app.post("/data")
|
||||||
async def get_data():
|
async def post_data(item: Item):
|
||||||
return JSONResponse(content={"x": random.random(), "y": random.random(), "z": random.random()})
|
# 这里可以对item进行任何需要的处理
|
||||||
|
return item
|
||||||
|
|
||||||
@app.get("/")
|
@app.get("/")
|
||||||
async def get_index():
|
async def get_index():
|
||||||
# 直接返回同目录下的index.html文件
|
# 直接返回同目录下的index.html文件
|
||||||
return FileResponse('index.html')
|
return FileResponse('index.html')
|
||||||
|
|
||||||
|
@app.get("/2")
|
||||||
|
async def get_index():
|
||||||
|
# 直接返回同目录下的index.html文件
|
||||||
|
return FileResponse('index2.html')
|
||||||
def main():
|
def main():
|
||||||
# 使用uvicorn运行FastAPI应用,指定主机地址和端口
|
|
||||||
uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
|
uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
|
|
Loading…
Reference in New Issue