溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Node.js筆記(一)項目的建立

發(fā)布時間:2020-06-05 12:53:14 來源:網(wǎng)絡 閱讀:501 作者:ge03001 欄目:web開發(fā)

1、supervisor 可以幫助你實現(xiàn)這個功能,它會監(jiān)視你對代碼的改動,并自動重啟 Node.js。

   使用方法很簡單,首先使用 npm 安裝 supervisor:

2、app.js是工程的入口,里面負責定義路由控制器

   routes/index.js 是路由控制器文件 用于組織展示的內(nèi)容

3、index.ejs 是模板文件 即routes/index.js中調(diào)用的模版

4、app.get('/hello', routes.hello);

   固定的路徑設置路由規(guī)則


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函數(shù)中通過語句來調(diào)用模版引擎:

   res.render('index', {title: 'Express'})

   res.render的作用就是調(diào)用模版引擎,并將結果返回給瀏覽器客戶端,它接受的兩個參數(shù)

   第一個參數(shù)是模版的名稱,第二個參數(shù)是模版里面要轉換過來的數(shù)據(jù),用與模版翻譯


   ejs的標簽系統(tǒng)只有三種:<% code %>  表示javascript代碼,

 <%= code %> 顯示轉換過HTML特殊字符的內(nèi)容

 <%- code %> 顯示原始HEML內(nèi)容

7、layout.ejs  是一個網(wǎng)頁布局模版,一般頁眉頁腳等重復比較多的會在這個模版里面來寫,

               也可以關閉模版功能,

      在app.js中app.configure中l(wèi)ayout: false

               另一種情況就是,一個項目可能有多個網(wǎng)頁布局模版,前臺或者后臺,

      也可以在模版翻譯的時候制定布局模版

       res.render('userlist', {

title: '用戶列表后臺管理系統(tǒng)',

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、創(chuàng)建工程

express -e microblog //即ejs,-j(即jade)(Express 4.0出來之后老的命令改變了)

3、創(chuàng)建依賴

cd microblog //microblog為前面創(chuàng)建工程的文件夾
npm install

4、啟動項目

npm start

Node.js筆記(一)項目的建立


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的參數(shù)設置工具,接受一個鍵(Key)一個值(Value)

可用參數(shù)如下:

  1. basepath:基礎地址,通常用于res.redirect()跳轉

  2. views:視圖文件目錄,存放模版文件

  3. view engine:視圖模版引擎

  4. view options:全局視圖參數(shù)對象

  5. view catch : 啟用視圖緩存

  6. case sensitive routes:路徑是否區(qū)分大小寫

  7. strict routing:嚴格路徑,啟用后不會忽略路徑末尾的 "/"

  8. jsonp callback:開啟透明的jsonp支持

7、Express依賴與connect,提供了大量的中間件,用app.use來啟用。

bodyParser的功能是解析客戶端請求,通常是通過POST傳送的內(nèi)容。


8、

app.use('/', routes);
app.use('/users', users);


是一個路由控制器,如果請求是訪問"/"路徑,則會轉到'./routes/index'來控制。


9、app.listen(3000); 啟動,監(jiān)聽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 中調(diào)用的模板。內(nèi)容是:

<h2><%= title %></h2>
<p>Welcome to <%= title %></p>

12、layout.ejs

默認情況下所有的模板都繼承自 layout.ejs,即 <%- body %>

部分才是獨特的內(nèi)容,其他部分是共有的,可以看作是頁面框架。


13、 app.js 中并沒有一個路由規(guī)則指派到 /stylesheets/style.css,但 app 通過

app.use(express.static(path.join(__dirname, 'public'))); 配置了靜態(tài)文件服務器,因此

/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());
});

這兩個文件相互照應著。頁面就出來了

Node.js筆記(一)項目的建立


向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI