404NOT FOUND。
丸投げですいません！
404NOT FOUND。の原因が分からない！
//express.js
const express = require('express');
const mysql = require('mysql2/promise'); // mysql2/promise を使用することで非同期処理が可能
const path = require('path');
const app = express();
const port = 3000;
// EJSをテンプレートエンジンとして設定
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// 静的ファイルの設定
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.urlencoded({ extended: true }));
const dbConfig = {
host: 'localhost',
user: 'root',
password: 'rhythm0!KT#$9V',
database: 'membership_db'
};
const pool = mysql.createPool(dbConfig);
app.get('/detail', (req, res) => {
const id = req.query.id || 'default_id';
return res.redirect(`/detail/${id}`);
});
app.get('/detail/:id', async (req, res) => {
const id = req.params.id;
try {
const connection = await pool.getConnection(); // プールから接続を取得
const [rows, fields] = await connection.execute('SELECT id, m, nickname, selfintroduction FROM members WHERE id = ?', [id]);
connection.release(); // 接続を解放
if (rows.length === 0) {
return res.status(404).send('メンバーが見つかりません');
}
const member = rows[0];
res.render('detail', { member }); // detail.ejs としてレンダリング
} catch (error) {
console.error('データベースエラー:', error);
res.status(500).send('データベースエラーが発生しました');
}
});
app.listen(port, () => {
console.log(`Expressサーバーがポート${port}で起動しました`);
});
<!-- detail.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member Detail</title>
</head>
<body>
<h1>Member Detail</h1>
<ul>
<li>ID: <%= member.id %></li>
<li>Name: <%= member.m %></li>
<li>Nickname: <%= member.nickname %></li>
<li>Introduction: <%= member.selfintroduction %></li>
</ul>
</body>
</html>
<!-- members.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Members List</title>
<!-- CSS styles -->
<style>
/* Styles for the table */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 8px; /* Adjust padding */
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Change cursor to pointer for clickable elements */
tr.clickable {
cursor: pointer;
}
/* Header style */
th {
background-color: #f2f2f2;
}
/* Change background color for even rows */
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>どなたとチャットしますか？</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>M</th>
<th>Nickname</th>
<th>都道府県</th>
<th>市区町村</th>
</tr>
</thead>
<tbody>
<% members.forEach(function(member) { %>
<tr class="clickable" data-member-id="<%= member.id %>">
<td><%= member.id %></td>
<td><%= member.m %></td>
<td><%= member.nickname %></td>
<td><%= member.prefecture %></td>
<td><%= member.city %></td>
</tr>
<% }); %>
</tbody>
</table>
<script>
// Click event handler for clickable rows
document.addEventListener('DOMContentLoaded', function() {
var rows = document.querySelectorAll('tr.clickable');
rows.forEach(function(row) {
row.addEventListener('click', function() {
var memberId = this.getAttribute('data-member-id');
window.location.href = '/detail/' + memberId; // Redirect to detail page
});
});
});
</script>
</body>
</html>
どなたか言い考えありませんか？
もう、4日も同じことを考えています。
宜しくお願い申し上げます。
お礼
ご回答ありがとうございます。 せっかく詳細なご回答を頂いていたのに、お礼が遅くなってすみません。 CGが使われていたんですね。 もう一度よくPVを見てみたのですが、確かにここは合成っぽいかな、と思う箇所がありました(テレビ画面のアップなど) しかしよく出来ていますね。 すっきりしました。ありがとうございました。