Nodejs之------03 -Express添加第一個可訪問頁面


@Express項目目錄了解
    需要了解的項目主要目錄為:routes和views和app.js,你最好再在項目里新建一個目錄叫models(作用后面講)    
    routes里index.js配置的都是get和post請求的路徑映射關系。
    views里index.ejs就相當於一個html文件,里面就是一些html標簽和<%%>標簽,感覺和jsp差不多哦。
    看起來不錯的樣子,標准的MVC框架(models里放模型,views里面放展示,routes里面放控制)
    app.js,有點像asp.net中的global,控制着用戶訪問頁面地址(例如/bootstrap.html)和routes之間的映射關系。


@添加第一個頁面(不推薦用這種方法添加,太麻煩,推薦用下邊一種方法):
    1,(views-V)例如我想添加一個bootstrap.html頁面,首先在在views文件下,添加bootstrap.html頁面,將html改成ejs就行了,即bootstrap.ejs。
    ---ejs和html內容格式一樣的。

    2,(控制器-C)在routes文件中,新建bootstrap.js文件
    var express = require('express');
    var router = express.Router();
    //上邊兩行為標准代碼,秩序改動下邊中間代碼即可。

    /* GET home page. */
    router.get('/', function(req, res, next) {  
      res.render('bootstrap', { title: 'bootstrap' });   //bootstrap為views下對應的bootstrap.ejs頁面的名稱。
    });

    module.exports = router;  //標准代碼

    3,(url重寫)
    最后在app.js中添加一組映射關系代碼:    
    var bootstrap=require('./routes/bootstrap'); //指定bootstrap.html頁面對應的routes對象,該文件在routes目錄下,后綴名為js。
    app.use('/bootstrap.html',bootstrap);  //bootstrap.html為外部訪問地址名稱,名字可以隨意設置。bootstrap為上邊的變量名。

    4,css,js,images,fonts等文件直接復制到public目錄下即可,一般情況下會自動調用,特殊情況,調動不了,需要調整頁面路徑。

    5,就差Model-M了。

@第二種方法添加頁面(只需三步,1添加一個html文件,2添加三行代碼,3添加一行代碼。)
    ---如果按上面方法添加頁面,每增一個頁面,就需要在routes中添加一個對應js文件,那會暈掉。怎么辦?解決方法如下:
    1,(views-V)例如我想添加一個bootstrap.html頁面,首先在在views文件下,添加bootstrap.html頁面,將html改成ejs就行了,即bootstrap.ejs。
    ---ejs和html內容格式一樣的。
    2,(控制器-C,作用:承上啟下,連接程序入口和頁面)統一在routes下的index.js中配置頁面的請求路由,也就是請求映射處理。只有在需要情況下,才新建新的路由文件,如何新建?看上邊第一種方法。    
    router.get('/bootstrap.html2', function(req, res, next) {
  res.render('bootstrap', { title: 'bootstrap' });
});
    //這里res.render('bootstrap'...對應的就是views中的bootstrap.ejs文件。
    //router.get('/bootstrap.html2...對應的是app.js中添加代碼的名稱
    3,app.js文件中,只需要添加一行代碼即可,作用白話說就是程序入口關聯控制器。
    app.use('/bootstrap.html2',routes);  //添加到app.use('/', routes);下邊
    //routes就是var routes = require('./routes/index');,即關聯routes下的index.js文件。這里bootstrap.html2和上邊控制器中的bootstrap.html2是對應的,即對外客戶訪問的頁面名稱,可以隨意寫,返回的是bootstrap.ejs頁面。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM