0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

◆MySQLに接続しよう

const mysql = require('mysql'); →mysqlパッケージを読み込み

const connection = mysql.createConnection({
//データベース名、パスワード
});

◆クエリの実行

connection.query('クエリ', クエリ実行後の処理)と書くことで、
Node.jsからデータベースに対してクエリを実行することができます。

例)

connection.query(
'SELECT*FROM items', →クエリ
()=> {
クエリ後の実行処理
}
);

キャプチャ.PNG

例)実行後の処理

connection.query(
'SELECT*FROM items', →クエリ
(error,result)=> {
console.log(result);
res.render('index.ejs');
)
};

キャプチャ.PNG

第1引数のerrorにはクエリが失敗したときのエラー情報が、
第2引数のresultsにはクエリの実行結果(ここでは取得したメモ情報)が入ります。

◆取得した値の表示 EJSに値を渡す

connection.query(
'SELECT*FROM items', →クエリを実行
(error,result)=> {
console.log(result);
res.render('index.ejs',{items: results}); →オブジェクトを渡す
)
};

HTMLで
<% items.forEach((item)=>{ %>
}) ;

キャプチャ.PNG

◆フォームを使ったリクエスト

app.post('create/',(req,res)=>{
追加する処理
一覧を表示する処理
});

キャプチャ.PNG

◆フォーム作成方法

◆フォームに入力した値を入れる
キャプチャ.PNG

メモ追加部分を作成

①フォームの値を受け取る準備をしよう(1)

input要素にname属性を指定すると、下の図のようなオブジェクトの形で
情報がサーバーに送信されます。よってサーバー側では
req.body.name属性の値でフォームの値を取得できます。

キャプチャ.PNG

②フォームの値を受け取る準備をしよう(2)

app.use(express.urlencoded({extended: false}));

app.('/create',(req,res)=> {
console.log(req.body.itemName)→フォームの値を取得する

});

◆データベースに追加する

connection.query(
'INSERT INTO items(name)VALUE('とまと')',
(error,result)=> {
connection.query(
'SELECT*FROM items', →クエリを実行
(error,result)=> {
console.log(result);
res.render('index.ejs',{items: results}); →オブジェクトを渡す
)
};

◆フォームからの値をクエリに使うとき

connection.query(
'INSERT INTO items(name)VALUES(?)',
[req.body.itemName], →配列の要素が入る
(error,result)=> {
connection.query(
'SELECT*FROM items', →クエリを実行
(error,result)=> {
console.log(result);
res.render('index.ejs',{items: results}); →オブジェクトを渡す
)
};

◆リダイレクト

app.post('/create', (req, res) => {
connection.query(
'INSERT INTO items (name) VALUES (?)',
[req.body.itemName],
(error, results) => {
res.redirect('/index');
}
);
});

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?