Browse Source

first init

master
VinokurovVE 12 months ago
commit
02a2375e5d
  1. 3
      .gitignore
  2. 31
      main.py
  3. BIN
      src/assets/cat-img.png
  4. 8
      src/js/my-comp.js
  5. 45
      src/style.css
  6. 47
      test.html
  7. 0
      test.py

3
.gitignore

@ -0,0 +1,3 @@
.venv
.vscode
__pycache__

31
main.py

@ -0,0 +1,31 @@
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
origins = [
"http://localhost",
"http://localhost:8000",
"http://localhost:3000",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/")
def index():
html_content = "<h2>Hello METANIT.COM!</h2>"
return HTMLResponse(content=html_content)
@app.get("/cat")
async def get_data():
return {"firstname": "Котофей","lastname":"Барсикофф","age":"10"}
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)

BIN
src/assets/cat-img.png

After

Width: 1680  |  Height: 1839  |  Size: 1.4 MiB

8
src/js/my-comp.js

@ -0,0 +1,8 @@
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `<div>Count is: {{ count }}</div>`
}

45
src/style.css

@ -0,0 +1,45 @@
.card{
width: 250px;
height: 350px;
border:1px solid black;
border-radius: 5px;
align-items: center;
}
.card-img {
height: 250px;
width: 250px;
position: relative;
}
img {
width: 100%;
height: 100%;
}
.card-fullname {
width: 100%;
height: 50px;
align-items: center;
display: inline-flex;
}
.card-fullname div {
font-size: larger;
font-weight:bold;
width: 100%;
text-align: center;
}
.card-age {
align-items: center;
width: 100%;
display: flex;
position: relative;
}
.card-age span {
width: 100%;
text-align: center;
font-size: small;
font-weight: 100;
}

47
test.html

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/src/style.css" rel="stylesheet"/>
</head>
<body>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">
<div class="card">
<div class="card-img">
<img src="/src/assets/cat-img.png"/>
</div>
<div class="card-fullname">
<div>{{cat_data.firstname}} {{cat_data.lastname}}</div>
</div>
<div class="card-age">
<span>{{cat_data.age}}</span>
</div>
</div>
</div>
<script type="module">
import { createApp, ref } from 'vue'
createApp({
setup() {
const cat_data = ref(null);
fetch("http://localhost:8000/cat").then( res => res.json()).then(data => cat_data.value = data);
return {
cat_data
}
}
}).mount('#app')
</script>
</body>
</html>

0
test.py

Loading…
Cancel
Save