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 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.mount("/static", StaticFiles(directory="static"), name="static")
models.Base.metadata.create_all(bind=engine)
def get_db():
db = SessionLocal()

View File

@ -4,20 +4,13 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Passport Form App</title>
<style>
#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>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app"></div>
<script src="./js/axios.min.js"></script>
<script type="module" src="./script.js"></script>
</body>
</html>

View File

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

View File

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