express-node.js

燁竹

簡(jiǎn)介

express 是基于node.js web 應(yīng)用程式的一種開發(fā)框架，可以快速搭建一個(gè)功能完整的網(wǎng)站
express.js 是建構(gòu)在Node.js 中介軟體模組的，我們叫它c(diǎn)onnect，它的運(yùn)作就是在處理HTTP請(qǐng)求的函數(shù)；每處理完一個(gè)中介軟體函式，會(huì)再傳給下一個(gè)中間軟體的函式。（更多細(xì)節(jié)請(qǐng)看：https://goo.gl/ryvrte）

npm uninstall 模塊

刪除本地模塊時(shí)你應(yīng)該思考的問題：是否將在package.json上的相應(yīng)依賴信息也消除？
npm uninstall 模塊：刪除模塊，但不刪除模塊留在package.json中的對(duì)應(yīng)信息
npm uninstall 模塊 --save 刪除模塊，同時(shí)刪除模塊留在package.json中dependencies下的對(duì)應(yīng)信息
npm uninstall 模塊 --save-dev 刪除模塊，同時(shí)刪除模塊留在package.json中devDependencies下的對(duì)應(yīng)信息

安裝express

如果，你要globally 安裝，直接在command prompt 輸入

npm install -g express

Node.js 應(yīng)用程式初始化，自動(dòng)加入package.json

在command prompt，首先，我們建立一個(gè)資料夾：

mkdir myapp
進(jìn)入該資料夾：
cd myapp
輸入指令：
npm init

根據(jù)步驟，輸入與這個(gè)應(yīng)用程式的相關(guān)資料，它會(huì)以詢答的方式讓你寫入一些資訊，幫你建好一個(gè)package.json，myapp這就是你的一個(gè)node.js應(yīng)用程式

自動(dòng)生成package文件

安裝express套件

npm install express --save

安裝成功

web application

1、Web Server

var express = require('express');
var app = express();
 
// define routes here..
 
var server = app.listen(5050, function () {
    console.log('Node server is running..');
});

執(zhí)行結(jié)果

2、設(shè)定路由
用app.get(), app.post(), app.put(), app.delete() 定義了HTTP的GET, POST, PUT, DELETE 的路由請(qǐng)求

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

app.get('/', function (req, res) {
    res.send("<html><body><h1>hello world</h1></body></html>");
});
 
app.post('/submit-data', function (req, res) {
    res.send('POST Request');
});
 
app.put('/update-data', function (req, res) {
    res.send('PUT Request');
});
 
app.delete('/delete-data', function (req, res) {
    res.send('DELETE Request');
});
 
var server = app.listen(5000, function () {
    console.log('Node server is running..');
});

3、處理post請(qǐng)求
新建index.html

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<form action="/submit-student-data" method="post">
        First Name: <input name="firstName" type="text" />
        Last Name: <input name="lastName" type="text" />
<input type="submit" />
    </form>
 
</body>

添加body-parser模塊（是用來(lái)解析JSON, buffer,字串,及HTTP Post請(qǐng)求提交的url編碼資料）

 npm install body-parser -save

安裝成功如下圖：

添加postapp.js

var express = require('express');
var app = express();
 
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
 
app.get('/', function (req, res) {
    res.sendFile(__dirname+'/index.html');  //回應(yīng)靜態(tài)文件
});
 
app.post('/submit-student-data', function (req, res) {
    var name = req.body.firstName + ' ' + req.body.lastName;
 
    res.send(name + ' Submitted Successfully!');
});
 
var server = app.listen(5000, function () {
    console.log('Node server is running..');
});

4、使用靜態(tài)文件app.use()

var express = require('express');
var app = express();
 
//setting middleware
app.use(express.static(__dirname + '/public')); //Serves resources from public folder
 
var server = app.listen(5050);

在myapp下新增一個(gè)public資料夾,里面存放一些靜態(tài)文件

設(shè)立多個(gè)靜態(tài)服務(wù)

var express = require('express');
var app = express();
 
app.use(express.static('public'));
 
//Serves all the request which includes /images in the url from Images folder
app.use('/images', express.static(__dirname + '/Images'));
 
