Nodejs之路(三)—— Nodejs之Express框架

Expresshtml

原生的 http 在某些方面表现不足以应对咱们的开发需求,因此咱们须要使用框架来加快咱们的开发效率。框架的目的就是提升效率,让咱们的代码更高度统一前端

在Node 中,有不少 Web 开发框架,咱们这里以学习express为主node

参考网址:http://expressjs.com/git

1.起步

1.1 安装:
npm install --save express
1.2 hello world
var express = require('express') var app = express() app.get('/',function(req,res){ //推荐使用express的方法
    res.send("hello world") }) app.listen(3000,function(){ console.log("express app is running ...") })
1.3 基本路由

路由器github

  • 请求方法express

  • 请求路径npm

  • 请求处理函数json

get:数组

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

post:浏览器

//当以 POST 方法请求 / 的时候,执行对应的处理函数
app.post('/',function(req,res){ res.send('Get a POST request') })
1.4 静态服务
// /public资源
app.use(express.static('public')) // /files资源
app.use(express.static('files')) // /public/xxx
app.use('/public',express.static('public')) // /static/xxx
app.use('/static',express.static('public')) app.use('/static',express.static(path.join(__dirname,'public')))

2.在Express中配置使用art-template模板引擎

安装:

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

配置:

//默认art
app.engine('art', require('express-art-template')) //修改后html
app.engine('html', require('express-art-template'))

使用:

//使用修改后html的配置
app.get('/',function(req,res){ //express 默认会去项目中的 views 目录中找 index.html
    res.render('index.html',{ title:'hello world' }) })

注意:若是但愿修改默认的views视图渲染存储目录,能够:

//第一个参数 views 千万不要写错
app.set('views',目录路径)

3.在Express中获取表单GET请求参数

Express内置了一个API,能够直接经过req.query来获取

req.query

注:在浏览器输入的地址,默认都是get请求

4.在Express中获取表单POST请求体数据

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

安装:

npm install --save body-parser

配置:

var express = require('express') //0.引包
var bodyParser = require('body-parser') var app = express() //1.配置 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)) })

注意:req.body 返回的对象属性值都是字符串

5.使用nodemon工具自动重启服务

咱们这里可使用一个第三方命名工具:nodemon来帮助咱们解决频繁修改代码重启服务器问题

nodemon是一个基于Node.js开发的一个第三方命令行工具,咱们使用的时候须要独立安装:

#在任意目录执行该命令均可以 #也就是说,全部须要 --global 来安装的包均可以在任意目录执行 npm install --global nodemon

安装完毕以后,使用:

#以前使用 node node app.js #如今使用 nodemon nodemon app.js

只要是经过nodemon app.js启动的服务,则它会监视你的文件变化,当文件发生变化的时候,它会自动帮你重启服务器

6.Express - crud(路由)

6.1 模块化思想

模块如何划分:

  • 模块职责要单一

  • Vue

  • angular

  • React

  • 也很是有利于学习前端三大框架

6.2 起步
  • 初始化

  • 模板处理

6.3 路由设计

6.4 提取路由模块

router.js:

/* router.js 路由模块 职责: 处理路由 根据不一样的请求方法+请求路径设置具体的请求处理函数 */
// 模块职责要单一,不要乱写 // 划分模块的目的就是加强项目代码的可维护性,提高开发效率

var express = require('express') //1.建立一个路由容器
var router = express.Router() //2.把路由都挂载到 router 路由容器中
router.get('/students', function(req,res){ }) 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.把 router 导出
module.exports = router

app.js:

var router = require("./router") //挂载路由
app.use(router)
6.5 设计操做数据的API模块
/* student.js 数据操做文件模块 职责:操做文件中的数据,只处理数据,不关心业务 */

/* 获取全部学生列表 return 数组 */ exports.find = function(){ } /* 添加保存学生 */ exports.save = function(){ } /* 更新学生 */ exports.update = function(){ } /* 删除学生 */ exports.delete = function(){ }
6.6 案例——学生管理系统——编写步骤
  • 处理模板

  • 配置开放静态资源

  • 配置模板引擎

  • 简单路由: /students 渲染静态页出来

  • 路由设计

  • 提取路由模块

  • 因为接下来一些新的业务操做都须要处理文件数据,因此咱们须要封装 student.js

  • 先写好 student.js 文件结构

    • 查询全部学生列表的 API find

    • findById

    • save

    • updateById

    • deleteById

  • 实现具体功能

    • 经过路由收到请求

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

      • req.query

      • req.body

    • 使用数据操纵 API 处理数据

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

  • 业务功能顺序

    • 列表

    • 添加

    • 编辑

    • 删除

  • ES6的两个重要API:find、findIndex

相关文章
相关标签/搜索