プロジェクト内のファイルの確認
プロジェクト内のファイル構成を確認してみる。「greet」プロジェクトのディレクトリ内に移動し、treeコマンドを実行。
$ pwd
/...(略).../greet
$ tree
.
├── README.md
├── project.clj
├── resources
│ └── public
├── src
│ └── greet
│ └── handler.clj
├── target
│ ├── classes
│ └── stale
│ └── extract-native.dependencies
└── test
└── greet
└── test
└── handler.clj
10 directories, 5 files
$
これを踏まえて、まずはproject.cljを編集する。
project.cljの編集
中身を確認。
project.clj
(defproject greet "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:dependencies [[org.clojure/clojure "1.6.0"]
[compojure "1.1.8"]]
:plugins [[lein-ring "0.8.11"]]
:ring {:handler greet.handler/app}
:profiles
{:dev {:dependencies [[javax.servlet/servlet-api "2.5"]
[ring-mock "0.1.5"]]}})
こいつの末尾を次のように変更。
project.clj
(defproject greet "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:dependencies [[org.clojure/clojure "1.6.0"]
[compojure "1.1.8"]]
:plugins [[lein-ring "0.8.11"]]
:ring {:handler greet.handler/app}
:profiles
{:dev {:dependencies [[javax.servlet/servlet-api "2.5"]
[ring-mock "0.1.5"]]}}
;↓この一行を追加。右丸カッコの内側に入れるように注意すること。
:web-content "public")
handler.cljの編集
続いてhandler.cljのルーティングを追加する。まずは変更前のファイルの状態を確認。
handler.clj
(ns greet.handler
(:require [compojure.core :refer :all]
[compojure.handler :as handler]
[compojure.route :as route]))
(defroutes app-routes
(GET "/" [] "Hello World")
(route/resources "/")
(route/not-found "Not Found"))
(def app
(handler/site app-routes))
app-routes内に以下の一行を追加する。
handler.clj
(ns greet.handler
(:require [compojure.core :refer :all]
[compojure.handler :as handler]
[compojure.route :as route]))
(defroutes app-routes
(GET "/" [] "Hello World")
;この一行を追加。
;これで「greet/resources/public/greet.html」なんかを作っておけば、
;「http://localhost:3000/greet.html」へアクセスしてこれを取得できる。
(route/files "/")
(route/resources "/")
(route/not-found "Not Found"))
(def app
(handler/site app-routes))
greet.htmlを作成
HTML5的な行儀の良し悪しはともかく、次の内容のHTMLファイルをpublicディレクトリ直下に作成する。
greet.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<table>
<tr>
<td>First Name:</td>
<td><input name="first_name" type="text" value="" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input name="last_name" type="text" value="" /></td>
</tr>
</table>
<div><input id="greet_button" type="submit" value="Greet" /><div/>
</form>
<div id="greeting_area"></div><br/>
</body>
</html>
静的ファイルへのアクセスを確認
ではブラウザでhttp://localhost:3000/greet.htmlへアクセスしてみる。
ばっちり表示されている。
次はこのHTMLファイルからのPOSTを受け取れるよう、サービス側のルーティングにPOST用のルートを追加してみる。