//tips
//jsonserverおよびターミナルコマンドの確認
ターミナルに記載するecho '{"posts": []}' > db.jsonでjsonserverにdb.jsonをあげているかと思うのでこちらの内容を確認。
ターミナルでのechoの基本的な使い方は、echo 表示するものとなる。
echo Hello!
echo $変数名
echoコマンドで文字列をファイルに出力する場合は、>で出力するファイル名を指定する。
echo 文字列 > ファイル名
echo "h1{font-size:20px;}" > style.css
これはstyle.cssが作成され、その内容として、「h1{font-size:20px;}」が書き込まれる。
ファイルに文字列を追記するのであれば、次のように入力する。
$ echo 追記する文字列 >> ファイル名
シングルクォーテーションの場合、中はすべて文字列であると解釈され、ダブルクォーテーションの場合は、変数が展開されて表示される。
現在のdb.jsonの中身を見ると下記のように表示される。
cat db.json
{"posts": []}
この状態でjson-server db.jsonを行うと無事に読み込みが実行できた。
zsh対応にしたこと、ターミナルを一つのみ使用したこと、が問題解決の糸口になったよう。
読み込まれているdb.jsonのディレクトリの位置としては
node~/.nodebrew/current/bin/jsonserver db.json
にあるよう。
他のターミナルからアクセスしようとしたら下記のように拒否されてしまった。
find / -name jsonserver
find: /usr/sbin/authserver: Permission denied
…
ただ、htmlのファイルはパブリックフォルダから読み込まれて実行されている。
下記のデータが自然と読み込まれている。
そしてこれらのファイルでpostされたjsonデータを表示させる仕組みを構築している。
//index.js
$(function() {
var apiUrl = 'http://localhost:3000/posts';
var message = new Vue({
el: "#post",
methods: {
sendPosts: function(e) {
var self = this;
$.ajax({
type: 'POST',
url: apiUrl,
dataType: 'json',
data: {
name: $("#name").val(),
message: $("#message").val()
}
});
}
}
});
$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json',
success: function(json) {
message.$data.posts = json;
console.dir(json);
},
data: null
});
});
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.5/vue.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Posts message</a>
</div>
</div>
</nav>
<div class="container">
<div id="post">
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"/>
</div>
<div class="form-group">
<label for="message">Message</label>
<input type="text" class="form-control" id="message"/>
</div>
<button class="btn btn-primary" v-on="click: sendPosts">Post</button>
</form>
<h1>Message</h1>
<div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr v-repeat="posts">
<td>{{name}}</td>
<td>{{message}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
であるならば最初から用意されているjsonデータをjs経由で読み込むことも可能なはずなので、そちらのコードをjavascriptで書けないか模索してみる。
nodebrew setup
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.zshrc
source ~/.zshrc
nodebrew install latest
nodebrew use latest
npm init
npm install -g json-server
この状態で下記のdba.jsonファイルを作成する。
{
"articles": [
{ "id": 1, "title": "json-server", "author": "typicode"},
{ "id": 2, "title": "faker.js", "author": "Marak"}
],
"profile": { "name": "typicode" }
}
ここからjson-server --watch dba.jsonを起動。
--watchオプションを付けることでモックデータであるdba.jsonが監視され、手動による修正を行った場合でも、変更内容がAPIレスポンスに反映されるようになる。
Loading dba.json
Oops, dba.json doesn't seem to exist
Creating dba.json with some default data
やはりpublicにjsonファイルを移動させなければならなかったよう。移動させたがやはり存在しないと出てくる。
なぜか探っていたらフォルダ移動をcdでしなければならなかったよう。
cd Public
json-server --watch dba.json
これで無事にdba.jsonを読み込んだモックサーバーを建てられた。
表示ページのresourcesの/articlesをクリックすると
[
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"id": 2,
"title": "faker.js",
"author": "Marak"
}
]
のように表示された。
http://localhost:3000/articles/1にURIを変更すると
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
部分のみを取り出すことができた。
先にも述べたようにJSON Serverでは、プロジェクトディレクトリ直下のpublicディレクトリ内に配置されたHTMLファイルを、ファイルサーバーとしてhttpで公開する機能を持っているので、
mkdir public
echo 'hello world' > public/index.html
としてしまうことでターミナル操作のみでhello worldを表示させることができる。
public以外のディレクトリに配置したい場合は、--staticオプションで任意のディレクトリを指定できる。
# ./wwwディレクトリを指定
json-server db.json --static ./www
リソースの更新処理を行おうとする場合にはターミナルとは別の操作手段が必要となり、DevToolsのConsoleタブでの処理が必要になるよう。
DevToolsはブラウザでコードを編集できるツールで、chromeの場合はページを右クリックをしてメニューから「検証」を選ぶことで利用できる。
少しずつjsonserverの使い方がわかってきた。
参考：
https://www.codegrid.net/articles/2017-json-server-1/
