Nodejs+Express学習一(最も簡単なウェブサイトを構築する)

3198 ワード

一、NodejsとExpressここでは簡単に紹介するだけで、実戦を目的として、そんなにくだらないことを言いたくない.Nodejs:サーバ側で実行されるjavascript(初心者であれば、これを知るだけでいい).Express:ノードプラットフォームベースのWeb開発フレームワーク(フロントエンドの「jquery」と理解できます)
二、作成プロジェクトはnodejsのインストールに対してここで直接スキップします.では、プロジェクトの作成から始めましょう.本人用のIDEWebStormです.cmdのようなコンソールがあるので便利です.次はあまり言わないで、直接始めます.
1.プロジェクトのルートディレクトリとしてフォルダを作成する場所を探します.私は学習用なので、プロジェクト名はstudy1です.2.WebStormでこのプロジェクトを開き、コンソールに初期化プロジェクトをインストールする:npm init、コンソールにはいくつかのステップが順次完了する(私は直接すべて車に戻る)、ステップにはmainのオプションがあり、デフォルトはindex.jsで、この構成はプロジェクト入口ファイルであり、indexで名前を付けたくない場合は、好みに応じて変更することができる.3.expressをインストールし、コマンド:npm install --save expressを実行し、--saveはpackageを更新する.jsonファイル、インストールするものをpackageに更新します.json中.4.テンプレートエンジンをインストールして、私個人はjadeがあまり好きではありません.それは私に多くのコードを少なくすることができますが、私はフロントエンドのエンジニアで、原生のhtmlは私にとってもっと親切です.したがって、ここではexpress-handlebarsをテンプレートエンジンとして使用し、コマンド:npm install --save express-handlebarsを実行してテンプレートエンジンをインストールすることを選択する.以上の基本的な必要なものはインストールが完了しました.次に、以下の図に基づいて、まだないフォルダとファイルを作成してください.
三、エントリファイルindexを作成する.js

//  express
var express = require('express');
   
//  express-handlebars    
var hbs = require('express-handlebars').create({ 
        defaultLayout: 'main', //       main.hbs
        extname: '.hbs'         //        .hbs
    });   
var app = express();

app.set('port',process.env.PORT || 3000);   //    

//       express-handlebars
app.engine('hbs',hbs.engine);
app.set('view engine','hbs');

//  static      public         ,            
app.use(express.static(__dirname + '/public'));

//home   
app.get('/', function (req, res) {
   res.render('home',{
       title:'Home Page'    //     title
   });
});

//about   
app.get('/about', function (req, res) {
    res.render('about',{
        title:'About Page'    //     title
    });
});

app.listen(app.get('port'), function () {
    console.log( '       ,   : '+app.get('port') );
});

今、index.jsの書類を書きました.ミドルウェアに詳しくないかもしれませんが、しばらくは気にしないでください.main.hbsの内容を作成します.



    
    Node Study


    

Nodejs

{{{body}}}
main.hbsは私たちのメインテンプレートとして、私たちが書いた他のページはexpress-handlebarsでレンダリングされ、{{{body}}}main.hbsテンプレートに埋め込まれて完全なページを形成します.そしてviewsの下のhomeを完成します.hbsとabout.hbs:

{{ title }}


ここのtitleは、サーバ側から送信されました.
はい、今私达の最も简単なウェブサイトはすべて完成して、データベースについてはここで言わないで、私は学习の过程の中で関连する文章にフォローして、文章の目的は最も简単なウェブサイトを构筑することです.では、走って、コンソールでコマンド:node index.jsを実行します.印刷された , : 3000が表示されます.このとき、ブラウザのアドレスバーにlocalhost:3000localhost:3000/aboutと入力すると、対応するページが表示されます.
はい、最も簡単なウェブサイトは完成して、後でもともとまたnodejsを引き続き学ぶことができて、だから関連する文章にも引き続きフォローします.