zoukankan      html  css  js  c++  java
  • express总结(一)

    Express 框架核心特性:

    • 可以设置中间件来响应 HTTP 请求。
    • 定义了路由表用于执行不同的 HTTP 请求动作。
    • 可以通过向模板传递参数来动态渲染 HTML 页面。

    express保留了Node原生的功能,添加了一些方法增强原有的功能

    安装 Express

    • npm install express --save

    几个重要的模块是需要与 express 框架一起安装的

    body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。

    cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。

    multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据

    请求和响应

    • Express 应用使用回调函数的参数: request 和 response 对象来处理请求和响应的数据。
    app.get('/', function (req, res) {
       // --
    })

    req.path:获取请求路径
    req.query:获取URL的查询参数串
    req.route:获取当前匹配的路由


    res.append():追加指定HTTP头
    res.send():传送HTTP响应
    res.cookie(name,value [,option]):设置Cookie
    opition: domain / expires / httpOnly / maxAge / path / secure / signed
    res.clearCookie():清除Cookie
    res.send():传送HTTP响应

    路由

    • 路由路由决定了由谁(指定脚本)去响应客户端请求通过路由提取出请求的URL以及GET/POST参数。

      使用express中的路由访问子页面必须使用use请求

      var server=express();   
      server.listen(8080);
      server.use('/', require('./route/web.js')());
      server.use('/admin/', require('./route/admin.js')());

        require()访问route/admin.js文件,返回路由的页面。

    const express=require('express');
    module.exports=function (){
    
      var router=express.Router();
    
      router.get('/login', (req, res)=>{
        res.render('admin/login.ejs', {});
      });
    
      router.get('/', (req, res)=>{
        res.render('admin/index.ejs', {});
      });
      
      router.get('/bannerInserOrUpdate',(req,res)=>{
          res.render('admin/bannerInserOrUpdate.ejs')
      });
      return router;
    };

    Get请求

    • 表单中通过 GET 方法提交两个参数,我们可以使用 server.js 文件内的
      process_get 
      路由器来处理输入
    //index.html
        <form class="" action="/getinfo" method="get">
      用户:   <input type="text" name="user" value=""><br>
      密码:    <input type="text" name="password" value=""><br>
          <input type="submit" name="" value="提交">
        </form>
    

      

    // server.js
    const
    express=require("express");
    var server= express(); server.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }); server.get('/process_get ',function(req,res){ var response = { user:req.query.user, password:req.query.password }; console.log(response); res.write(JSON.stringify(response)); res.end(); }); server.listen(8080);

    Post请求

    • 通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入

      

        <!----index.js--->
        <form class="" action="/process_post" method="post">
      用户:   <input type="text" name="user" value=""><br>
      密码:   <input type="text" name="password" value=""><br>
          <input type="submit" name="" value="提交">
       </form>

     server.js文件

    const express=require("express");
    const bodyParser=require("body-parser");
    // 创建 application/x-www-form-urlencoded 编码解析
    
    var  server= express();
    server.get('/index.html', function (req, res) {
       res.sendFile( __dirname + "/" + "index.html" );
    });
    
    var urlencodedParser = bodyParser.urlencoded({ extended: false })
    server.post('/process_post',urlencodedParser,function(req,res){
    
      response = {
          user:req.body.user,
          password:req.body.password
      };
    
      res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});//设置response编码为utf-8
      console.log(response);
      res.write(JSON.stringify(response));
      res.end();
    });
    
    server.listen(8080);

    静态文件

    • Express 提供了内置的中间件 express.static 来设置静态文件如:图片, CSS, JavaScript 等。
    • 你可以使用 express.static 中间件来设置静态文件路径。例如,如果你将图片, CSS, JavaScript 文件放在 public 目录下
    server.use(static('./static/'))

     上传文件

    html页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文件上传</title>
    </head>
    <body>
        <h3>文件上传:</h3>
        <form action="/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="imageFile" />
            <br />
            <input type="submit" value="上传文件" />
        </form>
    </body>
    </html>

    server,js页面

    var fs = require('fs');
    var express = require('express');
    var multer  = require('multer');
    
    var upload = multer({dest: 'uploads/'});
    
    var   app= express();
      // 单域单文件上传:input[file]的 multiple != "multiple"
    app.post('/upload', upload.single('imageFile'), function(req, res, next) {
        // req.file 是 前端表单name=="imageFile" 的文件信息(不是数组)
        fs.rename(req.file.path, "upload/" + req.file.originalname, function(err) {
            if (err) {
                throw err;
            }
            console.log('上传成功!');
        })
        res.writeHead(200, {
            "Access-Control-Allow-Origin": "*"
        });
        res.end(JSON.stringify(req.file)+JSON.stringify(req.body));
    })
    
    app.get('/index', function (req, res) {
       res.sendFile( __dirname + "/" + "index.html" );
    });
    
    app.listen(8080);
  • 相关阅读:
    HDU 1015(字符运算 **)
    IOS7中自动计算label的宽度和高度的方法
    IOS开发UI基础文本属性Attributes
    IOS开发UI基础UIControl事件
    IOS开发UI基础UIImagePickerController的属性
    IOS开发UI基础UITableView的属性
    IOS开发UI基础UIActivityIndicatorView的属性
    IOS开发UI基础 UIAlertView的属性
    IOS开发UI基础UIImageView属性属性
    IOS开发UI基础 UIDatePicker的属性
  • 原文地址:https://www.cnblogs.com/tianranhui/p/10082142.html
Copyright © 2011-2022 走看看