Node.js学习笔记----day04

认真学习，认真记录，每天都要有进步呀！！！

加油叭！！！

---

一、Express

原生的http在某些方面上不足以满足我们的开发需求，所以我们需要使用框架来提高我们的开发效率，框架的目的就是提高开发效率，让我们的代码更高度统一

1. 什么是express

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

express官网： http://expressjs.com/

2.Express 框架核心特性：

1）可以设置中间件来响应 HTTP 请求。
2）定义了路由表用于执行不同的 HTTP 请求动作。
3）可以通过向模板传递参数来动态渲染 HTML 页面。

3.Express的安装

安装文档： http://expressjs.com/en/starter/installing.html

安装步骤详情：

1. 创建一个项目
   
   
2. 切换到项目目录下去初始化

$ npm init -y

3. 安装express

$ npm install express --save / npm i --S express

4. hello world example

官方文档：http://expressjs.com/en/starter/hello-world.html

栗子：

// 1. 引包
var express = require('express')
// 2. 创建你服务器应用程序
//    也就是原来的 http.createServer
var app = express()
// 3.当服务器收到请求/的时候，执行回调处理函数
app.get('/', function (req, res) {
  res.send('Hello World!')
})
// 4. 相当于 server.listen
app.listen(3000, function () {
  console.log('app is running at port 3000.')
})

5. 基本路由

get:

//当你以 GET 方法请求 / 的时候，执行对应的处理函数
app.get('/',function(req,res){
res.send('GET Request')
})

post:

//当你以 POST 方法请求 / 的时候，执行对应的处理函数
app.post('/',function(req,res){
res.send('POST Request')
})

静态服务：

//写法一：
// 当省略第一个参数的时候，则可以通过 省略 /public 的方式来访问
// 这种方式的好处就是可以省略 /public/
app.use(express.static('public'))
app.use(express.static('./static/'))
//写法二：
app.use('/public/', express.static('./public/'))
app.use('/static/', express.static('./static/'))

开发公共目录（静态服务）栗子：

var express = require('express')
var app = express()
// 公开指定目录
// 只要这样做了，你就可以直接通过 /public/xx 的方式访问 public 目录中的所有资源了
app.use('/public/', express.static('./public/'))
app.use('/static/', express.static('./static/'))

app.get('/', function (req, res) {
  res.send('Hello World!')
})
// 4. 相当于 server.listen
app.listen(3000, function () {
  console.log('app is running at port 3000.')
})

项目结构：

来吧展示：

/public/ 与 /abc/d/ 的区别

app.use('/public/', express.static('./public/'))

app.use('/abc/d/', express.static('./public/'))

总结：

当以 /public/ 开头的时候，去 ./public/ 目录中找找对应的资源

这种方式更容易辨识，推荐这种方式

app.use('/public/', express.static('./public/'))

二、使用nodemon工具自动重启服务

• nodemon可以帮助我们解决频繁修改代码重启服务器的问题

• nodemon是一个基于Node.js开发的一个第三方命令行工具。我们在使用的时候需要独立安装

• 安装

$ npm install --global nodemon

该命令在任意目录下执行都可以

• 使用

$ node app.js

 #使用nodemon执行命令
$ nodemon app.js

只要使用nodemon 启动的服务，则它就会监视你的文件变化，当文件发生变化的时候，也就是当我们 ctrl + s保存文件时，就会自动帮助我们重启服务器

三、在Express中配置使用art-template模板引擎

art-template官方中文文档

安装

npm install --save art-template
npm install --save express-art-template
#或者同时安装两个包
npm install --save art-template express-art-template

使用

1. 引入express包

var express  = require('express')
var app = express()

1. 开发静态资源

app.use('/public',express.static('./public/'))

1. 配置使用 art-template 模板引擎

app.engine('art', require('express-art-template'))

第一个参数，表示，当渲染以 .art 结尾的文件的时候，使用 art-template 模板引擎

express-art-template 是专门用来在 Express 中把 art-template 整合到 Express 中

虽然外面这里不需要记载 art-template 但是也必须安装

