148.Node.js学习笔记（二）2018.11.27

其他 2018-12-13 18:47:16 阅读次数: 0

目录

1. 代码规范

1.1代码规范问题

1.2 代码分号问题

1.3 模板字符串

2. http-Apache

2.1 http-Apache功能

2.2 fs 读取目录

2.3 http-Apache目录列表

3. 在node中使用模板引擎

3.1  安装

3.2  在浏览器中使用art-template

3.3 在node中使用模板引擎

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

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

4.1 服务端渲染

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

5. 留言板

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

7. 表单提交

8. 评论留言项目流程

1. 代码规范

 1.1代码规范问题

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

  • JavaScript Standard Style
  • Airbnb JavaScript Style

1.2 代码分号问题

  • 当采用不同的代码风格的时候，只需要注意以下情况就可以避免相应的错误：
  • 当一行代码是以：( 、 [ 、 ` 开头的时候，则前面补上一个分号;用来避免一些语法解析错误。
  • 在一些第三方的代码中能看到一上来就以一个;或者!、&、~ 开头的代码，其实与分号的效果一样的。
  • 结论：
  • 无论代码是否有分号，都建议如果一行代码是以(、[、`开头的，最好在其前面补上;分号

1.3 模板字符串

  • 模板字符串以反引号``为标志
  • 支持换行和拼接变量
例如：var  foo  = `

hello nodejs

hello

world`

console.log(foo); //会输出
//hello nodejs
//hello
//world

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中使用模板引擎

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 install 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

补充：

Node把模板引擎存储在文件里面

浏览器把模板字符串存储在script标签里面

猜你喜欢

转载自blog.csdn.net/youyouwuxin1234/article/details/84566026
今日推荐
周排行
AIZU 2224 Save your cats(并查集)
HTTP响应头状态码详解
Python socket编程（2）
MaxCompute Studio使用心得系列7—作业对比
Supervisor安装使用
LeetCode 164. Maximum Gap
mysql面试题: 一张表里面有ID自增主键，当insert了17条记录之后，删除了第15,16,17条记录，再把mysql重启，再insert一条记录，这条记录的ID是18还是15
nutch1.2 DeleteDuplicates IndexMerger 详解
OC - @property与setter,getter方法
SpringBoot @Transactional的rollbackFor属性
每日归档
更多
2024-09-19(0)
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022