前回はフレームワークを使ってWebアプリケーションを作成する準備をしました。
具体的には、プロジェクトをnewして、ビューとコントローラを作成して、ルーティングを設定して、DBを用意しました。
今回は、DBにデータを1件登録して、良い感じにビューに表示させるところまでをやってみたいと思います。
githubにあげとく
いきなり脇道にそれるんですが、まずはgithubにあげとこうと思います。
まずはgit initでgitを初期化します。
$ git init
そして、重くなることが予想されるnode_module以下をgitignoreしときます。
pushしたものがこちら。
カラムの追加
さて、さっそくDBにデータを追加しましょう。と行きたいところですが、実はマイグレーションの前にカラムの追加を忘れていました。
単語を格納するwordモデルがスカスカです。
これを以下のように変更しました。
string型のnot_nullデータとして、カラムを２つ追加しました。
再マイグレーション
$ nodal db:prepare
でいったんスキーマを空にします。
そして、
$ nodal db:migrate
でマイグレーションを実行します。
以下のとおり、スキーマが変更されました。
なんか、ここらへんのフローはRailsよりも分かりやすい気がします。
データの登録
nodalはconfig/seed.jsというファイルで、初期データをサポートしています。（config？なのか？？？）
なので、以下のようにまずは１件の単語を登録。
以下のコマンドで、初期データを登録します。
$ nodal db:seed
きちんとデータが登録されました。
ちなみにseedに関しては、以下のページのDatabase Seedsという項目にあります。
データの取得と表示
さて、DBからデータを取得して表示しましょう。
まずはコントローラにてデータを取得します。
以下のように記述することで、DBからモデルを取得できます。
const Model = Nodal.require('app/models/my_model.js');
今回はお試しとして、最初の１件を取得してみます。
その際の記述は以下のとおり。
var first = Model.find(1, callback);
callbackにはcollback関数が来ます。
取得した単語をビューに渡す、実際のコードは以下のとおり。
これをビュー側で、以下のように書くことで表示できます。
ブラウザでしかるべきURLにアクセスするとこのとおり。
きちんと表示されています。
まとめ
登録したデータを取得してビューに表示するまでを行いました。
これさえできれば、超基本のCRUD処理はできたようなものです。
次回は、複数データを登録して、それからスタイルを充ててみたいと思います。
