Nodejs+Express学習一(最も簡単なウェブサイトを構築する)
一、NodejsとExpressここでは簡単に紹介するだけで、実戦を目的として、そんなにくだらないことを言いたくない.
二、作成プロジェクトは
1.プロジェクトのルートディレクトリとしてフォルダを作成する場所を探します.私は学習用なので、プロジェクト名は
三、エントリファイルindexを作成する.js
今、
ここの
はい、今私达の最も简単なウェブサイトはすべて完成して、データベースについてはここで言わないで、私は学习の过程の中で関连する文章にフォローして、文章の目的は最も简単なウェブサイトを构筑することです.では、走って、コンソールでコマンド:
はい、最も簡単なウェブサイトは完成して、後でもともとまた
Nodejs
:サーバ側で実行されるjavascript(初心者であれば、これを知るだけでいい).Express
:ノードプラットフォームベースのWeb開発フレームワーク(フロントエンドの「jquery
」と理解できます)二、作成プロジェクトは
nodejs
のインストールに対してここで直接スキップします.では、プロジェクトの作成から始めましょう.本人用のIDE
はWebStorm
です.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:3000
とlocalhost:3000/about
と入力すると、対応するページが表示されます.はい、最も簡単なウェブサイトは完成して、後でもともとまた
nodejs
を引き続き学ぶことができて、だから関連する文章にも引き続きフォローします.