読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

Node.jsフレームワークの新興勢力、nodalで英単語アプリケーションを作る その2

前回はフレームワークを使ってWebアプリケーションを作成する準備をしました。

具体的には、プロジェクトをnewして、ビューとコントローラを作成して、ルーティングを設定して、DBを用意しました。

 

chuckwebtips.hatenablog.com

 

今回は、DBにデータを1件登録して、良い感じにビューに表示させるところまでをやってみたいと思います。

 

githubにあげとく

いきなり脇道にそれるんですが、まずはgithubにあげとこうと思います。

 

まずはgit initでgitを初期化します。

$ git init

 

そして、重くなることが予想されるnode_module以下をgitignoreしときます。

gistb21a00c7a13f6cf4f961

 

pushしたものがこちら。

github.com

 

カラムの追加

さて、さっそくDBにデータを追加しましょう。と行きたいところですが、実はマイグレーションの前にカラムの追加を忘れていました。

単語を格納するwordモデルがスカスカです。

 

gist9dc6cfd0761782fcb6ce

 

これを以下のように変更しました。

giste4380f6ca3de951ec129

 

string型のnot_nullデータとして、カラムを2つ追加しました。

 

マイグレーション

$ nodal db:prepare

でいったんスキーマを空にします。

 

そして、

$ nodal db:migrate

マイグレーションを実行します。

 

以下のとおり、スキーマが変更されました。

gista933c0e7f309a332545c

 

なんか、ここらへんのフローはRailsよりも分かりやすい気がします。

 

データの登録

nodalはconfig/seed.jsというファイルで、初期データをサポートしています。(config?なのか???)

 

なので、以下のようにまずは1件の単語を登録。

gista0203dfec78ffcd197ab

 

以下のコマンドで、初期データを登録します。

$ nodal db:seed

f:id:chuck0523:20160215014033p:plain

きちんとデータが登録されました。

ちなみにseedに関しては、以下のページのDatabase Seedsという項目にあります。

www.nodaljs.com

 

データの取得と表示

さて、DBからデータを取得して表示しましょう。

まずはコントローラにてデータを取得します。

 

以下のように記述することで、DBからモデルを取得できます。

const Model = Nodal.require('app/models/my_model.js');

 

今回はお試しとして、最初の1件を取得してみます。

その際の記述は以下のとおり。

var first = Model.find(1, callback);

callbackにはcollback関数が来ます。

 

取得した単語をビューに渡す、実際のコードは以下のとおり。

gist919e2044d610a3292916

 

これをビュー側で、以下のように書くことで表示できます。

gist83c7daa078524edc56c0

 

 

ブラウザでしかるべきURLにアクセスするとこのとおり。

f:id:chuck0523:20160215232001p:plain

きちんと表示されています。

 

まとめ

登録したデータを取得してビューに表示するまでを行いました。

これさえできれば、超基本のCRUD処理はできたようなものです。

 

次回は、複数データを登録して、それからスタイルを充ててみたいと思います。