nodejs第三方模块express框架

Express

Express 框架

• 基于 Node.js 平台，快速、开放、极简的 web 开发框架

• express 官网

• express 中文网

起步

• 安装：npm i express

// 导入 express
var express = require('express')
// 创建 express实例，也就是创建 express服务器
var app = express()

// 路由
app.get('/', function (req, res) {
  res.send('Hello World!')
})

// 启动服务器
app.listen(3000, function () {
  console.log('服务器已启动')
})

API说明

• express()：创建一个Express应用，并返回，即：app

• app.get()：注册一个GET类型的路由

  -- 注意：只要注册了路由，所有的请求都会被处理（未配置的请求路径，响应404）

• res.send()：发送数据给客户端，并自动设置Content-Type

        -- 参数可以是：字符串、数组、对象、Buffer

        -- 注意：只能使用一次

• req 和 res：与http模块中的作用相同，是扩展后的请求和响应对象

注册路由

• 1 app.METHOD：比如：app.get / app.post / app.delete / app.patch

• 3 app.use(path, callback) 更重要的作用是处理中间件

        -- 注意：只要是以path开头的请求地址，都可以被use处理

        -- 注意：可以处理任意的请求类型

        -- 注意：path参数可省略，默认值为：/

实现静态服务器

• req.path：请求路径

       -- 示例：URL为'example.com/users?sort=desc'，path表示：/users

• res.sendFile()

处理静态资源

• 静态资源：图片、CSS、JavaScript 文件 等

• 如何处理？使用 express.static() 方法来托管静态资源

• 注意：express.static()可以调用多次

// 托管web目录下的静态资源
app.use(express.static('web'))
// 相当于：app.use('/', express.static('web'))

// 访问上述静态资源
// http://localhost:3000/anoceanofsky.jpg

// 当请求达到服务器后，express就会到web目录下，查找anoceanofsky.jpg
// 并读取该文件，返回给浏览器

request常用属性和方法

// 获取请求路基中的参数，是一个对象 ---> Get请求参数
req.query

// 获取POST请求参数，需要配置`body-parser`模块， POST请求参数
req.body

• 获取POST请求参数

// 导入body-parser模块
var bodyParser = require('body-parser');
// 将POST请求参数转化为对象，存储到req.body中
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

// 此时，就可以获取到POST请求参数了
console.log(req.body)

response常用属性和方法

// send() 发送数据给客户端，并自动设置Content-Type
res.send()

// 发送文件给浏览器，并根据文件后缀名自动设置Content-Type
// 注意：文件路径必须是绝对路径
res.sendFile(path.join(__dirname, 'index.html'))

// 设置HTTP响应码
res.sendStatus(200) // equivalent to res.status(200).send('OK')

// 设置响应头
res.set('Content-Type', 'text/plain')
res.set({
  'Content-Type': 'text/plain',
  'cute': 'fangfang'
})

// 重定向
res.redirect('/index')

Express使用模板引擎

// 为后缀为html的模板设置模板引擎
app.engine('html', require('express-art-template'))

// 设置模板文件所在的目录
app.set('views', './')
// 设置模板文件的后缀为 html
app.set('view engine', 'html')

// 渲染 index.html 模板文件，并发送给浏览器
res.render('index', { list: [] })

Express 中外置路由使用

• 目的：将路由封装到一个独立的路由模块中，有利于代码的封装和模块化

/*
  router.js 文件代码如下:
*/

// 1 加载 express 模块
var express = require('express')

// 2 调用 express.Router() 方法，得到一个路由容器实例
var router = express.Router()

// 3 为 router 添加不同的路由
router.get('/', function (req, res) {
  res.send('hello express')
})
router.get('/add', function (req, res) {

})

// 4. 将 router 路由容器导出
module.exports = router

/*
  在 app.js 文件中：
*/
var express = require('express')

// 1 加载上面自定义的路由模块
var router = require('./router')

var app = express()

// 2. 将自定义路由模块 router 通过 app.use() 方法挂载到 app 实例上
//    这样 app 实例程序就拥有了 router 的路由
app.use( router )

