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");
    });
  • 相关阅读:
    WPF 关于拖拽打开文件的注意事项
    asp.net core 3.1中对Mongodb BsonDocument的序列化和反序列化支持
    用百度webuploader分片上传大文件
    多线程学习笔记
    web.config数据库连接字符串加密
    Visual Studio 2010 常用快捷方式
    Team Foundation Server 2013 日常使用使用手册(四)分支与合并
    Team Foundation Server 2013 日常使用使用手册(三)上传新工程、创建任务、创建bug、设置预警
    Team Foundation Server 2013 日常使用使用手册(二)修改、签入、撤销、回滚、对比代码变更
    Team Foundation Server 2013 日常使用使用手册(一)-本地连接TFS、查看任务
  • 原文地址:https://www.cnblogs.com/shenyulin/p/4482820.html
Copyright © 2011-2022 走看看