-
通过改变浏览器地址栏地址查看不同文件信息
const http = require('http') const fs = require('fs') const server = http.createServer() const wDir = 'D:/A-xmyddhl/website/node/nodestudy/www' server.on('request',function(request,response){ var url = request.url; var filePath = '/index.html'; if(url !== '/'){ filePath = url; }; fs.readFile(wDir + filePath,function(err,data){ if(err){ return response.end('404 not found'); } response.end(data); }) }) server.listen('8000',function(){ console.log('running...'); }) -
上面代码是简洁版的，复杂版的呢就是没有
wDir这个变量，通过if...else来判断输入的路径是什么，这样代码的实用性就会很差
2.2 Apache完成目录列表的渲染
readdir(): 返回目录中下一个文件的文件名
fs.readFile(wDir + filePath,function(err,data){
if(err){
return response.end('404 not found');
}
fs.readdir(wDir,function(err,files){
if(err){
return response.end('Can not find wDir');
}
var content = '';
//读取wDir文件夹里的item项，不断循环
files.forEach(function(item){
content += `
<tr>
<td>${
item}</td>
<td></td>
</tr>
`
})
//把数据解析成字符串在替换
data = data.toString();
data = data.replace('原有的',content);
console.log(data);
//发送响应
response.end(data);
})
})
- 使用
art-template，对1进行改进
- 服务端部分
//引入`art-template`模块
const template = require('art-template');
server.on('request',function(request,response){
var url = request.url;
var filePath = '/index.html';
if(url !== '/'){
filePath = url;
};
fs.readFile(wDir + filePath,function(err,data){
if(err){
return response.end('读取文件失败!');
}
fs.readdir(wDir,function(err,files){
if(err){
return response.end('读取文件失败!');
}
var ret = template.rander(data.toString(),{
files: files,
})
response.end(ret);
})
})
})
-
网页端
-
模板引擎
art-template中的遍历所用的语法，只能在art-template中使用{ {each}} { {$value}} { {/each}}
-
<body>
<tbody>
<!--通过 `each` 来实现files数组的循环-->
{
{each files}}
<tr>
<td>{
{$value}}</td> <!-- `$value` 就是files数组里面的某一个元素-->
</tr>
{
{/each}}
</tbody>
</body>
2.3 在浏览器中使用art-template
- 安装
art-template模板引擎
npm install art-template --save
- 引用
lib/template-web.js文件
<script src="node_modules/art-template/lib/template-web.js"></script>
//通过type来规定一下，script里的内容的类型，写成"template"是为了让浏览器不把内容解析成html
<script type="text/template" id = 'tp1'>
今天，{
{
week}}
</script>
<script>
var ret = template('tp1',{
week:'星期一',
});
console.log(ret);
</script>
2.4 在node中使用art-template
- 在需要使用的文件模块中加载
art-template
var template = require('art-template');
- 使用方法
var ret = template.render('模板字符串',替换对象)
- 示例
const fs = require('fs');
const template = require('art-template');
fs.readFile('./tpl.html',function(err,data){
if(err){
return console.log("读取文件失败！");
}
//读取到的data默认为二进制数据
//render方法需要接收字符串，所以要把data转换为字符串
var ret = template.render(data.toString(),{
name: 'jack',
age: 18,
hobbies: [
'写代码',
'唱歌',
'打游戏'
]
})
console.log(ret);
})
2.5 客户端渲染和服务端渲染
2.5.1 客户端渲染
- 客户端在拿到服务端发送过来的代码后，在进行处理，如何有
ajax的话，在进行异步处理
2.5.2 服务端渲染
- 服务端渲染只请求了一次数据，在客户端直接显示出响应的结果，客户端不需要再做任何处理
- 服务端渲染可以说为在后台使用模板引擎
2.5.3 判断页面为那种渲染
1. 一个网页数据如果右键可以查看源代码，那就是服务端渲染过来的
2. 在客户端渲染的网页下，切换页面查看数据网页不用整体刷新，而服务端渲染的网页会刷新
2.5.4 客户端渲染和服务端渲染的区别
- 客户端渲染不利于
SEO搜索引擎优化 - 服务端渲染是可以被爬虫抓取到的，客户端异步渲染很难被爬虫抓取到，不利于用户搜索到网站数据
- 一般网站是把客户端渲染和服务端渲染两者结合来做的
- 例如京东的网站，商品列表采用服务端渲染，利用用户搜索；商品评价采用客户端渲染优化用户体验
2.6 处理表单get提交
2.6.1 表单是如何提交的
表单中需要提交的表单控件元素必须要有`name`属性
- name 属性规定表单的名称
- 表单提交
- 表单提交后，跳转页面，请求路径中会包含用户查询的字符串，所有请求路径是动态变化的
- 这个时候
url我们是不知道的，所有不能通过判断url来做出响应
var http = require('http');
var fs = require('fs');
var url = require('url');
http.
createServer(function(request,response){
//简写模式，该函数会被直接注册为 server
//使用 url.parse() 方法将路径解析为一个方便操作的对象，第二个参数为true表示直接将搜索的内容解析为一个对象
var parserObj = url.parse(request.url,true);
//单独获取不包含查询字符串部分的路径,然后通过判定 pathname 来做出相应的反应
var pathname = parseObj.pathname;
//不使用 url.parse()
//var url = request.url;
//var filePath = '/index.html';
if(pathname === '/'){
....
}
})