var server = app.listen(5050);

app.use()第一個(gè)參數(shù)，images其實(shí)就像我們之前講過(guò)的路由名稱，
而實(shí)體位置是在__dirname /Images
在myapp下新增一個(gè)public資料夾，里面放入style.css；另外再新增一個(gè)Images的資料夾，里面放入圖片a001.jpg

在http server提供靜態(tài)服務(wù)—使用node-static
node-static module是http提供靜態(tài)文件服務(wù)的模組。
安裝

npm install -g node-static
cd myapp
npm install node-static --save

安裝以后，我們可以使用node-static 模組了;

var http = require('http');
 
var nStatic = require('node-static');
 
var fileServer = new nStatic.Server('./public');
 
http.createServer(function (req, res) {
 
    fileServer.serve(req, res);
 
}).listen(5050);

數(shù)據(jù)庫(kù)交互

Node.js支援多種不同種類的資料庫(kù)主要介紹ms-sql和Mongodb
ms-sql
1、安裝msql-driver

npm install mssql -g
cd myapp
npm install mssql --save

查看package.json是否安裝成功；
2、建立資料庫(kù)及資料表
在MS-SQL Server Management (MSSM) ，新增一個(gè)叫做SchoolDB的資料庫(kù)，并且新增一個(gè)學(xué)生資料庫(kù)叫做Student。如圖：


添加數(shù)據(jù)：


3、連接資料庫(kù)并且回應(yīng)資料在網(wǎng)頁(yè)上

var express=require('express');
var app=express();
app.get('/',function(req,res){
 var sql=require('mssql');
 
//config for your database
 var config={
    user:'sa',
    password:'justlookvvj',
    server:'localhost\\SQLEXPRESS',   //這邊要注意一下!!
    database:'SchoolDB'
 };
 
//connect to your database
 sql.connect(config,function (err) {
   if(err) console.log(err);
 
//create Request object
   var request=new sql.Request();
request.query('select * from Student',function(err,recordset){
   if(err) console.log(err);
 
//send records as a response
   res.send(recordset);
   });
 });
 
});
 
var server=app.listen(5050,function(){
 console.log('Server is running!');
});

這個(gè)例子我們載入了mssql module，并且呼叫connect()方法，透過(guò)參數(shù)config物件，去連線我們SchoolDB資料庫(kù)。成功連線后，我們用sql.request物件，去執(zhí)行"資料表查詢"，并且把資料取出來(lái)
MongoDB
MongoDB安裝和操作見：http://www.itdecent.cn/p/affa876ba35f
安裝Mongo DB driver

npm install mongodb -g
cd myapp
npm install mongodb --save

新增數(shù)據(jù)

var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');

var url = 'mongodb://tester:password@localhost:27017/lxkdb';

// Use connect method to connect to the server
MongoClient.connect(url,{ useNewUrlParser: true }, function(err, db) {
  assert.equal(null, err);
  var dbo=db.db('lxkdb');  
  dbo.collection('student',function(err,collection){
    collection.insertOne({ id:1, firstName:'Steve', lastName:'Jobs' });
    collection.insertOne({ id:2, firstName:'Bill', lastName:'Gates' });
    collection.insertOne({ id:3, firstName:'James', lastName:'Bond' });
 
    collection.countDocuments(function(err,count){
        if(err) throw err;
        console.log('Total Rows:'+count);
    });
  });

  db.close();
});

結(jié)果如圖：

修改數(shù)據(jù)

var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');

var url = 'mongodb://tester:password@localhost:27017/lxkdb';

// Use connect method to connect to the server
MongoClient.connect(url,{ useNewUrlParser: true }, function(err, db) {
  assert.equal(null, err);
  var dbo=db.db('lxkdb');  
  dbo.collection('student',function(err,collection){
        //collection.update
        //第一個(gè)參數(shù)是要更新的條件，第二個(gè)參數(shù)$set:更新的欄位及內(nèi)容.
        //第三個(gè)參數(shù)writeConcern，第四個(gè)參數(shù)執(zhí)行update後的callback函式
        collection.update({id:2},{ $set: { firstName:'James', lastName:'Gosling'} },
          {w:1}, function(err, result){
              if(err) throw err;
              console.log('Document Updated Successfully');
             });
         });

  db.close();
});

