nodejs七天教程 ----- Day2

今天会下雨吗

于 2021-03-23 15:01:41 发布

阅读量57

点赞数

分类专栏： nodejs七天教程笔记文章标签： nodejs

本文链接：https://blog.csdn.net/weixin_45663697/article/details/115124305

版权

nodejs七天教程笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

通过改变浏览器地址栏地址查看不同文件信息

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 === '/'){
            ....
        }	
	})

今天会下雨吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nodejs七天教程 ----- Day2

通过改变浏览器地址栏地址查看不同文件信息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 ..
复制链接

扫一扫