原生的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
当使用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请求主体 })