CSV import/export – Node.js, mySQL #1
mysqlとnode.jsを用いて、ブラウザを通してのcsvファイルのインポートとエクスポートを行います。
データベースを操作するmySQLとサーバー側を操作するnode.jsがどのようにフロントエンドと繋がるのかを演習します。
使用する技術・ツール
・MySQL、MySQLworkbench
・node.js(express)
・JavaScript、JQuery
まずはmySQLworkbenchを用いてcsvファイルをテーブルデータに入れてみます。
mysqlの設定
使用するcsvファイル・・・jukenresult.csv
使用ツール・・・mySQLworkbench
mySQLworkbenchをダウンロード
https://www.mysql.com/jp/products/workbench/
・MySQL Connections横の+ボタンを押して既存のもしくは新規ユーザー名でログインします。（画像はroot）
・新しいデータベースを作成します
|
1 |
CREATE DATABASE newtraining; |
exercise 1
作成したデータベースの中にjukenresult.csvを入れることができるテーブルを作成してください。
|
1 |
use newtraining; |
〜テーブル作成〜
できたら、試しにworkbenchを用いてjukenresult.csvをテーブルにロードできるか確かめてみてください。
確認できたら、テーブル内のデータを一旦空にします。
|
1 |
delete from newtraining; |
サーバーのセットアップ
本演習では、最終的には以下の画像のような画面を作成します。
要件は
・csvファイルを選択しSubmitボタンを押すとcsvファイルがテーブルに読み込まれる。
・csvファイルを読み込んだテーブルの状態が作成した専用フォルダにcsvファイルとして出力される。
・専用フォルダに入ったファイルはダウンロードボタンと共にブラウザ上に表示され、押すとダウンロードされる。
です。
これらを達成するために３つのファイルが必要です。
具体的には
・ブラウザに表示するためのindex.html
・MySQLの操作やブラウザのアクションを制御するサーバー側のnode.jsファイル
・ブラウザとnode.jsの仲介を行うJavaSciriptファイル
の３つです。
まずはnode.jsからindex.htmlを表示させてみます。
index.htmlを以下のように作成します。
index.html
|
1 2 3 4 5 6 7 8 9 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="htmlget.js"></script> <form action="upload" enctype="multipart/form-data" method="POST"> <h1>...File input</h1> <input id="exampleInputFile" class="form-control-file" name="upName" type="file" aria-describedby="fileHelp" /> <input class="btn" type="submit" /></form> <h3>...download file</h3> <div id="outputelement"></div> <div id="getspan"></div> |
次にnode.js側の簡単なファイルを作成します。
今回はnode.jsの代表的なフレームワークであるexpressを導入します。
csvuploadserver.js という名前のファイルを作成します。
expressappというフォルダを作り、その中にcsvuploadserver.jsを入れます。
expressモジュールをインストールします。
|
1 |
npm install express |
コマンドプロンプトでexpressappに入ります。
詳細なパッケージを得るため以下のコマンドを行います。
|
1 2 3 |
npm init npm install express --save npm install ejs |
これでexpressを使用する準備ができました。
index.htmlをexpressappフォルダ内に入れます。
csvuploadserver.jsの中身を編集します。
csvuploader.js
|
1 2 3 4 5 |
var express = require('express'); var app = express(); app.use('/', express.static('.')); app.listen(8080); |
コマンドラインで
|
1 |
node csvuploader.js |
を行うとサーバーが立ち上がります。
http://localhost:8080 に入るとindex.htmlが表示されます。
