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请求主体
    })
  • 相关阅读:
    CSS的学习
    nodejs
    eureka注册中心
    netty的机制
    分布式事务
    spring cloud的基础
    一个发散动画的菜单控件(主要记录控件x,y坐标的运动状况)
    关于ViewPager高度自适应(随着pager页的高度改变Viewpager的高度)
    ViewPager的使用总结
    Android实现沉浸式状态栏(必须高逼格)
  • 原文地址:https://www.cnblogs.com/lianglanlan/p/12602327.html
Copyright © 2011-2022 走看看