Blockchain code Metaverse VR

Unity×VR×Blockchain(211)

スポンサーリンク

//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/

初めてのVue.js「入門編」基礎から学ぼう!サンプルコードで丁寧に解説(郵便番号から住所の自動取得をやってみる)

https://blog.codecamp.jp/json-server-beginner

 

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.