app.listen(3000, function () {
  console.log('running...')
})

案例：

/* 
  express中如何使用art-template
    1. 安装  npm i art-template express-art-template
    2. 给app设置好模版  app.engine('html', require('express-art-template'))
    3. res.render(模版的路径, 数据)

  原生nodejs中使用模版引擎
    1. 安装  npm i art-template
    2. 导入  const template = require('art-template')
    3. 渲染页面  const html = template(模版的路径, 数据)
    4. 设置请求头 res.setHeader('content-type', 'text/html')
    5. 丢回去： res.end(html)




  body-parser中间件的使用说明
    1. 安装  npm i body-parser
    2. 导入  var bodyParser = require('body-parser')
    3. 使用
    app.use(bodyParser.urlencoded({ extended: true })); // 解析表单数据
    app.use(bodyParser.json());
*/
// 启动服务器
const path = require('path')
const querystring = require('querystring')
const moment = require('moment')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()

// 给app设置一个模版引擎
// art-tempalte: 模版文件默认后缀可以是html  也可以是 art
// 参数1： 指定模版文件的后缀名
// 参数2： 加载 express-art-template  会把模版引擎和express绑定好
app.engine('html', require('express-art-template'))
// 把模版引擎的默认路径改成 /pages
app.set('views', 'pages')
// 设置模板文件的后缀为 html
// app.set('view engine', 'html')

const dataTool = require('./dataTool')

app.listen(8888, () => {
  console.log('服务器启动成功了')
})

// 处理静态资源
// 把public设置为静态资源目录   /static 资源的路径中带了/static
app.use('/static', express.static('public'))

// 中间件的目的： 解析所有post请求中的请求体，添加给req.body
// app.use((req, res, next) => {
//   // req.body有post参数的值
//   let result = ''
//   req.on('data', chunk => {
//     result += chunk
//   })
//   req.on('end', () => {
//     req.body = querystring.parse(result)
//     next()
//   })
// })
// app.use(bodyParser.json()) // 处理json数据
app.use(bodyParser.urlencoded({ extended: false })) // 处理表单数据

// 处理首页
app.get('/', (req, res) => {
  // 返回index.html页面
  // 数据
  // 模板
  dataTool.readFile(data => {
    // const filePath = path.join(__dirname, 'views', 'index.html')
    // 使用模版引擎来渲染页面
    // 参数1：模版的地址
    // 模版引擎的路径，推荐使用绝对路径，也可以是相对路径，
    // 如果使用相对路径，会默认去当前目录的views的文件夹下面查找
    res.render('index.html', data)
  })
})

app.get('/index', (req, res) => {
  res.redirect('/')
})

app.get('/add', (req, res) => {
  res.render('add.html')
})

app.get('/delete', (req, res) => {
  // 获取到id
  // express直接给req增加了  req.query(get请求的参数)    req.body(post)
  const id = req.query.id
  // 读取数据
  dataTool.readFile(data => {
    // 删除data中的id对应的数据
    data.total--
    data.list = data.list.filter(item => item.id !== +id)
    // 写回去
    dataTool.writeFile(data, () => {
      // 成功了，重定向到 /
      res.redirect('/')
    })
  })
})

app.post('/fb', (req, res) => {
  // req.body
  // console.log(req.body)
  // res.send('ok')
  const newData = req.body
  dataTool.readFile(data => {
    data.total++
    data.list.unshift({
      ...newData,
      id: +new Date(),
      time: moment().format('YYYY-MM-DD HH:mm:ss')
    })

    dataTool.writeFile(data, () => {
      res.redirect('/')
    })
  })
})

/* 
  1. 安装 npm i art-template express-art-template
  2. 设置模版引擎  app.engine('html', require('express-art-template'))
  3. 如果模版的目录不在views  app.set('views', 'pages')
  4. 以后想要渲染页面，  res.render(相对路径, 数据)
*/

// 提供404
app.use((req, res) => {
  res.status(404).render('404.html')
})