Express七练

162 阅读4分钟

练习(一): “Hello World!”

制作一个浏览 /home 页面时会输出「Hello World!」的 Express.js app 。

{appname} 会将监听的 port 放在第一个参数,如 process.argv[2]

提示

建立一个监听 port 3000 ,并在「/」返回字符串的 Express.js app 的程序代码如下:

const express = require('express')
const app = express()
app.get('/', function(req, res) {
  res.end('Hello World!')
})
app.listen(3000)

请使用 process.argv[2] 替代固定的 port :

app.listen(process.argv[2])

solution

const express = require('express')
const app = express()
app.get('/home', function(req, res) {
  res.end('Hello World!')
})
app.listen(process.argv[2])

练习(二): “Static”

不用任何的路由(route),使用 static middleware 回传 index.html 文件。

您的网站必须监听程序的第一个参数(process.argv[2])所提供的 port。

程序的第二个参数(process.argv[3])是 index.html 文件所在的路径。不过,您也可以使用您自己的文件,内容如下:

<html>
  <head>
    <title>expressworks</title>
    <link rel="stylesheet" type="text/css" href="/main.css"/>
  </head>
  <body>
    <p>I am red!</p>
  </body>
</html>

提示

调用 static middleware 的方式如下:

app.use(express.static(path.join(__dirname, 'public')));

在这个作业中,{appname} 会传给您路径,所以您可以这样用:

app.use(express.static(process.argv[3]||path.join(__dirname, 'public')));

solution

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

app.use(express.static(process.argv[3]||path.join(__dirname, 'public')))

app.listen(process.argv[2])

练习(三): “Good Old Form”

编写一个可以处理 HTML 表单输入(<form><input name="str"/></form>),并且倒着印出str 值的路由(/form)。

提示

要处理 POST 请求可以使用 post() 方法,使用方式就跟str 值的路由(/form)一样。

app.post('/path', function(req, res){...})

Express.js 使用 middleware 提供更多功能给您的 web 服务器。

在您处理请求之前,Express.js 会引入一个 middleware 函数。

Middleware 提供许多不同的功能如记录(logging)、提供静态文件,以及错误处理。

对程序调用 use() ,并且把 middleware 当作参数传入,就可以加入 middleware。

Express.js 可以用 body-parser 模块的 urlencoded() 解析 x-www-form-urlencoded 请求的内容。

const bodyparser = require('body-parser')
app.use(bodyparser.urlencoded({extended: false}))

要了解 Connect middleware ,可以看这里:

github.com/senchalabs/…

body-parser 模块的文件在此:

github.com/expressjs/b…

把字串倒过来的方法如下:

req.body.str.split('').reverse().join('')

注意

在第一次执行你所建立的项目时,请先安装 body-parser 依赖
在你的终端上通过 npm 执行:

$ npm install body-parser

再次提醒,{appname} 会将监听的 port 放在第一个参数,如 process.argv[2]

solution

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.urlencoded({extended: false}))

app.post('/form', function(req, res) {
  res.send(req.body.str.split('').reverse().join(''))
})

app.listen(process.argv[2])

练习(四): “Stylish CSS”

使用 Stylus middleware 为您之前做的 HTML 加上css。

您的网站必须监听程序的第一个参数(process.argv[2])所提供的 port。

而 HTML 网页和 Stylus 文件会在程式的第二个参数(process.argv[3])提供(两个文件都在同一个文件夹)。您可也可以建立您自己的文件夹,然后使用下面两个文件:

main.styl 文件:

p
  color red

index.html 文件:

<html>
  <head>
    <title>expressworks</title>
    <link rel="stylesheet" type="text/css" href="/main.css"/>
  </head>
  <body>
    <p>I am red!</p>
  </body>
</html>

提示

要使用 stylus 这个 middleware,可以这样:

app.use(require('stylus').middleware(__dirname + '/public'));

您也要记得提供静态文件。

注意

如果是您自己的项目,需要先安裝 Stylus,就跟其他依赖一样:

npm install stylus

solution

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

app.use(require('stylus').middleware(process.argv[3]))
app.use(express.static(process.argv[3]))

app.listen(process.argv[2])

练习(五): “Param Pam Pam”

建立一个可以处理 PUT '/message/:id' 请求的 Express.js 服务器。

举个栗子:

PUT /message/526aa677a8ceb64569c9d4fb

这个请求的响应内容,是当前日期加上请求ID的哈希值(hash value)。

require('crypto')
  .createHash('sha1')
  .update(new Date().toDateString() + id)
  .digest('hex')

提示

要处理这个 PUT 请求,可以用下面的方式:

app.put('/path/:NAME', function(req, res){...});

要从请求中解析出传来的参数,可以用:

req.params.NAME

solution

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

app.put('/message/:id', function(req, res){
  const id = req.params.id
  const str = require('crypto')
    .createHash('sha1')
    .update(new Date().toDateString() + id)
    .digest('hex')
  res.send(str)
})

app.listen(process.argv[2])

练习(六): “What's In Query”

编写一个路由(route),可以解析对 /search 网址发起的 GET 请求所带来的查询字符串。如:?results=recent&include_tabs=true ,并且把这个字符串以 JSON 格式输出。

提示

在 Express.js 里要解析查询参数,可以用:

req.query.NAME

要输出 JSON 格式,可以用:

res.send(object)

solution

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

app.get('/search', function(req, res){
  const query = req.query
  res.send(query)
})

app.listen(process.argv[2])

练习(七): “JSON Me”

编写一个会读取文件,把文件内容解析为JSON格式,并把结果输出给使用者的服务器。

process.argv[2] 会传入 port,process.argv[3] 则传入文件名称。

返回方式如下:

res.json(object)

服务器处理的路径是「/books」。

提示

要读取文件,可以使用 fs 模块,如:

fs.readFile(filename, callback)

而解析字符串可以用 JSON.parse 完成:

object = JSON.parse(string)

solution

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

app.get('/books', function(req, res){
  const filename = process.argv[3]
  fs.readFile(filename, function(e, data) {
    if (e) return res.sendStatus(500)
    try {
      books = JSON.parse(data)
    } catch (e) {
      res.sendStatus(500)
    }
    res.json(books)
  })
})

app.listen(process.argv[2])