わからんわｗ

超基本

doctype html
html
    head
        meta(charset='UTF-8')
        title タイトルタイトル
    body
        h1 やっほ
        p ほげほげ

views ディレクトリにjadeファイル
npm startするとpackage.json内の「"start": "node ./bin/www"」が実行される

新しくページを作りたい

例えばtest1を追加したい場合

views/test1.jadeになんか書く
routes/indes.jsに以下を追記

router.get('/test1', function(req, res) {
  res.render('test1');
});

jsからjadeへ値を渡す

router.get('/test1', function(req, res) {
    res.render('test1',
    {
        title: 'タイトル',
        message: 'ふぇえ'
    }
    );
});

jade

doctype html
html
    head
        meta(charset='UTF-8')
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        h1= title
        p Welcome to #{message}

jadeの出力を綺麗にする

app.jsにて以下を追記

app.set('view engine', 'jade');
app.locals.pretty = true;　←これ

Jadeのテンプレート継承を利用

bootstrapとJqueryつかいたい views/base.jade

doctype html
html
    head
        meta(charset='UTF-8')
        title= title
        block header
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css')
    body
        block content
    block footer
    script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js')
    script(src='//code.jquery.com/jquery-2.1.1.min.js')

test1.jade

extends base

block content
    h1= title
    p Welcome to #{message}

以下のように出力される

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    <h1>タイトル</h1>
    <p>Welcome to ふぇえ</p>
  </body>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</html>

POSTを使ってみる

以下の様なフォームを作成

form(action="/result", method="post")
    input(name='username' , type="text")
    input(type="submit", value="実行")

result.jadeはこのように

p= username

最後にroutes/index.jsに以下を追記

router.post('/result', function(req, res){
    var result = {
        username: req.body.username
    };
    res.render('result', result);
});

GETも使ってみる

さっきの状態でroutes/index.jsに以下を追記。router.postがrouter.getになってる点と、req.body.usernameがreq.query.usernameになってる点に注意

router.get('/result', function(req, res){
    var result = {
        username: req.query.username
    };
    res.render('result', result);
});

TwitterOauth

npm install passport passport-twitter express-session

app.use('/users', users);以下に追記する。コンシューマーキーとかURLは適宜変更して

var session = require('express-session');
app.use(session({secret: 'keyboard cat'}));
var passport = require('passport');
var TwitterStrategy = require('passport-twitter').Strategy;
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser(function(user, done){
    done(null, user);
});
passport.deserializeUser(function(obj, done){
    done(null, obj);
});
var TWITTER_CONSUMER_KEY = "";
var TWITTER_CONSUMER_SECRET = "";

passport.use(new TwitterStrategy({
    consumerKey: TWITTER_CONSUMER_KEY,
    consumerSecret: TWITTER_CONSUMER_SECRET,
    callbackURL: 'http://192.168.1.55:3000/callback'
    },
    function(token, tokenSecret, profile, done) {
        passport.session.token = token;
        passport.session.profile = profile;
        process.nextTick(function () {
            return done(null, profile);
        });
    }
));
app.get('/',
    function(req, res) {
        if (req.user){
            res.send('<html><body>Hello ' + req.user.username + '　<a href="/logout">logout</a></body></html>')
        }else{
            res.send('<html><body><a href="/login">Sign in with Twitter</a></body></html>')
        }
        
    }
    
);
app.get('/login', passport.authenticate('twitter'));
app.get('/callback',
    passport.authenticate('twitter', { failureRedirect: '/login' }),
    function(req, res) {
        res.redirect('/');
    }
);
app.get('/logout', function(req, res){
    req.logout();
    res.redirect('/');
});

routes/index.jsの/表示は今回は使わないのでコメント化

/* GET home page. */
//router.get('/', function(req, res) {
//  res.render('index', { title: 'Express' });
//});

mongoDB

サーバーインストール

apt-get install mongodb-server

npm install mongoose

動かざることバグの如し

近づきたいよ君の理想に

express　jadeめも

超基本