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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.