zoukankan      html  css  js  c++  java
  • express

    原生的http在某些方面表现不足以应对我们的开发需求,所以需要使用框架来加快我们的开发效率,框架的目的就是提高效率,让我们的代码更高度统一。

    安装:

    npm install express --save

    hello world 示例

    const express = require('express')
    const app = express()
    const port = 3000
    
    app.get('/', (req, res) => res.send('Hello World!'))
    
    app.listen(port, () => console.log(`Example app listening on port ${port}!`))

    基本路由

    get:

    app.get('/', (req, res) => res.send('Hello World!'))

    post:

    app.post('/', (req, res) => res.send('got a post request'))

    静态资源

    提供图像、CSS文件等静态资源,可使用express.static内置中间件功能

    语法:

    express.static(root, [options])

    root参数指定提供静态资产的根目录

    app.use(express.static('public'))
    //express相对于root查找静态目录,静态目录的名称并不是url的一部分,例如访问/public/a.js,使用 http://localhost:3000/a.js 访问

    可多次调用express.static使用多个静态资源目录

    app.use(express.static('public'))
    app.use(express.static('files'))

    也可以为静态资源提供路径前缀

    app.use('/a', express.static('public'))
    //使用 http://localhost:3000/a.js 访问
    
    app.use('/abc/d', express.static('public'))
    //使用 http://localhost:3000/abc/d/a.js 访问

    在express中使用模板引擎

    与Express一起使用的一些流行模板引擎是pug,Mustache和EJS。 Express应用程序生成器使用Jade作为默认设置,但它也支持其他几个。

    Jade已更名为pug

    有关可以与Express一起使用的模板引擎的列表,参见https://github.com/expressjs/express/wiki#template-engines

    要渲染模板文件,需在app.js中设置以下属性:

    • views  模板文件所在的目录,默认为根目录中的views目录
    • view engine  需要使用的模板引擎

    然后安装相应的模板引擎npm软件包;例如安装Pug:

    npm install pug --save

    设置视图引擎后,无需指定引擎或在应用程序中加载模板引擎模块, Express会在内部加载模块。第二个参数是文件名后缀。如下

    app.set('view engine', 'pug')

    如修改模板文件所在目录,如下

    app.set('views', './files')

    在指定的views目录中创建一个名为index.pug的Pug模板文件,其内容如下

    html
      head
        title= title
      body
        h1= message

    之后在app.js中render

    res.render('html模板名', { 模板数据 })

    第一个参数不用写路径,默认会去项目中的views目录查找改模板

    app.get('/', (req, res) => {
        res.render('index', {
            title: 'hi',
            message: 'hello world'
        })
    })
    
    app.listen(3000, () => console.log('running'))

    运行app.js并发送请求,index.pug文件将呈现为HTML

    在express中使用nunjucks模板引擎

    下载安装nunjucks,app.js如下

    const express = require('express')
    const nunjucks = require('nunjucks')
    
    const app = express()
    
    app.set('view engine', 'njk')  //文件名后缀是njk
    
    nunjucks.configure('views', { autoescape: true, express: app });
    
    app.get('/', (req, res) => {
        res.render('index', {
            title: 'hi',
            message: 'hello world'
        })
    })
    
    app.listen(3000, () => console.log('running'))

    如果渲染的模板文件仍想保持后缀名为html,可以如下

    const express = require('express')
    const nunjucks = require('nunjucks')
    
    const app = express()
    
    app.set('view engine', 'html')  //与上面代码不同的只有第二个参数
    
    nunjucks.configure('views', { autoescape: true, express: app });
    
    app.get('/', (req, res) => {
        res.render('index', {
            title: 'hi',
            message: 'hello world'
        })
    })
    
    app.listen(3000, () => console.log('running'))

    这样会找./views目录下的index.html文件

    在express中获取get请求参数

    app.get('/post', (req, res) => {
        console.log(req.query)
    })

    在express中获取post请求参数

    参考中间件 body-parser

    中间件

    body-parser

    当使用post请求时,不能像get请求一样通过req.query获取请求主体

    express中没有内置获取表单post请求体的API,这里我们需要使用第三方包

    安装

    npm i -S body-parser

    引包

    const bodyParser = require('body-parser')

    配置

    app.use(bodyParser.urlencoded({ extended: false }))
    app.use(bodyParser.json())
    
    app.post('/pinglun', (req, res) => {
        const comment = req.body    //post请求主体
    })
  • 相关阅读:
    SAP OPEN UI5 Step 8: Translatable Texts
    SAP OPEN UI5 Step7 JSON Model
    SAP OPEN UI5 Step6 Modules
    SAP OPEN UI5 Step5 Controllers
    SAP OPEN UI5 Step4 Xml View
    SAP OPEN UI5 Step3 Controls
    SAP OPEN UI5 Step2 Bootstrap
    SAP OPEN UI5 Step1 环境安装和hello world
    2021php最新composer的使用攻略
    Php使用gzdeflate和ZLIB_ENCODING_DEFLATE结果gzinflate报data error
  • 原文地址:https://www.cnblogs.com/lianglanlan/p/12602327.html
Copyright © 2011-2022 走看看