Node.js学习笔记（二）

最新推荐文章于 2023-09-26 01:19:09 发布

yw00yw

最新推荐文章于 2023-09-26 01:19:09 发布

阅读量240

点赞数 2

分类专栏： node 文章标签： node

本文链接：https://blog.csdn.net/yw00yw/article/details/82219357

版权

node 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 代码规范

1.1代码规范问题

为了约定大家的代码风格，所以在社区中诞生了一些比较规范的代码风格规范：

JavaScript Standard Style
Airbnb JavaScript Style

1.2 代码分号问题

当采用五分好的代码风格的时候，只需要注意以下情况就可以避免相应的错误

当一行代码是以：( [ `开头的时候，则前面补上一个分号用来避免一些语法解析错误。

在一些第三方的代码中能看到一上来就以一个;开头

结论：无论代码是否有分号，都建议如果一行代码是以(、[、`开头的，最好在其前面补上;分号

2. http-Apache

2.1 http-Apache功能

var http = require('http');
var fs = require('fs');
// 1. 创建server
var server = http.createServer();

// 2. 监听server的request请求事件，设置请求处理函数
var wwwDir = './www';

server.on('request',function(req,res){
    var url = req.url;

    var filePath = '/index.html';
    if(url !== '/'){
        filePath = url;
    }
    fs.readFile(wwwDir+filePath,function(err,data){
        if(err){
            return res.end('404 Not Found.');
        }
        res.end(data);
    });
});

// 3. 绑定端口号，启动服务
server.listen(3000,function(){
    console.log('服务器已经启动');
});

2.2 fs 读取目录

var fs = require('fs');

fs.readdir('E:/node/02/www',function(err,file){
    if(err){
        return console.log('目录不存在');
    }
    console.log(file);
});

2.3 http-Apache目录列表

var http = require('http');
var fs = require('fs');
// 1. 创建server
var server = http.createServer();

// 2. 监听server的request请求事件，设置请求处理函数
var wwwDir = './www';

server.on('request',function(req,res){
    var url = req.url
    fs.readFile('./template.html',function(err,data){
       if(err){
            return res.end('not fund 404');
       }
       // 1. 如何得到 wwwDir 目录列表中的文件名和目录名
            // fs.readdir
       // 2. 如何将得到的文件名和目录名替换到template.html中
            // 2.1 在template.html中需要替换的位置预留一个特殊的标记
            // 2.2 根据files生成需要的html内容
            // 模板引擎
       // 只要做了这两件事，问题就解决了
       fs.readdir(wwwDir,function(err,files){
            if(err){
                return res.end('Can not find www dir.');
            }
            var content = ''
            files.forEach( function(item) {
                content += `<tr>
                <td data-value="image/"><a class="icon dir" href="/E:/node/02/www/image/">${item}/</a></td>
                <td class="detailsColumn" data-value="0"></td>
                <td class="detailsColumn" data-value="1533979817">2018/8/11 下午5:30:17</td>
                </tr>`
            });
             data = data.toString();
             // 普通的字符串解析替换，浏览器看到的结果就不一样了
             data = data.replace('^_^',content);
             res.end(data);
       });    
    });
});

// 3. 绑定端口号，启动服务
server.listen(3000,function(){
    console.log('服务器已经启动');
});

3. 在node中使用模板引擎

art-template 不仅可以在浏览器中使用，也可以在node中使用
网址：https://aui.github.io/art-template/zh-cn/index.html

3.1 安装

npm install art-template --save
# 该命令在哪执行就会把包下载到哪里，默认会下载到 node_modules 目录中

3.2在浏览器中使用art-template

强调：模板引擎不关心你的字符串内容，只关心自己能认识的模板标记语法，例如{{}}，语法被称之为mustache语法，八字胡。

<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tpl">
        hello {{name}}
</script>
<script>
    var ret = template('tpl',{
        name: 'JACK'
    });
    console.log(ret);
</script>

3.3 在node中使用模板引擎

模板引擎最早就是诞生于服务器领域，后来才发展到了前端
- 安装 npm isntall art-template –save
- 在需要适应的文件中模块中加载 art-template
- 只需要使用 require 方法加载就可以了： require(‘art-template’)
- 参数中的 art-template 就是你下载的包的名字
- 查文档，使用模板引擎的API
var template = require(‘art-template’)
// 将模板源代码编译成函数并立刻执行
//template.render(source, data, options);
var tplStr = <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <h2>name: {{name}}</h2> <h3>age: {{age}}</h3> </body> </html>
var ret = template.render(tplStr, {
name: ‘Jack’,
age: 18
})

读取文件中的html进行渲染

var template = require('art-template')
var fs = require('fs')

fs.readFile('./tpl.html',function(err,data){
    if(err){
        return console.log('读取文件失败了');
    }
    // 默认读取到的 data 是二进制数据
    // 而模板引擎的 render 方法需要接受的是字符串
    // 所以我们需要把 data 二进制数据转换为 字符串 才可以给模板引擎使用
    var ret = template.render(data.toString(),{
        name: 'Jack',
        age: 23
    });
});

3.4 在Apache案例中使用模板引擎

var http = require('http');
var fs = require('fs');
var template = require('art-template');
// 1. 创建server
var server = http.createServer();

// 2. 监听server的request请求事件，设置请求处理函数
var wwwDir = './www';

server.on('request',function(req,res){
    var url = req.url
    fs.readFile('./template-apache.html',function(err,data){
       if(err){
            return res.end('not fund 404');
       }
       // 1. 如何得到 wwwDir 目录列表中的文件名和目录名
            // fs.readdir
       // 2. 如何将得到的文件名和目录名替换到template.html中
            // 2.1 在template.html中需要替换的位置预留一个特殊的标记
            // 2.2 根据files生成需要的html内容
            // 模板引擎
       // 只要做了这两件事，问题就解决了
       fs.readdir(wwwDir,function(err,files){
            if(err){
                return res.end('Can not find www dir.');
            }
             htmlStr = template.render(data.toString(),{
                            title: 'test',
                            files: files
                      })
               res.end(htmlStr);
              });
    });
});

// 3. 绑定端口号，启动服务
server.listen(3000,function(){
    console.log('服务器已经启动');
});

4. 服务端渲染和客户端渲染

4.1 服务端渲染

说白了就是在服务端使用模板引擎
模板引起最早诞生于服务端，后来才发展到了前端

4.2 服务端渲染和客户端渲染的区别

客户端渲染不利于SEO搜索引擎优化
服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
所以真正的网站既不是纯异步也不是纯服务端渲染出来的，而是两者之间的结合做的
例如京东商品列表就是采用的是服务端渲染，目的是为了seo搜索引擎优化
而商品评论列表为了用户体验，而且不需要seo优化，所有采用客户端渲染

5. 留言板

浏览器在收到html响应内容之后，就要开始从上到下一次解析，当在解析的过程中，如果发现link,script,img,iframe,video,audio等具有src或者link的href属性标签的时候，浏览器会自动对这些资源发起新的请求。

# 把当前模块所有的依赖项的声明放在最上面
# 为了让目录结构保持统一清晰，所以我们约定,把所有的html文件都放到views文件夹中
# 注意：在服务端中，文件中的路径不要去写相对路径，因为这个时候所有的资源都是通过url标识获取的
# 浏览器在真正发请求的时候会把 http://127.0.0.1:3000拼上
# 不要再想文件路径了，把所有的路径都想成url
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url')

http.createServer(function(req, res){
    var parseObj = url.parse(req.url, true)
    // 单独获取不包含查询字符串的路劲部分
    var pathname = parseObj.pathname
    if(pathname === '/'){
        fs.readFile('./views/index.html', function(err, data){
            if(err){
                return res.end('404 not fund .')
            }
            var htmlStr = template.render(data.toString(),{
                comments: comments
            })
            res.end(htmlStr)
        })
    }else if(pathname.indeof('/public/') === 0){
             // 统一处理
             //     如果请求路径是以/public/开头的，则我认为只要获取public中的某个资源
             //     所以我们就直接可以把请求路径当做文件路径来直接进行读取
        fs.readFile('.'+pathname, function(err, data){
            if(err){
                return res.end('404 not fund .')
            }
            res.end(data)
        })
    }else if(pathname === '/pinglun'){
            // 一次请求对应一次响应，响应结束这次请求就结束了
            // res.end(JSON.stringify(parseObj.query))
            // 我们已经使用url模块的parse方法把请求的路径中的查询字符串给解析成了一个对象
            // 所以接下来要做的就是：
            //  1. 获取表单的提交的数据 parseObj.query
            //  2. 将当前时间日期添加到数据对象中，然后存储到数组中
            //  3. 让用户从定向跳转到首页 /
            var comment = parseObj.query
            comment.dateTime = '2014-2-2 19:22:22'
            comments.push(comment)
            // 服务端这个时候已经把数据存储好了接下来就是让用户重新请求 / 首页，就可以看到添加的数据了
            // 如何通过服务器让客户端重定向
            //   1. 状态码设置 402 临时重定向   statuscode
            //   2. 在响应头中通过Location告诉客户端往哪重定向  setHeader
            // 如果客户端发现收到服务器的响应的状态码是 302 就会自动去响应头中找Location，然后对改地址发送新的请求，所以就能看到客户端自动跳转了
            res.statusCode = 302
            res.setHeader('Location','/')
            res.end()
    }else{
        fs.readFile('./views/404.html', function(err,data){
            if(err){
                return res.end('404 not found.')
            }
            res.end(data)
        })
    }
}).listen(3000，function(){
    console.log('running...')
})

6. 处理网站中的静态资源

为了方便的统一处理这些静态资源，所以我们约定把所有的静态资源都放在public目录中
哪些资源能被用户访问，哪些不能被访问，可以通过代码来进行灵活的控制

7. 表单提交

表单提交分为：

默认的提交行为
表达异步提交

对于表单提交的请求路径，由于其中具有用户动态填写的内容

所以可以通过url.parse(’请求路径‘，true)可以获取相应的参数

使用url.parse方法将路径解析为一个方便操作的对象，第二个参数为true表示直接将查询字符串转为一个对象（通过query属性访问）

8. 评论留言项目流程

/ index.html
开放publick目录中的静态资源
- 当请求/public/xxx的时候，读取响应public目录中的具体资源
/post post.html
/pinglun
- 接收表单提交的数据
- 让表单重定向到 /
- statusCode
- setHeader

yw00yw

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js学习笔记（二）

代码规范1.1代码规范问题为了约定大家的代码风格，所以在社区中诞生了一些比较规范的代码风格规范：JavaScript Standard StyleAirbnb JavaScript Style1.2 代码分号问题当采用五分好的代码风格的时候，只需要注意以下情况就可以避免相应的错误当一行代码是以：( [ `开头的时候，则前面补上一个分号用来避免一些语法解析错误。...
复制链接

扫一扫