node.js第四天笔记整理~

Node.js 第4天课堂笔记

知识点

• Express
• 基于文件做一套 CRUD

复习

• jQuery 的 each 和 原生的 JavaScript 方法 forEach
• 301 和 302 的区别
• 模块中导出单个成员和导出多个成员的方式
  • module.exports = xxx
  • 通过多次：exports.xxx = xxx
  • 导出多个也可以：moudle.exports = {多个成员}
• module.exports 和 exports 的区别
  • exports 只是 module.exports 的一个引用而已，目的只是为了简化写法
  • 每个模块最终 return 的是 module.exports
• require 方法加载规则
  • 优先从缓存加载
  • 核心模块
  • 路径形式的模块
    • ./xxx
    • ../xxxx
    • /xxxx / 在这里表示的是磁盘根路径
    • c:/xxx
  • 第三方模块
    • 第三方模块的标识就是第三方模块的名称（不可能有第三方模块和核心模块的名字一致）
    • npm
      • 开发人员可以把写好的框架、库发布到 npm 上
      • 使用者在使用的时候就可以很方便的通过 npm 来下载
    • 使用方式：var 名字 = require('npm install 的那个包名')
    • node_modules
    • node_modules/express
    • node_modules/express/package.json
    • node_modules/express/package.json main
    • 如果 package.json 或者 package.json main 不成立，则查找备选项：index.js
    • 如果以上条件都不成立，则继续进入上一级目录中的 node_modules 按照上面的规则继续查找
    • 如果直到当前文件模块所属磁盘根目录都找不到，最后报错：can not find module xxx
• package.json 包描述文件
  • 就是产品的说明书
  • dependencies 属性，用来保存项目的第三方包依赖项信息
  • 所以建议每个项目都要有且只有一个 package.json (存放在项目的根目录)
  • 我们可以通过 npm init [--yes] 来生成 package.json 文件
  • 同样的，为了保存依赖项信息，我们每次安装第三方包的时候都要加上：--save 选项。
• npm 常用命令
  • install
  • uninstall
• Express 基本使用
• 使用 Express 把之前的留言本案例自己动手改造一下

1.修改完代码自动重启

我们这里可以使用一个第三方包，nodemon来解决修改完代码自动重启服务器问题。

nodemon是一个基于node.js开发的第三方命令行工具，需要独立安装：

//在任意目录安装都可以
npm install --global nodemon

使用：

nodemon app.js

2.模块标识中的 / 和文件操作路径中的 /

咱们所使用的所有文件操作的 API 都是异步的。

• 文件操作中的相对路径可以省略 ./

fs.readFile('data/a.txt', function (err, data) {
  if (err) {
    return console.log('读取失败')
  }
  console.log(data.toString())
})

• 在模块加载中，相对路径中的 ./ 不能省略

  否则报错：
  Error: Cannot find module 'data/foo.js'
  // require('data/foo.js')
  
  //正确做法：
   require('./data/foo.js')('hello')
  

• 在文件操作的相对路径中

  • ./data/a.txt 相对于当前目录
  • data/a.txt 相对于当前目录
  • /data/a.txt 绝对路径，当前文件模块所处磁盘根目录
  • c:/xx/xx… 绝对路径

 fs.readFile('./data/a.txt', function (err, data) {
   if (err) {
     console.log(err)
     return console.log('读取失败')
   }
   console.log(data.toString())
 })

3. express 起步

3.1 安装

npm install --save express

关于node修改完代码，让服务自动重启
        可以使用一个第三方命令行工具 nodemon  需要独立安装
        npm install --global nodemon//（任意目录执行都可以）
        安装完毕使用
        nodemon app.js
        只要是通过nodemon启动服务，他会监视你的文件变化，当代码发生变化时，会自动重启服务器

3.2 hello world

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

app.get('/',function(req,res){
    res.send('hello world')
})
app.listen(3000, function() {
	console.log('express app is running ...')
})

3.3 基本路由

• 请求方法

• 请求路径

• 请求处理函数

get:

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

post:

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

3.4 静态服务

app.use(express.static('public'))
//直接访问public里面的资源===/public

app.use(express.static('files'))
//直接访问files里面的资源===/files

app.use('/public/', express.static('public'))
//访问 /public/(public里面的资源路径)===/public/xxx

app.use('/static/', express.static('public'))
//访问 /static/(public里面的资源路径)===/static/xxx

app.use('/static/', express.static(path.jion(_dirname, 'public')))

