Node.js构建 Web 服务

这部分示例将致力于用 Node.js 模拟一个类似于 Apache 的 Web 服务器,处理浏览器端的请求,将相关的页面响应给浏览器 。首先,我们要在code目录下执行mkdir 03_webSever命令来创建用于存放这一组示例的目录 。然后执行以下步骤:

  1. 在code/03_webSever目录下执行mkdir www命令,创建网站目录,然后在其中创建index.htm和login.htm两个 html 文件以及一个名为style.css的 CSS 文件:
1、index.htm:
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href=https://www.isolves.com/it/wlyx/fwq/2020-08-31/"style.css" />首页_江苏龙网

你好,nodejs!

请登录!

2、login.htm:
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href=https://www.isolves.com/it/wlyx/fwq/2020-08-31/"style.css" />登录页面_江苏龙网

你已经登录 。。。

回首页!

3、style.css:
body { background: gray; }2、在code/03_webSever目录下执行touch 03-webServer.js命令,创建脚本文件,并输入如下代码:
const http = require('http')const fs = require('fs')const server = http.createServer()server.on('request', function(req, res) {const webRoot = './www'const url = req.urlif ( url === '/' ) {url = '/index.htm'}fs.readFile(webRoot+url, function(err, data) {if ( err !== null ) {console.error('错误信息:' + err.message)return res.end('<h1>404 页面没找到!</h1>')}res.end(data)})})server.listen(8080, function(){console.log('请访问http://localhost:8080/,按Ctrl+C终止服务!')})3、保存所有文件后,在code/03_webSever目录下执行node 03-webServer.js命令,然后打开浏览器并访问http://localhost:8080/,就会看到如下页面:
Node.js构建 Web 服务

文章插图
 
示例4. 使用art-template模版引擎生成网页这一部分本示例将以生成个人信息页面为例,演示在服务器端基于 Node.js 使用art-template模板引擎来生成网页 。为此,我们需要在code目录下执行mkdir 04_templatingEngine命令来创建用于存放这一组示例的目录 。
1. 单模版渲染首先来示范一下如何使用art-template模版引擎的渲染单一模版文件,请跟着以下步骤来构建示例:
  1. 在code/04_templatingEngine目录下执行npm install art-template --save命令,安装将art-template包安装到当前示例项目中 。
  2. 在code/04_templatingEngine目录下执行touch singleTpl.htm命令,创建一个模版文件,并在其中输入以下代码:
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href=https://www.isolves.com/it/wlyx/fwq/2020-08-31/"style.css" />{{ name }}的个人信息_江苏龙网

{{ name }}的个人信息

姓名:{{ name }}
年龄:{{ age }}
性别:{{ sex }}
爱好:{{ each items }} {{ $value }} {{ /each }}
 
3、在code/04_templatingEngine目录下执行touch 04-useTemplating_engine.js命令,创建一个脚本文件,具体如下:
const http = require('http')const fs = require('fs')const template = require('art-template')class human {constructor(name, age, sex, items=[]){this.name = namethis.age = agethis.sex = sexthis.items = items}}const server = http.createServer()server.on('request', function(req, res){const url = req.urllet boy = nullif ( url === '/' ) {boy = new human('凌杰', '37', '男', ['看书', '看电影','旅游'])} else if ( url === '/wang' ) {boy = new human('蔓儿', '25', '女', ['看书', '看电影','写作'])}if ( boy === null ) {return res.end('<h1>404 页面没找到!</h1>')}fs.readFile('./singleTpl.htm', function(err, data){if ( err !== null ) {return res.end('<h1>404 没找到模版文件!</h1>')}const strHtml = template.render(data.toString(), {name : boy.name,age : boy.age,sex : boy.sex,items: boy.items})res.end(strHtml)})})server.listen(8080, function(){console.log('请访问http://localhost:8080/,按Ctrl+C终止服务!')})4、保存所有文件后,在code/04_templatingEngine目录下执行node 04-useTemplating_engine.js命令,然后打开浏览器并访问http://localhost:8080/wang,就会看到如下页面:


推荐阅读