Node基础--day04

1. nodemon 自动重启 web服务器

• nodemon：实时监听当前项目中，文件的变化；并自动重启 web 服务器；
• 安装： npm i nodemon -g
• 使用： nodemon 要执行文件的路径

2. express 框架 (主要做API接口)

• 基于 Node.js 平台之上，进一步封装了 http模块，使用更加方便；

• 安装： npm init -y 初始化项目；npm i express -S

• 创建 express 服务器：

  导入 express 第三方模块；
  调用 const app = express() 方法；
  监听客户端请求：
      监听 GET  请求：app.get('请求地址', (req, res) => { 处理函数 }) 
      监听 POST 请求： app.post('请求地址', (req, res) => { 处理函数 }) 
  启动 express 服务器： app.listen(端口, IP地址, 启动成功后的回调函数) 
  

// 1. 导入express
const express = require('express')

// 2. 调用 express() 创建服务器
const app = express()

// 3. 调用 app.get() 方法，来监听客户端的请求，并指定要监听的 URL地址，和处理函数；
app.get('/', (req, res) => { '/admin'
  // '/'根目录,代表监听的网站,127.0.0.1
  //res.end('你好！') 有乱码，需解决
  res.send('你好！') //封装的send()方法，不会出现中文乱码；
})

// 4. 调用 app.listen() 方法启动 express 服务器
app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000(/admin)')
})

3. express 中的快捷方法

• res.send() 不会出现中文乱码
  支持 发送 字符串 res.send({ name: ‘zs’, age: 22 }) //{“name”:“zs”,“age”:22}
  支持 发送 对象 或 数组 res.send([‘nihao’, ‘传智播客’) //[“nihao”,“传智播客”]
  支持 发送 Buffer（二进制） 此时会当作文件下载；

• res.sendFile() 可以向浏览器发送 静态页面；

  用法1：res.sendFile(path.join(__dirname, './view/index.html'))
     	  如果只给定一个参数，必须是绝对路径，表示要发给客户端的文件路径
  用法2：res.sendFile('./view/movie.html', { root: __dirname })
     	  提供两个参数，第一个实参相对路径；第二个实参，必须是绝对路径；
  

const express = require('express')
const path = require('path')
    
const app = express()

app.get('/', (req, res) => {
   // res.sendFile(path.join(__dirname, './views/home.html'))
  res.sendFile('./views/home.html', { root: __dirname })
})

app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})

4. express.static() 快速托管静态资源

有太多静态资源，需要被外界访问时，用 express.static() 快速托管目录下的，所有静态资源文件；
语法1： app.use(express.static(‘静态资源目录’))

• app.use() 注册 中间件；
• express.static() 把指定目录，托管为静态资源目录，目录下的所有文件，都可以直接被访问
  访问路径 + 文件夹下的 html文件名：http://127.0.0.1:3000/about.html

语法2：app.use(’/虚拟目录 public’, express.static(‘静态资源目录’))
必须在托管的文件夹前 + /虚拟目录 才可以访问：http://127.0.0.1:3000/public/about.html

const express = require('express')
const app = express()

//app.use(express.static('./views'))
app.use('/page', express.static('./views'))

app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})

5. express 框架 配置 ejs模板引擎

• 安装 ejs 后台模板引擎： npm i ejs -S
• 设置默认的模板引擎：app.set(‘view engine’, ‘模板引擎的名称’)
• 设置模板页面的，存放路径：app.set(‘views’, ‘模板页面的存放路径 文件夹’)
• 渲染模板页面：res.render(‘要渲染的页面的名称，后缀名只能是 .ejs’, { 要渲染的数据对象 })，
  模板页面的 后缀名，可以省略不写！

const express = require('express')
const app = express()

app.set('view engine', 'ejs')
app.set('views', './pages')
app.get('/', (req, res) => {
  res.render('index.ejs', { name: 'zs', age: 20, hobby: ['吃饭', '阅读', '唱歌'] }) 
}) //pages文件夹下的 index.ejs页面              

app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})

//要渲染的页面的名称 index.ejs
// <%=  %>  '='输出的意思,前面不能有空格
<p>姓名：<%= name %></p>
<p>年龄：<%= age %></p>
<% hobby.forEach(item => { %>  //没有'=',表示写的是一个语句 hobby数组的原生 forEach 方法
  <p><%= item %></p>
<% }) %>

6. express 中配置 art-template

• 安装 两个包 cnpm i art-template express-art-template -S
• 自定义模板引擎 app.engine(‘自定义模板引擎名称’, 渲染函数)
• 配置成 express 的默认模板引擎 app.set(‘view engine’, ‘模板引擎名称’)
• 模板页面的存放路径 app.set(‘views’, ‘路径，文件夹’)
• 渲染模板页面 res.render(‘index.后缀名与模板引擎名字一致’, { 要渲染的数据对象 })

//先创建一个服务器 07.js
const express = require('express')
const app = express()

app.engine('html', require('express-art-template'))//渲染函数
app.set('view engine', 'html')
app.set('views', './art_page')

app.get('/', (req, res) => {
  res.render('index.html', { name: 'zs', age: 22, hobby: ['玩游戏', '唱歌'] })
})

app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})

// {{ 把某个值 输出到 指定的位置上}}
<h1>这是使用 art-template 渲染的模板页面</h1>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
{{each hobby}} //循环语句 开始标记 中间循环体 
  <p>{{$index}} -- {{$value}}</p> //$index:数组索引  $value:值
{{/each}} //结束标记

7. 使用 express 框架中 提供的路由 来分发请求

• 路由就是对应关系；
• 后端路由：前端请求的URL地址，都要对应一个后端的处理函数；这种URL地址，到处理函数，之间的对应关系，就叫做后端路由；
• 路由的主要职责：把请求分发到，对应的处理函数中；

//抽离单独的路由模块 09.router.js 

const express = require('express')
// 创建路由对象:调用 express.Router() 方法
const router = express.Router()

// 挂载具体的请求 监听
router.get('/', (req, res) => {
  res.sendFile('./views/home.html', { root: __dirname })
})

router.get('/movie', (req, res) => {
  res.sendFile('./views/movie.html', { root: __dirname })
})

router.get('/about', (req, res) => {
  res.sendFile('./views/about.html', { root: __dirname })
})

// 暴露路由对象 供外界使用
module.exports = router

// 使用路由模块 08.js

const express = require('express')
const app = express()

// 导入路由模块
const router = require('./09.router.js')
// 调用 app.use 方法，安装路由模块
app.use(router)

app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})