質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2929閲覧

webページが表示されない

benigmaet

総合スコア19

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/01/30 03:38

編集2019/01/31 01:19

参考サイト様からbords.jsを参考にして、dockerでnodejs、express、mysqlを用いて作成したのですが、

/home/node-test/node_modules/mysql/lib/protocol/Parser.js:80

throw err; // Rethrow non-MySQL errors ^

TypeError: Cannot read property 'text' of undefined
at Query.<anonymous> (/home/node-test/routes/boards.js:21:19)
at Query.<anonymous> (/home/node-test/node_modules/mysql/lib/Connection.js:502:10)
at Query._callback (/home/node-test/node_modules/mysql/lib/Connection.js:468:16)
at Query.Sequence.end (/home/node-test/node_modules/mysql/lib/protocol/sequences/Sequence.js:83:24)
at Query._handleFinalResultPacket (/home/node-test/node_modules/mysql/lib/protocol/sequences/Query.js:139:8)
at Query.EofPacket (/home/node-test/node_modules/mysql/lib/protocol/sequences/Query.js:123:8)
at Protocol._parsePacket (/home/node-test/node_modules/mysql/lib/protocol/Protocol.js:278:23)
at Parser.write (/home/node-test/node_modules/mysql/lib/protocol/Parser.js:76:12)
at Protocol.write (/home/node-test/node_modules/mysql/lib/protocol/Protocol.js:38:16)
at Socket.<anonymous> (/home/node-test/node_modules/mysql/lib/Connection.js:91:28)
[nodemon] app crashed - waiting for file changes before starting...

とエラー文が出てきてしまい、ブラウザではこのページは動作していません。と表示されます。

mysql

