zoukankan      html  css  js  c++  java
  • ch1-使用路由-静态资源-404页面-ejs模板

    1 package.json
    项目文件夹根目录创建这个文件
    //要依赖的模块
    "dependencies": { //dependency 依赖的复数形式
    "express": "latest"
    }
    创建好后 npm install 安装(出现node_modules)

    2 nodeJS 原生hello world
    app.js文件代码
    var http = require('http'); //依赖http块
            server = http.createServer(function(req, res){ //request 请求 response 返回
                res.writeHeader(200, { //200请求成功 Content-Type请求类型
                    'Content-Type': 'text/plain',
                });
                res.end('<p>hello world --by nodeJS</p>'); //end()表示请求结束
            }).listen(300); //服务器开启在300接口
            console.log('Server running at http://127.0.0.1:300');

    3 exprss 简单使用
    3.1 express简单使用不用其他文件的最简单hello world
    app.js文件代码
            var http = require('http'),
                express = require('express'),
                app = express();
            //express 简单使用(只用一个js文件)
            app.get('/', function(req, res){
                res.send('这是最简单的nodejs express使用');
            });
            //创建服务器并监听接口
            http.createServer(app).listen(500);
       3.2 express 简单使用路由
    创建 router/index.js;

    app.js 文件代码;
    var http = require('http'),
    express = require('express'),
    app = express();

    //express 使用router
    app.use('/', require('./router/index.js'));
    //创建服务器并监听接口
    http.createServer(app).listen(500);
    router/index.js代码
    var express = require('express'),
    router = express.Router();
    //简单使用
    router.get('/', function(req, res){
    res.send('nodejs express 简单使用router');
    });
    //输出router
    module.exports = router;

    3.3 express router/index.js 使用正则匹配地址
    router.get('/a+b+', function(req, res){
    res.send('nodejs express 简单使用router');
    });
    此时 http://127.0.0.1:500/访问不到
    符合正则表达式的地址: http://127.0.0.1:500/ab 或 aaabb 或abbb 但acb不行 abbc也不行

    4 nodeJs常用的变量 调试方法只有console.log();
    console.log(__filename); //输出文件名
    console.log(__dirname); //输出当前文件所在目录名 被执行的js 文件的地址
    console.log(process.cwd()); //当前执行node命令时候的文件夹地址
    ./当前目录
    ../父目录
    /根目录

    5 express模板的使用 使用的是ejs模板--和html只是后缀名不同
    app.js文件代码
    var http = require('http'),
    express = require('express'),
    app = express();
    //设置视图模板引擎目录(当前视图模板的目录)
    app.set('views', __dirname +'/views');
    //设置视图模板引擎使用的模板的类型
    app.set('view engin', 'ejs');

    //express 使用router
    app.use('/', require('./router/index.js'));

    //创建服务器并监听接口
    http.createServer(app).listen(500);
    router/index.js文件代码
    var express = require('express'),
    router = express.Router();
    router.get('/', function(req, res){
    //设置使用的模板使用的引擎是什么
    res.render('index.ejs'); //可以省.ejs 'index'代表响应的是index.ejs模板引擎 render[ˈrendə(r)]使成为 表达 给予
    });
    //输出router
    module.exports = router; //exports 输出
    views/index.ejs文件代码
    <% include header.ejs %> //引用用同级header.ejs

    5.1 router/index.js 传给模板参数的不同
    router/index.js文件代码
    res.render('index.ejs', {'name': 'jeson'});
    views/index.ejs文件代码
    <%= name %>

    5.2 当传递的不需要转义时候
    router/index.js文件代码
    res.render('index.ejs', {'name': '<h1>wulv</h1>'}); //传递标签时
    views/index.ejs文件代码
    <%= name %>
    <%- name %> //正常输出wulv在h1里面 没有转义的
    5.3 <% %> 用来写js代码
    views/index.ejs 循环输出4个p
    <% for(var i=0;i<4;i++){ %>
    <p>循环输出</p>
    <% } %>
    5.4 引入其他模板例如头部 底部分离 <% include xxx.ejs %>
    public/header.ejs 创建通用头部
    index.ejs文件代码
    <% include header.ejs %>
    5.4 router传递一个json对象时
    router/index.js文件代码
    var express = require('express'),
    router = express.Router();
    router.get('/', function(req, res){
    var obj = {
    'name': 'Jeson',
    'age': 25,
    'direction': 'web'
    };
    res.render('index.ejs', {person: obj});
    });
    //输出router
    module.exports = router;
    views/index.ejs文件代码
    <% for(var key in person){ %>
    <%= person[key] %>
    <% } %>

    6 静态资源(css js img)
    创建静态资源目录 public
    img public/img
    css public/css
    js public/js
    6.1 使用
    app.js文件代码
    var http = require('http'),
    express = require('express'),
    app = express();
    //设置视图模板引擎目录
    app.set('views', __dirname +'/views');
    //设置模板引擎的类型
    app.set('view engine', 'ejs');

    //设置静态资源目录 js img css
    app.use(express.static(__dirname +'/public')); //express托管静态文件,设置静态文件目录
    app.use('/', express.static(__dirname +'/public')); //设置静态文件访问的地址(可指定一个虚拟目录)
    //'/abc' 添加后 http://127.0.0.1:300/abc 才能访问首页

    //express 使用router
    app.use('/', require('./router/index.js'));

    //创建服务器并监听接口
    http.createServer(app).listen(500);
    router/index.js文件代码
    var express = require('express'),
    router = express.Router();
    router.get('/', function(req, res){
    //设置使用的模板使用的引擎是什么
    //res.render('index.ejs'); //可以省.ejs 'index'代表响应的是index.ejs模板引擎
    //res.render('index.ejs', {name: '<h1>wulv</h1>'}); //传递标签时
    var obj = {
    'name': 'Jeson',
    'age': 25,
    'direction': 'web'
    };
    res.render('index.ejs', {person: obj});
    });
    //输出router
    module.exports = router;
    public/index.ejs文件代码
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="js/jquery.js">
    <img src="/img/hzw1.jpg" alt="">

    6.2 404页面
    在public目录下建立 404.html
    访问 http://127.0.0.1:500/404.html

  • 相关阅读:
    20171121
    20171117
    20171106
    20171031
    20171024
    20170924
    20170721
    商品的分类
    会员价格的修改
    会员价格删除
  • 原文地址:https://www.cnblogs.com/easyweb/p/6641684.html
Copyright © 2011-2022 走看看