{w:1}的理解：http://aaron-joe-william.iteye.com
結(jié)果如圖：

刪除數(shù)據(jù)：

var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');

var url = 'mongodb://tester:password@localhost:27017/lxkdb';

// Use connect method to connect to the server
MongoClient.connect(url,{ useNewUrlParser: true }, function(err, db) {
  assert.equal(null, err);
  var dbo=db.db('lxkdb');  
  dbo.collection('student',function(err,collection){
        //collection.update
        //第一個(gè)參數(shù)是要更新的條件，第二個(gè)參數(shù)$set:更新的欄位及內(nèi)容.
        //第三個(gè)參數(shù)writeConcern，第四個(gè)參數(shù)執(zhí)行update後的callback函式
        collection.remove({id:2},{w:1},function(err,result){
            if(err) throw err;
            console.log('Document Removed Successfully!');
        });
    });

  db.close();
});

結(jié)果如圖：

查詢數(shù)據(jù)

var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');

var url = 'mongodb://tester:password@localhost:27017/lxkdb';

// Use connect method to connect to the server
MongoClient.connect(url,{ useNewUrlParser: true }, function(err, db) {
  assert.equal(null, err);
  var dbo=db.db('lxkdb');  
  dbo.collection('student',function(err,collection){
    collection.find({firstName:"James"}).toArray(function(err,items){
        if(err) throw err;
        console.log(items);
        console.log("We found "+items.length+" results!");
    });

});

  db.close();
});

結(jié)果如圖：

!!重要!!

關(guān)于更多Collection的操作，可以參考：Collection Methods，特別在使用查詢find，有不同于以往SQL的使用語(yǔ)法

Pug 模板引擎

相關(guān)工具：pug轉(zhuǎn)html ---------html轉(zhuǎn)pug
模版引擎是幫助我們以最小的code去新增一個(gè)Html Template
它可以在客戶端注入一些資料(像是JSON/XML) , Html Template，透過(guò)Template Engine產(chǎn)生最后的HTML呈現(xiàn)至瀏覽器

安裝pug樣版

//cd到myapp中
npm install pug --save
//檢查package.json

添加Myviews文件夾，文件夾下添加pug文件

doctype html
html
    head
        title Jade Page
    body
        h1 This page is produced by Jade engine
        p some paragraph here..

添加js文件

var express = require('express');
var app = express();
 
//set view engine
app.set("view engine","pug")

//set view directory
app.set("views","MyViews")
 
app.get('/', function (req, res) {
    res.render('sample');  // render 執(zhí)行pug文件
});
 
var server = app.listen(3000, function () {
    console.log('Node server is running..');
});

