【css】ロードアニメーション

HTMLのロード完了まで白い画面(gifでも突っ込んでアニメーション)を表示ー>削除


$(window).load(function(){
//	$("#load").remove();
	$("#load").css('-webkit-animation', 'blow ease-in forwards 1s');
	$("#load").css('animation', 'blow ease-in forwards 1s');
});




#load {
	position: fixed;
	width: 100%;
	height: 100%;
	background: white;
	
	opacity: 1;
}
@-webkit-keyframes blow{
	100%{opacity: 0;}
}
@keyframes blow{
	100%{opacity: 0;}
}




<div id="load"></div>
広告

【Express】REST

「RESTfulな*」とか書けばいいのだろうか、知らない。

method-overrideを使えば良いらしいので使う.


var bodyParser = require('body-parser');
var connect = require('connect');
var methodOverride = require('method-override');

// body-parserを上に。
app.use(bodyParser.urlencoded())
app.use(methodOverride(function(req, res){
  if (req.body &amp;&amp; typeof req.body === 'object' &amp;&amp; '_method' in req.body) {
    // look in urlencoded POST bodies and delete it
    var method = req.body._method
    delete req.body._method
    return method
  }
}));

// あとは適当に、req.bodyで取得可
app.get("/hoge", ~
app.post("/fuga", ~

app.put("/piyo", function(req, res){
	res.send(req.body);
});

app.delete("/hogehoge", ~

【Node】req.paramsとreq.bodyの違い

2つの違いを探すのはなにかおかしい気がするけど僕がここで迷ったので記事にする。

[req.params]

app.get("/hoge/:id", function(req, res){
	console.log(req.params.id);
});

要するにURLの指定された場所を見てるようだ。

[req.body]

var bodyParser = require('body-parser');

app.use(bodyParser());

app.post("/hoge", function(req, res){
	console.log(req.body);
	res.send("test")
});

こっちがPOSTしたもの取ってくる奴

※用語各種は理解度が怪しいので使わない

【Express】画像の表示

ここまで辿り着くの長かった。
馬鹿だからね、仕方ないね。

var express = require('express'),
	app = express();

// テンプレートエンジン、今回はejs
app.set(&quot;views&quot;, __dirname + &quot;/views&quot;);
app.set(&quot;view engine&quot;, &quot;ejs&quot;);

// これを指定することによって静的ファイルが見れる。
// ファイルの置き場所はpublicの中、css、img、javascript等はこの中に入れれば見れる。
app.use(express.static(__dirname + '/public'));

app.get(&quot;/&quot;, function(req, res){
	res.render(&quot;index&quot;);
});

app.listen(3000);

|-app.js
|-package.json
|-public
||-style
||-image
||-javascript
|-views
||-index.ejs
|-node_modules

// 追記
// なぜこれで表示できたのか謎、4.xだったのに。

var path = require(&quot;path&quot;);
app.use(express.static(path.join(__dirname, 'public')));

【Express】テンプレートの作成方法と Macのポートスキャン

npm install -g express
npm install -g express-generator
// -e でejsを使用します、と
express -e test

ディレクトリ移動してから

// package.jsonの中に書いてあるmoduleをインストールしてくださる
npm install
npm start

何故か3000番ポートで見れた。
/bin/www
の中に記述されてた。

あとポートスキャンのやり方
finderで[ネットワークユーティリティ]で検索して一番右のportsscan

【Express】POST機能の実装

var express = require('express'),
	// formの値を受け取るためのもの。4.xからこちらを使用。
	//	$npm install body-parser
	bodyParser = require('body-parser'),
	// errorを出すためのもの。4.xからこちらを使用
	//	$npm install morgan
	morgan = require('morgan'),
	app = express();

// テンプレートエンジンの指定とそのディレクトリの指定
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");

// 上から順番に読み込まれる。
app.use(bodyParser());
app.use(morgan());
app.use(express.static(__dirname + "/public"));


// http://localhost/ に入った時に呼び出される。
app.get("/", function(req, res){
	// index.ejsを表示させる。
	res.render("index");
});

// 
//	
//	
//
app.post("/hoge", function(req, res){
	res.send(req.body.name);
});