//tips
//jsonserver動作確認
前回下記のようにjsonserverへの接続ができたので新規ターミナルを立ち上げてそちらで処理を行なっていく。
json-server db.json
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/users
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
まずはdb.jsonに入っているデータを取得してみる。
curl -i http://localhost:3000/users
を実行する。するとhttpを利用してサーバーにアクセスし、下記のようにしっかりとdb.jsonに書かれた内容が返ってきた。
HTTP/1.1 200 OK
X-Powered-By: Express
Vary: Origin, Accept-Encoding
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
X-Content-Type-Options: nosniff
Content-Type: application/json; charset=utf-8
Content-Length: 91
ETag: W/"5b-RmJhLfIsN54rEkip/lyeTKmvhMM"
Date: Sun, 23 May 2021 02:18:27 GMT
Connection: keep-alive
Keep-Alive: timeout=5
[
{
"id": 1,
"name": "futoase"
},
{
"id": 2,
"name": "hogehoge"
}
]%
curl -i http://localhost:3000/users/1とし、Idを指定して取り出すと
{
"id": 1,
"name": "futoase"
}%
のように表示される。
次にPOSTを試してみる。
curl -X POST http://localhost:3000/users -d name=fugafugaをターミナルに入力すると、curl -i http://localhost:3000/usersを行った時に下記のように内容が追加される。
[
{
"id": 1,
"name": "futoase"
},
{
"id": 2,
"name": "hogehoge"
},
{
"name": "fugafuga",
"id": 3
}
]%
新規追加部分だけ確認する場合にはcurl http://localhost:3000/users/3とすることで
{
"name": "fugafuga",
"id": 3
}%
が表示される。
また、curl -X PUT http://localhost:3000/users/3 -d name=uhyohyoとすることでid3の名前を書き換えることができる。
{
"name": "uhyohyo",
"id": 3
}%
また、http://localhost:3000/usersをgoogleのブラウザに打ち込むとjson形式でページが表示される。
Vue.js を使用することでwebページとjsonserverに挙げられているjsonファイルの内容を連動させられるようなのでVue.jsの使い方を確認しながら連動ページを作成する。
json-server db.json
をターミナルに入れるとjsonserverがありませんと表示されてしまったので、
nodebrew setup
echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.bash_profile
source ~/.bash_profile
nodebrew install-binary stable
npm init
npm install -g json-server
echo '{"posts": []}' > db.json
json-server db.json
open index.html
とたどっていった。
参考github:
https://github.com/futoase/message-board-for-vuejs
Postを行なっても反映されなかったので、確認するとJSON Serverではpublicディレクトリに配置されているファイルが http://localhost:3000 に表示されるらしく、publicディレクトリにindex.htmlを置いて実装しなければいけないよう。
ディレクトリの配置が問題な気がする。
mv index.js Publicのようにpublicにjsとhtmlファイルを移動。
Public % ls
index.html index.js
うむむ、ディレクトリは問題ないがうまくポストができない。
Vue.jsがうまく使えていないのかと思い、vue.jsの機能を実行。
下記のようにindex.htmlとscript.jsを作成し、htmlにjsを参照させ、text部分を読み込ませた。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuedemo</title>
</head>
<body>
<div id="app">
<p>{{text}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="script.js"></script>
</body>
</html>
new Vue({
el:'#app',
data(){
return{
text:"hello world!"
};
}
})
きちんとページにhello worldが表示された。
先のindex.htmlの参照部分を一部変更したが効果はなかった。
<script src="index.js"></script>//./index.js
http://localhost:3000/postsからうまくjsonデータを取得できていないのが問題のよう。下記を見るとやはりパスの問題が濃厚。
https://github.com/typicode/json-server/issues/228
そもそものjsonserverとMacのディレクトリの関係を抑える方が先のような気がする。
下記も参考にしつつ、問題点を探る。
https://www.to-r.net/media/json-server/
https://blog.codecamp.jp/json-server-beginner