綜合以上，要注意的是：
1.pug template必須寫在.pug檔案里
2.將副檔名為.pug的檔案，儲(chǔ)存在網(wǎng)站根目錄下面的views，express 預(yù)設(shè)從views資料夾取樣版。
3.如果要自訂樣版存放資料夾，我們?cè)趀xpress server必須使用app.set(“veiws","自訂樣版存放資料夾絕對(duì)路徑")

不使用express，執(zhí)行樣版編譯

var http = require('http'); // 1 - Import Node.js core module
var jade= require('pug');
 
var data=jade.renderFile('./MyViews/sample.pug');
 
var server = http.createServer(function (req, res) {   // 2 - creating server
 
    if (req.url == '/') { //check the URL of the current request
        // set response header
        res.writeHead(200, { 'Content-Type': 'text/html' });
        // set response content
        res.write(data);
        res.end();
    }else
        res.end('Invalid Request!');
});
 
server.listen(3000); //3 - listen for any incoming requests 
console.log('Node.js web server at port 3000 is running..')

除了漢字出現(xiàn)亂碼沒什么差別，如圖

pug語(yǔ)法參考：https://pugjs.org/api/getting-started.html

pug與mysql交互（哈哈。其實(shí)本人對(duì)mysql比較有好感）

樣板語(yǔ)法測(cè)試：http://naltatis.github.io/jade-syntax-docs/這個(gè)網(wǎng)站你肯定會(huì)用到的；

cd myapp
npm install mssql --save

pug

doctype html
html
head
title=title
body
    h1  mysql數(shù)據(jù)取出
 
    ul
        each item in catenameList
            li=item.catename

js

var express=require('express');
var app=express();
 
//set view engine
app.set("view engine","pug")
//set view directory
app.set("views","MyViews")
 
app.get('/',function(req,res){
    var mysql=require('mysql');
    //config for your database
    var con = mysql.createConnection({
        host: "localhost",
        user:'root',
        password:'root',
        database:'blog'
    });
    //connect to your database
    con.connect(function (err) {
        if(err) console.log(err);
        con.query('select catename from tp_cate',function(err,recordset){
            if(err)
                console.log(err);
            else
              res.render('sample',{catenameList:recordset});
        });
    });
 
});
 
var server=app.listen(3000,function(){
    console.log('Server is running!');
});

執(zhí)行結(jié)果如下：

更多操作：https://www.w3schools.com/nodejs/nodejs_mysql_select.asp

Pug與mongodb交互

連接mongodb，取得資料

var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');



// Use connect method to connect to the server
module.exports.personList=function(callback){
    MongoClient.connect('mongodb://tester:password@localhost:27017/lxkdb'url,{ useNewUrlParser: true }, function(err, db) {
    assert.equal(null, err);
    var dbo=db.db('lxkdb');  
    dbo.collection('student',function(err,collection){
        collection.find({firstName:"James"}).toArray(function(err,items){
            if(err) throw err;
                db.close();
                callback(items);
        });

    });

    
    });
}

建立模板

doctype html
html
head
title=title
body
    h1 mongodb與pug交互
 
    ul
      for item in personList
        li= item.id + ":"
         p=item.firstName +' '+item.lastName

連接MongoDB，在express執(zhí)行樣版編繹，呈現(xiàn)資料

var mongodata=require('./app.js');
var express=require("express");
var app=express();
 
//set view engine
app.set("view engine","pug")
//set view directory
app.set("views","MyViews")
 
mongodata.personList(function(recordset){
    //console.log(recordset);
    app.get('/',function(req,res){
    res.render('sample', { personList:recordset });
   });
 
});
 
var server=app.listen(3000,function(){
    console.log('Server is running!');
});

執(zhí)行如圖：

pug引用bootstrap

下面用bootstraps制作頁(yè)頭頁(yè)腳（layout）
尋找Bootstrap框架
首先，我們可以進(jìn)入網(wǎng)站getbootstrap，點(diǎn)取上方連結(jié)Getting started，可以找到喜歡的框架版型

進(jìn)入獲取源碼

將Html轉(zhuǎn)換成Jade
進(jìn)入http://html2jade.vida.io/

將轉(zhuǎn)換好的額pug文件略作修改：放入layout.pug文件

編寫js代碼

//postapp.js
var mongodata=require('./app.js');
var express=require("express");
var app=express();
 
//set view engine
app.set("view engine","pug")
//set view directory
app.set("views","MyViews")
 //樣式引用
app.use(express.static('public'));
mongodata.personList(function(recordset){
    //console.log(recordset);
    app.get('/',function(req,res){
    res.render('sample', { personList:recordset });
   });
 
});
 
var server=app.listen(3000,function(){
    console.log('Server is running!');
});

//app.js
var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');



// Use connect method to connect to the server
module.exports.personList=function(callback){
    MongoClient.connect('mongodb://tester:password@localhost:27017/lxkdb',{ useNewUrlParser: true }, function(err, db) {
    assert.equal(null, err);
    var dbo=db.db('lxkdb');  
    dbo.collection('student',function(err,collection){
        collection.find({firstName:"James"}).toArray(function(err,items){
            if(err) throw err;
                db.close();
                callback(items);
        });

    });

    
    });
}

套用layout的pug

extends ./layout
 
block page-header
    h1 pug與bootstrap-------二哈
 
block content
    ul
      for item in personList
        li= item.id + ":"
         p=item.firstName +' '+item.lastName

執(zhí)行如下：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容