zoukankan      html  css  js  c++  java
  • express学习 nodejs

    Express

    Express简介

    • 一个简洁、灵活
    • node.js Web应用开发框架,
    • 提供一系列强大的功能,比如:模板解析、静态文件服务、中间件、路由控制等等
    • 可以使用插件或整合其他模块来帮助你创建各种 Web和移动设备应用
    • 目前最流行的基于Node.js的Web开发框架
    • 支持Ejs、jade等多种模板,可以快速地搭建一个完整功能的网站

    Express创建

    var express = require('express');

    var app = express();

    app.get('/', function (request, response) {

    response.send('Hello World!');

    });

    app.listen(80);

    get请求

    get根据请求路径来处理客户端发出的GET请求。

    格式:app.get(path,function(request, response));

    path为请求的路径,第二个参数为处理请求的回调函数,有两个参数分别是request和response,代表请求信息和响应信息。

    var express = require('express');

    var app = express();

    app.get('/', function(request, response) {

    response.send('Welcome to the homepage!');

    });

    app.get('/about', function(request, response) {

    response.send('Welcome to the about page!');

    });

    app.get("*", function(request, response) {

    response.send("404 error!");

    });

    app.listen(80);

    Middleware中间件

    中间件简介:

    中间件(middleware)就是处理HTTP请求的函数,用来完成各种特定的任务,比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。

    最大的特点:一个中间件处理完,可以把相应数据再传递给下一个中间件。

    例 1:一个不进行任何操作、只传递request对象:

    function Middleware(request, response, next) {

       next();

    }

    All函数

    app.all()函数可以匹配所有的HTTP动词,也就是说它可以过滤所有路径的请求(相当于所有请求都必须先通过此该中间件)。

    格式:app.all(path,function(request, response));

    例 1: 使用all设置响应头

    var express = require("express");

    var app = express();

    app.all("*", function(request, response, next) {

    response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });

    next();

    });

    app.get("/", function(request, response) {

    response.end("欢迎来到首页!");

    });

    app.get("/about", function(request, response) {

    response.end("欢迎来到about页面!");

    });

    app.get("*", function(request, response) {

    response.end("404");

    });

    app.listen(80);

    Use方法

    1、use调用中间件

    use是express调用中间件的方法。

    格式:app.use([path], function(request, response, next){});

    例 1:use调用两个

    var express = require('express');

    var app = express();

    app.use(function(request, response, next){

        console.log("method:"+request.method+","+"url:"+request.url);

        next();

    });

    app.use(function(request, response){

        response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });

        response.end('连续调用两个中间件');

    });

    app.listen(80);

    代码详情:

    先调用第一个中间件,在控制台输出一行信息,然后通过next(),调用第二个中间件,输出HTTP回应。由于第二个中间件没有调用next方法,所以request对象就不再向后传递了。

    2、根据请求的网址,返回不同的网页内容

    例 2:通过request.url属性,判断请求的网址,从而返回不同的内容

    var express = require("express");

    var app = express();

    app.use(function(request, response, next) {

    if(request.url == "/") {

    response.send("Welcome to the homepage!");

    }else {

    next();

    }

    });

    app.use(function(request, response, next) {

    if(request.url == "/about") {

    response.send("Welcome to the about page!");

    }else {

    next();

    }

    });

    app.use(function(request, response) {

    response.send("404 error!");

    });

    app.listen(80);

    req相关操作

    • req.host    请求头里取的主机名(不包含端口号);
    • req.path    请求的URL的路径名
    • req.url      请求的url
    • req.query   获取get请求路径的对象参数值

    req.param

    req.param和属性query一样,通过req.param我们也可以获取被解析过的请求参数对象的值。

    例1: 获取请求根路径的参数值,如/?n=Lenka,方法如下:

    var express = require('express');

    var app = express();

    app.get("/", function(req, res) {

        console.log(req.param("n")); //Lenka

        res.send("使用req.param属性获取请求根路径的参数对象值!");

    });

    app.listen(80);

    例2:我们也可以获取具有相应路由规则的请求对象,假设路由规则为 /user/:name/,请求路径/user/mike,如下:

    app.get("/user/:name/", function(req, res) {

        console.log(req.param("name")); //mike

        res.send("使用req.param属性获取具有路由规则的参数对象值!");

    });

    send()方法向浏览器发送一个响应信息,并可以智能处理不同类型的数据。

    1.当参数为一个String时,Content-Type默认设置为"text/html"。

    res.send('Hello World'); //Hello World

    2.当参数为Array或Object时,Express会返回一个JSON。

    res.send({ user: 'tobi' }); //{"user":"tobi"}

    res.send([1,2,3]); //[1,2,3]

    3.当参数为一个Number时,并且没有上面提到的任何一条在响应体里,Express会帮你设置一个响应体,比如:200会返回字符"OK"。

    res.send(200); // OK

    res.send(404); // Not Found

    res.send(500); // Internal Server Error

    模板引擎

    express默认渲染模板:ejs和jade。

    EJS

    1. ejs模板安装方法

    npm install ejs

    2. 目录下安装好了之后,如何调用呢,如下所示:

    //指定渲染模板文件的后缀名为ejs

    app.set('view engine', 'ejs');

    3. 修改ejs模板支持渲染html形式的文件,并engine注册模板引擎的函数,处理指定的后缀名文件。

    // 修改模板文件的后缀名为html

    app.set( 'view engine', 'html' );

    // 运行ejs模块

    app.engine( '.html', require( 'ejs' ).__express );

    静态文件(CSS、jS、images)

    如果要在网页中加载静态文件(css、js、img),就需要另外指定一个存放静态文件的目录,当浏览器发出非HTML文件请求时,服务器端就会到这个目录下去寻找相关文件。

    1. 项目目录下添加一个存放静态文件的目录为public。

    2. 在public目录下在添加三个存放js、css、img的目录,相应取名为javascripts、stylesheets、images。

    3. 然后就可以把相关文件放到相应的目录下了。

    4. 比如,浏览器发出如下的样式表请求:

     <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">

    5、在启动文件里告诉它这个静态文件路径,如下所示:

    app.use(express.static(require('path').join(__dirname, 'public')));

    注: 使用use函数调用中间件指定express静态访问目录,express.static :指定静态文件的查找目录,public:存放静态文件的总目录。

    Session?

    1、  安装express-session

    2、  配置(app.js)

    var session = require('express-session');
    app.use(session({
        secret:'secret',
        resave:true,
        saveUninitialized:false,
        cookie:{
            maxAge:1000*60*60*24  //过期时间设置(单位毫秒)
        }
    }));

    路由?

    路由——为不同的访问路径,指定不同的处理方法。

    例:

    module.exports = function ( app ) {

    app.get('/home',function(req,res){

    if(req.session.user){

    res.render('home');

    }else{

    req.session.error = "请先登录"

    res.redirect('login');

    }

    });

    }

    如何访问页面?

    render函数,对网页模板进行渲染。

    格式:res.render(view, [locals], callback);

    按指定url跳转?

    redirect方法允许网址的重定向,跳转到指定的url并且可以指定status,默认为302方式。

    格式:res.redirect([status], url);

    如:跳转到登陆页res.redirect("login");

     

    访问视图:

    1、 get

     

     

     

    2、 post

    post方法 —— 根据请求路径来处理客户端发出的Post请求。

    格式:app.post(path,function(req, res));

    例:

    app.post('/login',function(req,res){
    var user={username:'admin', password:'admin'}

    if(req.body.username==user.username&&req.body.password==user.password)
    {
        res.send("恭喜你登录成功");
    }else{
        res.send("用户名或密码错误,请重新登录");
    }

    });

    body基本用法

    1、body简介

    body属性解析客户端的post请求参数,通过它可获取请求路径的参数值。

    格式:req.body.参数名;

    例:login.html页面,为登陆按钮增加点击事件:

    <input type="button" onclick="login();" value="登 陆">

    function login(){

       var username = $('#username').val();

       var data = { "username": username };

       $.ajax({

               url:'/login',

               type:'POST',

               data:data

              });

    }

     

    2、安装和引用express的两个中间件body-parsermulter(中间件body-parser和multer用于处理和解析post请求的数据)

     

    2.1 安装

    npm install body-parser

    npm install multer

    2.2 引用和调用

    var bodyParser = require('body-parser');

    var multer = require('multer');

    ......

    app.use(bodyParser.json());

    app.use(bodyParser.urlencoded({ extended: true }));

    app.use(multer());

     

     

     

     

     

     

    APP.js文件:

    var express=require("express");
    var app=express();

    var path=require("path");
    var favicon = require('serve-favicon');

    //设置模板文件的存储位置
    app.set('views', path.join(__dirname, 'views'));

    //设置视图模板引擎为ejs,还有其他模板引擎,如:jade
    //app.set('view engine', 'ejs');

    //修改
    ejs模板支持渲染html形式的文件,并engine注册模板引擎的函数,处理指定的后缀名文件。
    app.set( 'view engine', 'html' );
    app.engine( '.html', require( 'ejs' ).__express );


    // 设置favicon图标
    //app.use(favicon(__dirname + '/public/favicon.ico'));



    app.listen(8888,function(){
       console.log("启动成功");
    });


    //app.all("*", function(request, response, next) {
    //    response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
    //    next();
    //});

    var  fs=require("fs");
    app.get('/', function(req, res) {
        console.log(req.url);
        res.render("/views/home");
    });
  • 相关阅读:
    05-----数据类型转换
    04-----赋值运算符
    03-----数据类型
    02-----第一个JavaScript代码
    Fxx and game
    Bomb
    Stammering Aliens
    DISUBSTR
    Life Forms
    后缀数组二·重复旋律2
  • 原文地址:https://www.cnblogs.com/shenyulin/p/4482820.html
Copyright © 2011-2022 走看看