1CREATE TABLE `markers` ( 2 `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , 3 `text` VARCHAR( 100 ) NOT NULL , 4 `tag` VARCHAR( 80 ) NOT NULL , 5`lat` FLOAT( 10, 6 ) NOT NULL , 6 `lng` FLOAT( 10, 6 ) NOT NULL , 7 `picture` MEDIUMBLOB NOT NULL ) ENGINE = MYISAM;

作成したプログラムは以下

javascript

1//board.js 2var express = require('express'); 3var router = express.Router(); 4var multer = require('multer'); 5var ejs = require("ejs"); 6var connection = require('../mysqlConnection'); 7var upload = multer({ dest: './public/images/uploads/' }); 8var cloudinary = require('cloudinary'); 9 10cloudinary.config({ 11 cloud_name: 'dpzvwmvwr', 12 api_key: '535964892578376', 13 api_secret: 'HdWoCM5BlCNALQPngx9obnrVrs4' 14}); 15 16router.get('/:id', function(req, res, next) {//router.get('/:idなのでURLはlocalhost:60000/boards/1となる 17 var boardId = req.params.id;//idの取得方法がreq.params.id 18 var query = 'SELECT * FROM markers WHERE id = ' + boardId; 19 connection.query(query, function(err, rows) { 20 res.render('board', { 21 //boardは1件だけでも必ず配列でやってくるため 22 text: rows[0].text, 23 board:rows[0], 24 messageList:rows, 25 }); 26 }); 27}); 28 29router.post('/:id', upload.single('picture'), function(req, res) { 30var path = req.file.path; 31 var text = req.body.text; //~がフォームから送られた場合はreq.body.~ 32 var bordID = req.params.id; 33 var tag = req.body.tag; 34 var lat=req.body.lat; 35 var lng=req.body.lng; 36 //var picture=req.body.picture; 37 38 cloudinary.uploader.upload(path, function(result) { 39 var picture = result.url; 40 41 var query = 'INSERT INTO markers (id,text,tag,lat,lng,picture) VALUES ("'+id+'",'+'"'+text+'",'+'"'+tag+'",'+'"'+lat+'",'+'"'+lng+'",'+'"'+picture+'")'; 42 connection.query(query, function(err, rows) { 43 res.redirect('/boards/' + boardId);//引数にURLをとる。URL(localhost:60000/boards/1)に移動するだけ 44 }); 45 }); 46}); 47module.exports = router; 48

入力画面と表示画面を分けて作成したので、board.jsに対応するページは表示画面だけを確認する下のプログラムです。

html

1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<head> 4<title> 5 6</title> 7<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 9<meta name="format-detection" content="telephone=no"> 10<link rel='stylesheet' href='/stylesheets/style.css'> 11</head> 12 13<body> 14<div id="form"> 15<!--フォーム--> 16 17<table border="0" cellspacing="0" cellpadding="0" align="left" > 18<form action="/boards/<%= board.id %>" enctype="multipart/form-data" class="board-form" method="post" > 19 <th>表示画面</th> 20 <ul class="main-list"> 21 <% messageList.forEach(function(messageItem) { %> 22 <div> 23 <% if (messageItem.picture) { %> 24 <a href="<%= messageItem.picture %>" class="message_image" style="background-image: url(<%= messageItem.picture %>);"></a> 25 <% } %> 26 <tr ><td><p class="message">テキスト枠 <%= messageItem.text %></td></tr> 27 <tr><td ><p class="message">タグ枠   <%= messageItem.tag %></td></tr> 28 <!-- <tr><td ><p class="message">写真枠   <%= messageItem.picture %></td></tr> --> 29 <tr> <td> <button type="submit" class="submit">共感</button></td><td> <button type="submit" class="submit">返信</button></td></tr> 30<tr><td></td></tr> 31 </div> 32 <% }); %> 33 34 <tr><td> <p> <a href="/" class="btn">googlemapへ戻る</a></p></td></tr> 35 </ul> 36 37</form> 38 </table> 39 40</div> 41</body> 42 43</html>

たぶんboard.jsのここが怪しいと思うのですが、

var query = 'SELECT * FROM markers WHERE id = ' + boardId; connection.query(query, function(err, rows) { res.render('board', { //boardは1件だけでも必ず配列でやってくるため text: rows[0].text, board:rows[0], messageList:rows, }); }); });

参考サイトでは、boardテーブルとmessageテーブルの二つを使用しているため、以下のように書かれていますが、私の場合は上で示した通りにmysqlのテーブルはmarkersだけなので二重にconnection.queryを書かなくても読み込めるのではないかと思いました。でも、エラー文を見る限りダメなようです。

どうすればよいでしょうか。教えてください。

connection.query(getBoardQuery, function(err, board) { // ① connection.query(getMessagesQuery, function(err, messages) { // ②(①の処理がいつ終わるかわかんないけど、次の処理はこれ) res.render('board', { // ③(②の処理がいつ終わるかわかんないけど、次の処理はこれ) title: board[0].title, board: board[0], // ①の処理は終わっているのでboard[0]は存在する messageList: messages // ②の処理は終わっているのでmessagesは存在する }); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rururu3

2019/01/30 03:57

Cannot read property 'text' of undefined というエラーの上にどのファイルのどの行で発生してるかの情報も載ってるはずなので載せておくと回答しやすくなると思います
benigmaet

2019/01/31 01:20

わかりました。ご指摘、ありがとうございます。
guest

回答3

0

text: rows[0].text,
でエラーになってるのは間違いなさそうで、
結果が0件のときになりそうなエラーなので
connection.query(query, function(err, rows) {
の直下にでも
console.log(rows);
をしてデータを見てみたらいかがでしょう。

投稿2019/01/31 01:50

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

benigmaet

2019/01/31 04:15

ご回答ありがとうございます。 text:rows[0].textを消してhtmlも修正したら表示できました。 ご協力ありがとうございました。
guest

0

js

1res.render('markers', { 2 text: rows[0].text, 3 board:rows[0], 4 messageList:rows, 5 });

投稿2019/01/30 04:02

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

benigmaet

2019/01/31 01:21

上記のように変更してみましたが、改善されませんでした...すみません。
benigmaet

2019/01/31 01:26

ご回答ありがとうございます。今後もよろしくお願いします...
guest

0

自己解決

javascriptのほうでrows[0].textを削除し、

javascript

1 res.render('board', { 2 //markersは1件だけでも必ず配列でやってくるため 3 board:rows[0], 4 messageList:rows, 5 });

HTMLでmessageItem.pictureを<img src=で参照したらできました。

html

1<form action="/boards/<%= board.id %>" enctype="multipart/form-data" class="board-form" method="post" > 2 <th>表示画面</th> 3 <ul class="main-list"> 4 <% messageList.forEach(function(messageItem) { %> 5 <div> 6 <% if (messageItem.picture) { %> 7 <a href="<%= messageItem.picture %>" class="message_image" style="background-image: url(<%= messageItem.picture %>);"></a> 8 <% } %> 9 <img src="<%= messageItem.picture %>"> 10 <tr ><td><p class="message">テキスト枠 <%= messageItem.text %></td></tr> 11 <tr><td ><p class="message">タグ枠   <%= messageItem.tag %></td></tr> 12 <!-- <tr><td ><p class="message">写真枠   <%= messageItem.picture %></td></tr> --> 13 <tr> <td> <button type="submit" class="submit">共感</button></td><td> <button type="submit" class="submit">返信</button></td></tr> 14<tr><td></td></tr> 15 </div>

ご協力していただいてありがとうございました。お騒がせいたしました。

投稿2019/01/31 04:10

benigmaet

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問