您好,登錄后才能下訂單哦!
1、supervisor 可以幫助你實現這個功能,它會監視你對代碼的改動,并自動重啟 Node.js。
使用方法很簡單,首先使用 npm 安裝 supervisor:
2、app.js是工程的入口,里面負責定義路由控制器
routes/index.js 是路由控制器文件 用于組織展示的內容
3、index.ejs 是模板文件 即routes/index.js中調用的模版
4、app.get('/hello', routes.hello);
固定的路徑設置路由規則
5、
app.get('/user/:username', function(req, res) { res.send('user: ' + req.params.username); });
高級的路由匹配模式
6、app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
模版引擎,表明要是用的模版引擎是 ejs,模版的位置在 views子目錄下
在routes/index.js的exports.index函數中通過語句來調用模版引擎:
res.render('index', {title: 'Express'})
res.render的作用就是調用模版引擎,并將結果返回給瀏覽器客戶端,它接受的兩個參數
第一個參數是模版的名稱,第二個參數是模版里面要轉換過來的數據,用與模版翻譯
ejs的標簽系統只有三種:<% code %> 表示javascript代碼,
<%= code %> 顯示轉換過HTML特殊字符的內容
<%- code %> 顯示原始HEML內容
7、layout.ejs 是一個網頁布局模版,一般頁眉頁腳等重復比較多的會在這個模版里面來寫,
也可以關閉模版功能,
在app.js中app.configure中layout: false
另一種情況就是,一個項目可能有多個網頁布局模版,前臺或者后臺,
也可以在模版翻譯的時候制定布局模版
res.render('userlist', {
title: '用戶列表后臺管理系統',
layout: 'admin'
});
8、從 http://twitter.github.com/bootstrap/下載 Twitter Bootstrap
從 http://jquery.com/ 下載一份最新版的 jquery.js
-------------------------------------------------------------------------------------------
////////////////////////////Node.js建立項目////////////////////////////////////////////////
-------------------------------------------------------------------------------------------
1、安裝Express框架,
$ npm install -g express //全局安裝 $ npm install -g express -generator //這段命令可別忘了,不然會提示“express命令找不
到的”
2、創建工程
express -e microblog //即ejs,-j(即jade)(Express 4.0出來之后老的命令改變了)
3、創建依賴
cd microblog //microblog為前面創建工程的文件夾 npm install
4、啟動項目
npm start
5、關閉服務器 連著按兩個Ctrl + C。
項目的入口文件 app.js
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app;
6、app.set是Express的參數設置工具,接受一個鍵(Key)一個值(Value)
可用參數如下:
basepath:基礎地址,通常用于res.redirect()跳轉
views:視圖文件目錄,存放模版文件
view engine:視圖模版引擎
view options:全局視圖參數對象
view catch : 啟用視圖緩存
case sensitive routes:路徑是否區分大小寫
strict routing:嚴格路徑,啟用后不會忽略路徑末尾的 "/"
jsonp callback:開啟透明的jsonp支持
7、Express依賴與connect,提供了大量的中間件,用app.use來啟用。
bodyParser的功能是解析客戶端請求,通常是通過POST傳送的內容。
8、
app.use('/', routes); app.use('/users', users);
是一個路由控制器,如果請求是訪問"/"路徑,則會轉到'./routes/index'來控制。
9、app.listen(3000); 啟動,監聽3000端口。該app.js中沒有寫到,會默認端口為3000
在 /bin/ 目錄下的文件 "www" 中,
/** * Get port from environment and store in Express. */ var port = normalizePort(process.env.PORT || '3000'); app.set('port', port); . . . /** * Listen on provided port, on all network interfaces. */ server.listen(port);
10、 routes/index.js是路由文件,相當于控制器,
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;
11、index.ejs 是模板文件,即 routes/index.js 中調用的模板。內容是:
<h2><%= title %></h2> <p>Welcome to <%= title %></p>
12、layout.ejs
默認情況下所有的模板都繼承自 layout.ejs,即 <%- body %>
部分才是獨特的內容,其他部分是共有的,可以看作是頁面框架。
13、 app.js 中并沒有一個路由規則指派到 /stylesheets/style.css,但 app 通過
app.use(express.static(path.join(__dirname, 'public'))); 配置了靜態文件服務器,因此
/stylesheets/style.css 會定向到 app.js 所在目錄的子目錄中的文件 public/stylesheets/style.css,
14、重新寫一個Hello控制器
1)在app.js里面添加:
app.use('/hello', routes);
2)在index.js里面添加
router.get('/hello', function(req, res, next) { res.send('The time is ' + new Date().toString()); });
這兩個文件相互照應著。頁面就出來了
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。