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