概要
- express+ Qwikで、postgres使う例です。
- db接続先設定は、.envから取得する方法です。
[公開: 2024/03/06]
参考のコード
-
front画面
-
client/Test/app.tsx
app.tsx
export const App = component$(() => {
const text = useSignal('qwik');
const state = useStore({ count: 0, items: [] });
const count = useSignal(0)
const time = useSignal('paused');
//init
useTask$(async({ track, cleanup }) => {
const value = track(() => text.value);
const item = {
"userId": 0,
}
const json = await CrudIndex.getList()
console.log(json);
state.items = json;
// cleanup(() => clearTimeout(id));
});
//
const increment = $(() => {
console.log("increment="+ new Date().toString());
count.value++
});
//
// addProc
const addProc = $(async() => {
// console.log("increment="+ new Date().toString());
await CrudIndex.addItem();
location.reload();
});
//
return (
<>
<div class="page_main_wrap container mx-auto my-2 px-8 bg-white">
<Head />
<h1 class="text-4xl font-bold">Test.tsx!</h1>
<hr />
<div class="card">
<lavel>Title:
<input type="text" id="title" class="input_text" />
</lavel>
<hr class="my-2" />
{/* test */}
<button type="button" class="ms-2 btn-purple"
onClick$={addProc}
>Add
</button>
</div>
<hr class="my-2" />
{state.items.map((item: any) => {
return (
<div key={item.id}>
<h3 class="text-3xl font-bold">title= {item.title}</h3>
<span>id: {item.id}</span>
<hr class="my-2" />
</div>
);
})}
</div>
<Compo1 params={111} />
<style>{`
.page_main_wrap{ min-height: 600px };
`}</style>
</>
)
})
- 内部API
- src/routes/test.ts
test.ts
router.post('/get_list', async function(req: any, res: any) {
try {
console.log(req.body);
const text = `
SELECT * FROM public."Todo"
ORDER BY id DESC LIMIT 100
`;
const client = LibPg.getClient();
const resulete = await client.query(text);
client.end();
// res.json({ret: "OK", data: []});
res.json({ret: "OK", data: resulete.rows});
} catch (error) {
console.error(error);
res.sendStatus(500);
}
});
- package.json
{
"type": "module",
"scripts": {
"check": "svelte-check --tsconfig ./tsconfig.json",
"dev": "NODE_ENV=develop nodemon",
"dev:test": "NODE_ENV=develop npx nodemon ./dist/index.js",
"build": "npm run clean && node build.js && npx vite build --mode client && npm run build:css",
"build:css": "npx tailwindcss -i ./src/main.css -o ./public/static/main.css",
"build:test": "vite build && vite build --mode client",
"clean": "rimraf dist && rimraf public/static",
"watch": "npx vite build --mode client --watch",
"test": "ts-node src/index.ts"
},
"dependencies": {
"@builder.io/qwik": "^1.4.5",
"axios": "^1.6.5",
"cookie-parser": "^1.4.6",
"dotenv": "^16.4.4",
"esm": "^3.2.25",
"express": "^4.18.2",
"express-basic-auth": "^1.2.1",
"express-session": "^1.17.2",
"log4js": "^6.4.4",
"pg": "^8.11.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/express": "^4.17.17",
"@types/node": "^18.14.6",
"@types/react": "^18.2.23",
"@types/react-dom": "^18.2.8",
"autoprefixer": "^10.4.17",
"nodemon": "^3.0.3",
"postcss": "^8.4.35",
"rimraf": "^3.0.2",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3",
"vite": "^5.1.4"
}
}