4.用express重新完成 留言本案例

4.1 在Express中配置 art-template 模板引擎

安装：

npm install --save art-template
npm install --save express-art-template

配置：

var express = require('express')
var app = express()
//配置代码：
app.engine('html',require('express-art-template'))

使用：

app.get('/',function(req,res){
	//express 默认去项目的 	views	目录中查找页面----这是一个约定
    res.render('index.html',{
    	title:'hello world'
    })
})

如果希望修改默认的views视图渲染目录，则执行以下代码：

//注意： 第一个参数views 是规定的
app.set('views',要改成的目录路径)

4.2 如何在express中获取表单POST请求体数据？

在express中，获取表单get请求体数据用 req.query,但是没有内置获取表单post请求体数据的API，在这里我们可以依赖一个第三方包 ：body-parser

安装：

npm install --save body-parser

配置：

var express = require('express')
//引包
var bodyParser = require('body-parser')

var app = express()

//配置 body-parser
//只要加入这个配置，在req请求对象上会多出一个属性：`body`
//此时可以直接用req.body 直接获取表单中post请求体的数据

//下面是配置代码：
`// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())`

使用：

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  //可以通过req.body 获取表单post请求体数据
  res.end(JSON.stringify(req.body, null, 2))
})

• 网址输入都是以get方式发送请求

5.CURD-起步

• 初始化

• 模板处理路由设计

5.1路由设计

请求方法	请求路径	get 参数	post 参数	备注
GET	/students			渲染首页
GET	/students/new			渲染添加学生页面
POST	/studens/new		name、age、gender、hobbies	处理添加学生请求
GET	/students/edit	id		渲染编辑页面
POST	/studens/edit		id、name、age、gender、hobbies	处理编辑请求
GET	/students/delete	id		处理删除请求

//通过utf8中间参数可以直接将文件直接按照utf8编码，得到我们需要的字符串类型
//除了这样的方法之外，也可以通多data.toString()
fs.readFile('./db.json', 'utf8', function(err,data){
    if (err) {
        return res.status(500).send('Server err')
    }
    res.render('index.html', {
        students: JSON.parse(data).students
    })
})

5.2提取路由模块

router.js:

/**
 * router.js 路由模块
 * 职责：
 *   处理路由
 *   根据不同的请求方法+请求路径设置具体的请求处理函数
 * 模块职责要单一，不要乱写
 * 我们划分模块的目的就是为了增强项目代码的可维护性
 * 提升开发效率
 */

var express = require('express')

// 1. 创建一个路由容器
var router = express.Router()

// 2. 把路由都挂载到 router 路由容器中
router.get('/students/new', function (req, res) {
  res.render('new.html')
})

router.post('/students/new', function (req, res) {
 
})

router.get('/students/edit', function (req, res) {

})

router.post('/students/edit', function (req, res) {

})


router.get('/students/delete', function (req, res) {
 
})
//3. 把路由容器导出
module.exports = router

app.js:

var router = require('./router')

//挂载路由
app.user(router)

5.3设计操作数据的API文件模块

/**
 * 获取学生列表
 * @param  {Function} callback 回调函数
 */
exports.find = function(callback) {
  
}

/**
 * 添加保存学生
 * @param  {Object}   student  学生对象
 * @param  {Function} callback 回调函数
 */
exports.save = function(student, callback) {
  
}

/**
 * 更新学生
 */
exports.updateById = function(student, callback) {
  
}

/**
 * 删除学生
 */
exports.deleteById = function(id, callback) {
  
}

自己编写的模板

• 处理模板

• 配置开放静态资源

• 简单路由 ： /student 渲染页面

• 路由设计

• 提取路由模块

• 由于接下来的一切操作都需要处理数据，所以我们封装student.js

• 先写好student.js的文件结构

  • 查询所有学生的列表API find

  • findByid

  • save

  • updateByid

  • deleteByid

• 实现具体功能

  • 通过路由受到请求

  • 接收请求中的数据(get、post)

    • res.query

    • res.body

  • 调用数据操作API处理数据

  • 根据操作结果给客户端发送响应

• 业务功能数据

  • 列表
  • 添加
  • 编辑
  • 删除

• ES6 的API

  • find
  • findIndex

• 文件路径中的 / 和模块标识中的 /

• Express 中配置使用 art-template 模板引擎

• Express 中配置使用 body-parser

• Express 中配置处理静态资源

• CRUD 案例中单独提取路由模块