前置基础
Node.js 是JavaScript 运行时环境,既不是语言,也不是框架,它是一个平台
Node.js 中的 JavaScript没有 BOM、DOM,但有EcmaScript 基本的 JavaScript 语言部分
在 Node 中为 JavaScript 提供了一些服务器级别的 API,如文件操作的能力,http 服务的能力
Content-Type
服务器最好把每次响应的数据是什么内容类型都告诉客户端,而且要正确的告诉
不同的资源对应的 Content-Type 是不一样,具体参照:http://tool.oschina.net/commons
对于文本类型的数据,最好都加上编码,目的是为了防止中文解析乱码问题,图片不需要
一个简单的服务器
var http = require('http')
var fs = require('fs')
var server = http.createServer()
server.on('request', function (req, res) {
// index.html
var url = req.url
if (url === '/') {
// 肯定不这么干
// res.end('<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><h1>首页</h1></body>/html>')
// 我们要发送的还是在文件中的内容
fs.readFile('./resource/index.html', function (err, data) {
if (err) {
res.setHeader('Content-Type', 'text/plain; charset=utf-8')
res.end('文件读取失败,请稍后重试!')
} else {
// data 默认是二进制数据,可以通过 .toString 转为咱们能识别的字符串
// res.end() 支持两种数据类型,一种是二进制,一种是字符串
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(data)
}
})
} else if (url === '/xiaoming') {
// url:统一资源定位符
// 一个 url 最终其实是要对应到一个资源的
fs.readFile('./resource/ab2.jpg', function (err, data) {
if (err) {
res.setHeader('Content-Type', 'text/plain; charset=utf-8')
res.end('文件读取失败,请稍后重试!')
} else {
// data 默认是二进制数据,可以通过 .toString 转为咱们能识别的字符串
// res.end() 支持两种数据类型,一种是二进制,一种是字符串
// 图片就不需要指定编码了,因为我们常说的编码一般指的是:字符编码
res.setHeader('Content-Type', 'image/jpeg')
res.end(data)
}
})
}
})
server.listen(3000, function () {
console.log('Server is running...')
})
服务端渲染
安装模板引擎
npm i art-template -s
创建2个html文件
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>hello {{name}}</h2>
</body>
</html>
// login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>登录 {{name}}</h2>
</body>
</html>
服务端渲染html文件
使用readFile读取html文件转为字符串,然后使用模板渲染转换插值内容,最后将这些字符串用res.end发送给浏览器,浏览器会自动解析这些字符串
let fs = require('fs')
let http = require('http')
// 加载模板引擎
let tem = require('./node_modules/art-template/lib/template-web')
let server = http.createServer()
dir = 'C:/Users/ma/Desktop/node.js/实战'
server.on('request', function (req, res) {
let url = req.url
// 使用访问的路径名来获取读取文件的名字,因为路径名和读取文件相同
let filePath = '/index.html'
if (url !== '/') {
filePath = url
}
fs.readFile(dir + filePath, function (err, data) {
if (err) {
return res.end('404 Not Found.')
}
else {
let newData = data.toString()
let htmlData = tem.render(newData, {
name: 'Vansal'
})
res.end(htmlData)
}
})
})
server.listen(8080, function () {
console.log('Server is running...')
})
反馈页面制作
使用app.js创建服务器,当服务器监听到由浏览器访问首页时,服务器响应并返回一个index.html文件,浏览器就会渲染这个index.html,当渲染时发现img标签的地址,就会再次发起一个请求来获取图片,服务器监听到由浏览器访问/public时就会读取相应url名对应的文件名,响应给浏览器
案例最重要的一点,index.html中的获取图片路径、代码路径等都不是像前端一样的相对路径了,而是浏览器访问服务器的url路径
例如浏览器向服务器请求图片的路径是http://localhost:8080/public/img/ab3.jpg
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>首页</h2>
<img src="/public/img/ab3.jpg" alt="">
<script src="/public/js/main.js"></script>
</body>
</html>
//app.js
let fs = require('fs')
let http = require('http')
let dir = 'C:/Users/ma/Desktop/node.js/实战/feedback'
http
.createServer(function (req, res) {
let url = req.url
if (url === '/') {
fs.readFile('./views/index.html', function (err, data) {
if (err) {
return res.end('404')
}
res.end(data)
})
}
else if (url.indexOf('/public') === 0) {
fs.readFile('.' + url, function (err, data) {
if (err) {
return res.end('404')
}
res.end(data)
})
}
})
.listen(8080, function () {
console.log('running...')
})
使用url核心模块可以解析url
let url = require('url')
// 第二个参数设置true可以将查询参数query变成一个对象
parseObj = url.parse(req.url,true)
重定向原理
res.statusCode = 302
res.setHeader('Location', '/')