node express web開發框架

lkycan發表於2017-12-14
ExpressWeb框架

###1、web開發框架express 以ejs模版方式建立

express ejs ejsItem
//ejsItem  你的專案名字

複製程式碼

Paste_Image.png

切換到你的專案目錄，執行install

cd ejsItem


複製程式碼

Paste_Image.png

執行安裝依賴的模組

npm install
複製程式碼

Paste_Image.png

安裝中：

Paste_Image.png

完成結果：

Paste_Image.png

執行執行伺服器

node app.js

複製程式碼

發現啟動不了

Paste_Image.png

原因是express 裡面的app.js 移除了預設的監聽的埠，為了給開發者可以自己更多的自定義。 解決辦法在app.js檔案最後新增對於埠的監聽。

//注意看這句有沒有
// module.exports = app;
app.set('port', 3000);//監聽3000埠
app.listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
});

複製程式碼

Paste_Image.png

再次啟動，訪問即可。 ####2、supervisor 啟動專案 為了方便除錯安裝伺服器程式碼安裝supervisor，通過supervisor來啟動專案，實現實時更新伺服器程式碼的變化。

npm  install supervisor -g
複製程式碼

啟動：

supervisor  app.js
複製程式碼

Paste_Image.png

Paste_Image.png

####3、預設路由簡單分析 開啟app.js檔案

//引入路由控制器
var index = require('./routes/index');
var users = require('./routes/users');
var can = require('./routes/can');//這就是我加的

....

//使用相關的檢視模版
app.use('/', index);
app.use('/users', users);
app.use('/can', can);//這句是我加的

複製程式碼

路由控制對照

Paste_Image.png

檢視對照

Paste_Image.png

index路由（或者說控制器）程式碼分析：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
//指定使用那個檢視模版
  res.render('index', { title: '首頁' });
});

module.exports = router;

複製程式碼

users.js路由（或者說控制器）程式碼分析：

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
//直接返回一段文字。
  res.send('respond with a resource');
});

module.exports = router;

複製程式碼

新新增的路由以及檢視can.js 和 can.ejs app.js的配置

var can = require('./routes/can');

app.use('/can', can);
複製程式碼

Paste_Image.png

訪問結果：

Paste_Image.png

現在對文章有了解了嘛，可以簡單分為下面步驟： 1.新建控制器,也就是can.js 2.新建檢視模版,也就是can.ejs 3.在入口引入控制器 這樣你就可以通過訪問不同的地址顯示不同的頁面了。 例如你可以建立home，about 等等，一系列下來，你網站頁面大體不就完成了嘛，剩下的就往坑裡面塞資料吧。

相關文章