零基础入门Express

nodemon
安装npm install -g nodemon
运行：nodemon

1.express介绍

• express是什么呢？
  express是基于Node.js平台，快速/开发/极简的web开发框架
• express能够做什么呢？
  他能够写一些web的应用/写一个网站/聊天室/商城/给前端提供API
• 如何安装？
  npm install express --save
• express的特性
  1. 它是一个简单的路由系统
  2. 它集成了很多模版引擎
  3. 它是一个中间件系统
• 一个简单的express实例

// 导入express模块
var express = require('express');
//形成实例
var app = express();
//get方法 生成路由
app.get('/',(req,res)=>{
    res.send('this is homepage')
})
//监听在一个端口上
app.listen(3000);

nodemon 运行 127.0.0.1:3000直接访问到路由

---

2.express的应用Application

这个app对象通常表示Express应用程序，通过调用express()Express模块导出的顶级函数来创建它

var express = require("express");
var app = express();

属性

• app.locals
  这个对象的属性是应用程序中的局部变量。

事件

• app.on('mount',callback(parent))
  当子应用程序挂载到父应用程序上时，会触发mount事件

方法

• app.all(path,callback[,callback])
• app.listen([port[,host[,backlog]]][,callback])
  绑定并侦听指定主机和端口上的连接
  app.listen(3000)
• app.delete()
  用指定的回调函数将HTTP DELETE 请求路由到指定的路径
• app.get()
  用指定的回调函数将HTTP GET请求路由到指定的路径
• app.post()
  用指定的回调函数将HTTP POST请求路由到指定的路径
  表带提交使用Post提交
  模拟表单数据安装body-parser插件

x-www-form-urlencoded:标准的表单提交
form-data:有文件上传的表单提交

body-parser官网
npm install body-parser --save
multer:处理文件上传
安装：npm install --save multer
博客推荐：

image.png

文件上传实例：

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs'); 
var app = express();
var multer  = require('multer');
var createFolder = (folder)=>{
    try{
        fs.accessSync(folder)
    }catch(e){
        fs.mkdirSync(folder)
    }
}
var uploadFolder = './upload/'
createFolder(uploadFolder);
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, uploadFolder)
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
  })
   
  var upload = multer({ storage: storage })

// parse application/x-www-form-urlencoded
//中间件函数，就是在请求和响应之间，把请求内容进行处理 
app.use(bodyParser.urlencoded({ extended: false }))
app.get('/form',(req,res)=>{
    var form = fs.readFileSync('./form.html',{encoding:"utf8"}) 
    res.send(form); 
})
//模拟post请求，谷歌浏览器Postman插件
app.post('/upload',upload.single('logo'), (req,res)=>{
    console.dir(req.file);
    /**{ fieldname: 'logo',
     originalname: 'test.py',
    encoding: '7bit',
    mimetype: 'text/x-python-script',
    destination: './upload/',
    filename: 'logo-1566119695314',
    path: 'upload/logo-1566119695314',
    size: 7 }
   */
    res.send({'render_code':0})
})
app.listen(3000);
// parse application/json
//处理JSON数据
// app.use(bodyParser.json())


// app.use(function (req, res) {
//     res.setHeader('Content-Type', 'text/plain')
//     res.write('you posted:\n')
//     res.end(JSON.stringify(req.body, null, 2))
// })

上传成功的文件

---

3.express的响应Response

Res对象表示Express应用程序在收到HTTP请求时发送的HTTP响应。

var express = require('express');
var app = express();
app.get('/person/:id',(req,res)=>{
    res.send('user:'+req.params.id)
})
app.listen(3000)

image.png

res的属性

• res.headersSent表示应用程序是否为响应发送了HTTP Header

app.get('/person/:id',(req,res)=>{
    console.dir(res.headersSent)//false
    res.send('user:'+req.params.id)
    console.dir(res.headersSent)//true
})

res的方法

• res.append(field[,value])
  将指定的内容追加value到HTTP响应头field。
• res.attachment([文件名])
  将http响应Content-Disposition头字段设置为"attachment"
• res.cookie(name,value,[,options])
  设置cookie

