- ベストアンサー
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日も同じことを考えています。 宜しくお願い申し上げます。
- kouzou250
- お礼率59% (127/213)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
何の説明もなしにいきなりコードを提示して「404NOT FOUND。の原因が分からない」と書かれても回答者は困ります。 ウェブブラウザでどのページ(URL)にアクセスしたときに404になるのか、質問文中のejsファイルから目的のHTMLを生成するために何をやったのか、など、状況が分かるような情報を書いたほうが回答がつきやすいはずです。 ありがちで馬鹿馬鹿しい原因としては、URLの打ち間違い、ウェブサーバーに置いたファイル名の間違い、ファイルを正しいディレクトリに配置していなかった、などが考えられます。
その他の回答 (1)
- gokukame
- ベストアンサー率22% (1016/4537)
ページが無いのになにをやっても無駄ですね。
お礼