原因就在于 express-art-template 依赖了 art-template

1. 响应页面

app.get('/', function (req, res) {
  res.render('404.art')
})

Express 为 Response 相应对象提供了一个方法：render

render 方法默认是不可以使用，但是如果配置了模板引擎就可以使用了

res.render('html模板名', {模板数据})

第一个参数不能写路径，默认会去项目中的 views 目录查找该模板文件

也就是说 Express 有一个约定：开发人员把所有的视图文件都放到 views 目录中

如果想要修改默认的 views 目录，则可以

app.set('views', render函数的默认路径)

页面会报错的栗子：

var express  = require('express')
var app = express()
app.use('/public',express.static('./public/'))
app.engine('art', require('express-art-template'))
app.get('/', function (req, res) {
  res.render('404.html')
})
app.listen(3000, function () {
  console.log('running...')
})

解决方法一：

将404.html文件的文件名更改成404.art

并且将 res.render('404.html') 更改成 res.render('404.art')

解决办法二：

将engine()方法中的第一个参数art更换成html

app.engine('html', require('express-art-template'))
app.get('/', function (req, res) {
  res.render('404.html')
})

页面响应正常的栗子：

var express  = require('express')
var app = express()
app.use('/public',express.static('./public/'))
app.engine('art', require('express-art-template'))
app.get('/', function (req, res) {
  res.render('404.html')
})
app.listen(3000, function () {
  console.log('running...')
})

四、使用Express重写留言本案例（只使用GET方式）

var express  = require('express')
var app = express()
app.use('/public',express.static('./public/'))
app.engine('html', require('express-art-template'))
var comments = [{
    name: '张三',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三2',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三3',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三4',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三5',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  }
]
app.get('/', function (req, res) {
  res.render('index.html', {
    comments: comments
  })
})

app.get('/post', function (req, res) {
  res.render('post.html')
})
app.get('/pinglun', function (req, res) {
  var comment = req.query
  comment.dateTime = '2020-10-10'
  comments.unshift(comment)
  res.redirect('/')
  //在express也可以写http的原生语法
  // res.statusCode = 302
  // res.setHeader('Location', '/')
 })
app.listen(3000, function () {
  console.log('running...')
})

五、在Express中配置解析表单POST请求体数据

在Express中没有内置获取表单POST请求体的API，这里我们需要使用一个第三方包：body-parser

Express body-parse官方文档

安装

$ npm install body-parser

配置

var express = require('express')
var bodyParser = require('body-parser')
var app = express()
//只要加入这个配置，则在req请求对象上多出一个属性：body
//也就是说可以直接通过req.body来获取post请求的数据了
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/login', function (req, res) {
  res.send('welcome, ' + req.body.username)
})
app.post('/api/users', function (req, res) {
  // create user in req.body
})

把post.html中的form表单元素的method方式更改成post

当以post请求/pinglun时，req.body打印的结果就是表单中填写的值

app.post('/pinglun', function (req, res) {
  console.log(req.body)
})

六、使用Express重写留言本案例（使用GET方式和POST方式）

var express  = require('express')
var app = express()
var bodyParser = require('body-parser')
app.use('/public',express.static('./public/'))
app.engine('html', require('express-art-template'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
var comments = [{
    name: '张三',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三2',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三3',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三4',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三5',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  }
]

app.get('/', function (req, res) {
  res.render('index.html', {
    comments: comments
  })
})
app.get('/post', function (req, res) {
  res.render('post.html')
})
// app.get('/pinglun', function (req, res) {
//   var comment = req.query
//   comment.dateTime = '2020-10-10'
//   comments.unshift(comment)
//   res.redirect('/')
//   //在express也可以写http的原生语法
//   // res.statusCode = 302
//   // res.setHeader('Location', '/')
//  })

app.post('/pinglun', function (req, res) {
  var comment = req.body
  comment.dateTime = '2017-11-5 10:58:51'
  comments.unshift(comment)
  res.redirect('/')
})
app.listen(3000, function () {
  console.log('running...')
})