Blockchain code Metaverse VR

Unity×VR×Blockchain(213)

スポンサーリンク

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

Node の JSON Server とそのサービス My JSON Server が凄く便利だった

人気の記事

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.