vue tab fetch/post v0.01

This commit is contained in:
mpabi 2024-06-24 18:37:36 +00:00
parent 0363e941b1
commit ef2db25b0b
4 changed files with 44 additions and 56 deletions

View File

@ -4,9 +4,24 @@ from sqlalchemy.orm import Session
from app.database import SessionLocal, engine from app.database import SessionLocal, engine
from app import models, schemas from app import models, schemas
models.Base.metadata.create_all(bind=engine) from typing import List, Optional
# ddfrom starlette.middleware.base import BaseHTTPMiddleware
# from starlette.responses import Response
# class CustomMIMEMiddleware(BaseHTTPMiddleware):
# async def dispatch(self, request, call_next):
# response = await call_next(request)
# if request.url.path.endswith('.vue'):
# response.headers['Content-Type'] = 'application/javascript'
# return response
from fastapi.staticfiles import StaticFiles
app = FastAPI() app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
models.Base.metadata.create_all(bind=engine)
def get_db(): def get_db():
db = SessionLocal() db = SessionLocal()

View File

@ -4,20 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Passport Form App</title> <title>Passport Form App</title>
<style> <link rel="stylesheet" href="./style.css">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="./js/axios.min.js"></script>
<script type="module" src="./script.js"></script> <script type="module" src="./script.js"></script>
</body> </body>
</html> </html>

View File

@ -1,5 +1,5 @@
import { createApp } from './js/vue.esm-browser.js'; import { createApp } from './js/vue.esm-browser.js';
import PassportForm from './components/PassportForm.js'; import PassportForm from './components/Tabs.js';
const App = { const App = {
name: 'App', name: 'App',
@ -14,4 +14,3 @@ const App = {
}; };
createApp(App).mount('#app'); createApp(App).mount('#app');

View File

@ -1,43 +1,24 @@
body, html { #app {
margin: 0; font-family: Avenir, Helvetica, Arial, sans-serif;
padding: 0; -webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif; -moz-osx-font-smoothing: grayscale;
}
header, footer {
background-color: #333;
color: #fff;
text-align: center; text-align: center;
padding: 1rem 0; color: #2c3e50;
} margin-top: 60px;
}
.container { nav {
display: flex; margin-bottom: 20px;
min-height: calc(100vh - 100px); /* Adjust based on header/footer height */ }
}
.sidebar { button {
width: 30%; padding: 10px 20px;
padding: 20px; margin: 5px;
background-color: #f4f4f4;
}
.content {
flex-grow: 1;
padding: 20px;
}
form > * {
display: block;
margin-bottom: 10px;
}
button {
cursor: pointer; cursor: pointer;
} }
ul { button.active {
list-style-type: none; background-color: #2c3e50;
padding-left: 0; color: white;
} }