属性	类型	描述
domain	串	cookie的域名，默认为应用程序的域名
encode	功能	用于cookie值编码的同步函数
expires	日期	cookie到期日
httpOnly	布尔	标记cookie只能由web服务器访问
maxAge	数	用于设置相对于当前时间的到期时间
path	串	Cookie的路径
secure	布尔	将cookie标记为仅与HTTPS一起使用
signed	布尔	指示cookie是否应该签名
sameSite	布尔或串	Set-Cookie属性的值

res.cookie('name','tangjiao',{
    domain:'.qq.com',
    httpOnly:true,
    expires:new Date(new Date().getTime()+9000),
    path:'/person',
    maxAge: 12000000,
})

• res.clearCookie(name,[,options])
  清除指定的cookie name
  res.clearCookie('name',{path:'admin'})
• res.end([data][,encoding])
  结束响应过程
  res.end
• res.json()
  发送JSON响应
  res.json({user:'tang'})
• res.jsonp()
  使用jsonp支持发送json响应
  res.jsonp({user:'tang'})
• res.redirect([status,]path)
  重定向到指定的url

res.redirect('/foo/bar');
res.redirect(301,'www.baidu.com')

• res.render(view[,locals][,callback])
  将要呈现的HTML字符串发送到客户端
• res.send([body])
  发送HTTP响应
  re.send('hello world')
• res.sendFile(path[,options][,fn])
• res.sendStatus
  将响应HTTP状态代码设置为statusCode并将其字符串表示形式发送为响应正文。
  res.sendStatus(200)//相当于res.status(200).send('OK')

---

4.express的请求Request

该req对象表示HTTP请求，并具有请求查询字符串，参数，正文，HTTP Header等的属性。

res.get('/user/:id',(req,res)=>{
    res.send(req.params.id)
})

属性

• req.app
  表示对使用中间件的Express应用程序实例的引用
• req.baseUrl
  安装路由器实例的URL路径
• req.body
  表示请求正文中提交的键值对数据
• req.cookies
  包含请求发送的cookie的对象
• req.hostname
  表示http请求的主机名
• req.ip
  表示请求的ip地址
• req.params
  表示路由映射的参数
• req.query
  表示路由中每个查询字符串的属性

方法

• req.get()
  返回指定的HTTP请求表头字段

req.get("Content-Type");//"text/plain"

5.express的路由Router

路由器对象是中间件和路由的独立实例。您可以将其视为一个“迷你应用程序”，仅能执行中间件和路由功能。每个Express应用程序都有内置的应用程序路由器。

方法

• router.all(path,[callback,]callback)
  它匹配所有的路由方法
• router.get()
  匹配get请求

router.get('/user',(req,res)=>{
    res.send('user')
})

---

6.将模板引擎用于 Express

在 Express 可以呈现模板文件之前，必须设置以下应用程序设置：

views：模板文件所在目录。例如：app.set('views', './views')
view engine：要使用的模板引擎。例如：app.set('view engine', 'pug')
然后安装对应的模板引擎 npm 包：
npm install ejs --save

---

7.中间件

中间件函数是可以访问request/response以及app的request-response周期的下一个中间件函数的函数，下一个中间件函数由next()表示。
中间件函数的功能：

• 全局更改请求和响应对象
• 调用堆栈中的下一个中间件函数

中间件的类型

i.app的中间件

var app = express()
//没有装载路径的中间件功能，每次app收到请求时都会执行该功能
app.use((req,res,next)=>{
    console.log('Time:'+Date.now())
    next();
})
//此示例显示了路由及其处理函数（中间件系统）。该函数处理对/user/:id路径的GET请求。
app.get('/user/:id', function (req, res, next) {
  res.send('USER')
})

ii.router的中间件

和app中间件功能一致，只不过它被绑定到一个实例express.Router()。

iii.错误处理中间件

以与其他中间件函数相同的方式定义错误处理中间件函数，除了四个参数而不是三个，特别是(err, req, res, next)）：

app.use(function (err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

iv.第三方中间件

使用第三方中间件为Express应用程序添加功能
app.use(bodyParser.urlencoded({ extended: false }))