- 本アプリケーションはYAPC::Hokkaido 2016の「Vue.jsによるWebアプリケーション開発」のトーク用に実装したサンプルアプリケーションです。
- 自分専用の日報Webアプリケーション。日報の投稿・一覧表示・削除。
- Vue.js vue-router axios Lumen
- PHP 7.0.13以上
- Lumen 5.3で必要
- MySQLがローカル環境にインストール済みとし、root/パスワード無しでアクセス可能とする
- NodeJS v6.9.1
APIで利用するDBのマイグレーションを実行します。詳しくはmigrationsディレクトリをご確認ください。
# DBマイグレーションに必要なライブラリをダウンロードします
$ cd api
$ composer install
# DBマイグレーションを実行します
# 事前にcreate database nippo;でnipppoデータベースを作成してください。
$ vendor/bin/phpmig migrate
$ cd ..
各種フロントエンドパッケージをインストールします
$ npm install
- 下記コマンド実行後にブラウザで
http://127.0.0.1:8080/#/が立ち上がり閲覧できるようになります。 - 内部でhttpサーバー、API、ビルドを同時に実行します。
$ npm start
以下はAPIドキュメントです
- GET /api/nippoes
- GET /api/nippoes/:id
- POST /api/nippoes
- PUT /api/nippoes/:id
- DELETE /api/nippoes/:id
無し
[
{
"id": 5,
"content": "hoge",
"created_at": "2016-11-12 06:45:56",
"updated_at": "2016-11-12 06:45:56"
},
{
"id": 6,
"content": "hoge",
"created_at": "2016-11-12 07:00:52",
"updated_at": "2016-11-12 07:00:52"
}
]- id: 日報ID
{
"id": 5,
"content": "hoge",
"created_at": "2016-11-12 06:45:56",
"updated_at": "2016-11-12 06:45:56"
}- content: 日報本文
{
"content": "hoge",
"updated_at": "2016-11-12 07:08:29",
"created_at": "2016-11-12 07:08:29",
"id": 7
}- id: 日報ID
{
"id": 7,
"content": "fuga",
"created_at": "2016-11-12 07:08:29",
"updated_at": "2016-11-12 07:09:54"
}- id: 日報ID
手元でAPIの挙動を確認したい際にご利用ください。
$ curl -v http://localhost:8000/api/nippoes | jq .
$ curl -v http://localhost:8000/api/nippoes/1 | jq .
$ curl -v -X -H "Accept: application/json" -H "Content-type: application/json" -X POST -d ' {"content": "hoge"}' http://localhost:8000/api/nippoes | jq .
$ curl -v -X -H "Accept: application/json" -H "Content-type: application/json" -X PUT -d ' {"content": "fuga"}' http://localhost:8000/api/nippoes/1
$ curl -v -X -H "Accept: application/json" -H "Content-type: application/json" -X DELETE http://localhost:8000/api/nippoes/1