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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、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.