Node.jsの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います!!
##利用準備
1.データベース管理ツールインストール
2.Node.jsからツールに接続するnpm install ツール名
3.ツールパッケージの読み込み const ツール = require('ツール名')
4.データベースに接続するための情報を定数connectionに代入 ``const connection = ツール名.createConnection({ データベース名、パスワードなど });``
//const mysql = require('mysql');
//app.use(express.static('pablic'));
const connection = mysql.createConnection({
データベース名、パスワードなど
});
##データベースのデータを表示
1.クエリの実行
connection.query('クエリ', クエリ実行後の処理)
と書くことで、Node.jsからデータベースに対してクエリを実行することができる。
//const connection = mysql.createConnection({
//});
//app.get('/index',(req,res) =>{
connection.query(
'select * from items',
//↓↓↓クエリ実行後の処理は2つの引数を取ることができる
(error,results) => {
//第1引数のerrorにはクエリが失敗したときのエラー情報
//第2引数のresultsにはクエリの実行結果が入る
console.log(results);
res.render('index.ejs');
}
);
//});
2.取得した値の表示(データベースから取得したデータをindex.ejsに渡し一覧画面に表示する)
//app.get('/index',(req,res) =>{
//connection.query('select * from items',
//(error,results) => {
//console.log(results);
res.render('indexejs',{items: results});
// }
// );
//});
ejsではrenderメソッドから取得した値を、オブジェクトのプロパティで使える。
<%取得したオブジェクトのプロパティ名.forEach((item) => {%>
<%items.forEach((item) => {%>
##作成機能の作成
作成機能の処理の流れ
フォームの送信 → データ追加 → 一覧画面表示
####作成手順
1.作成画面の表示app.get('URL',(req,res) => {res.render('ファイル名')})
作成した作成画面へのリンクの用意
<a href="/new">遷移ボタン</a>
2.フォームの送信
メモ作成のルーティングを用意
Webでは、サーバーへリクエストするときに、どんな処理をしたいかをメソッドで伝えるようにルールで決まっている
・画面表示get
・データベースを変更したい時post
app.post('/url',(req,res) => {
//メモを追加する処理
//一覧画面を表示する処理
})
フォームの用意````
フォームを作るときはHTMLの<form>タグを用いる
<!--- action属性には送信先のURL --->
<form action="/creat" method="post">
<!--- method属性には「post」か「get」をルーティングに合わせて指定 --->
一覧画面を表示
//app.post('/creat',(req,res) =>{
//メモを追加する処理
//一覧画面を表示する処理
//connection.query('select * from items',
//(error,results) => {
res.render('index.ejs',{items: results});
// }
// );
//});
3.フォームに入力した値を受け取る
ejsでinput要素にname属性を指定<input name="name属性">
app.jsで``app.use(express.urlencoded({extended:false});``の定形文を追加する
//app.use(express.static('public'))
//↓↓↓↓追加
app.use(express.urlencoded({extended:false})//定形文
//app.post('/URL',(req,res) => {
console.log(req.body.itemName);//⇦フォームの値を取得する
//});
4.データベースへの追加
app.jsのqueryメソッドでINSERTを実行→第二引数に渡したい配列の指定 ``INSERT INTO テーブル名 (カラム名) VALUES(?)`` →``[req.body.itemName]``
フォームからの値をクエリに使うときは、VALUESに「?」を含める
//app.post('/URL',(req,res) => {
//connection.query(
'INSERT INTO table (caram) VALUES(?)',
[req.body.itemName],
(error,results) => {//クエリ実行後の処理}
//});
5.リダイレクトの指定
メモ追加後にres.redirectメソッドを用い、引数にURLを指定する ``res.redirect('/URL')``
//app.post('/URL',(req,res) => {
//connection.query(
//'INSERT INTO table (caram) VALUES(?)',
//[req.body.itemName],
// (error,results) => {
res.redirect('/URL');
}
//});