2-资源文件请求 path包 require导包/文件查找原则 exports/__dirname 使用第三方包 后端渲染模板

资源文件请求

• 如果资源在一个页面中, 这些资源文件会自动发送请求, 而且这些路径默认和资源文件, 所在的路径是一致的

• 当如果我们直接读取对应的html页面的时候,没有加载其他的例如图片以及css资源, 那么不会显示对应的图片以及css样式

• 静态资源请求的时候, 路径一般不包含对应的static或者public

  • 通过对应的pathname作为读取资源的路径,注意这个pathname请求的时候, 一般不包含static,所以我们需要拼接

path包

• 通过对应的path来获取对应的pathname的后缀名
  • var extName = path.extname(pathName);

require导包原理

• 原理
  • 当导入一个文件, 若此文件中是对应的代码, 使用require导入相当于把对应的代码, 导入到当前的文件中
• 执行的过程

  1. 我们会把对应的代码通过一个function的函数来拼接成一个字符串

  2. 然后使用eval函数执行

      /*例如
      1. 当前我们会使用function(){拼接对应的console.log('hello world'),然后拼接}
      2. 形成function(){console.log('hello world')}这个一个字符串, 然后放入到eval函数中执行*/
     

require文件查找原则

1. 当导入一个文件的时候, 如果不写对应的路径

   • 那么系统会默认去node_moduls这个文件夹
   • 下面去寻找和导入的文件同名的文件, 如果有这个文件就会加载
     • 例如: var fs = require('fs');

2. 当导入一个文件的时候, 如果不设置路径和后缀名

   • 那么会去对应的node_modules下面找同名的文件(就是找foo.js).
   • 如果这个文件不存在, 会把这个文件当成一个文件夹, 找这个文件夹下对应的index.js文件加载.
     • 加载index.js文件的原因
       1. 一般在一个文件夹下面会有一个package.json文件
       2. 该文件表示当前的文件夹的配置文件, 这个配置中有一个main的字段
       3. 对应的value值决定了我们默认加载哪个文件

使用第三方包的过程

1. 使用cd命令进入到项目所在的目录(window系统中的此命令不可以跨盘符)
2. 使用npm install + 包名, 下载对应的包
   • 如果对应的文件夹中没有mode_modules这个文件夹, 系统会自动创建此文件夹, 然后把对应的包放在此文件夹下

exports使用

• 如果在一个文件中定义了变量和函数只能在这个文件内部使用
  • 把这个文件导入到其他的文件中, 里面的变量和函数是不能使用的
• 如果想要在外部使用, 方法如下
  • 通过exports.msg = msg;暴露把对应的变量和函数
  • 通过module.exports = People;暴露对应的类(构造函数)

__dirname

• 当某个文件包导入别的文件中, 如果当前文件中有一些路径的设置, 如果只是在当前文件, 这个路径可以参考当前文件(b.js), 如果要是被导入到其他的文件中, 我们设置路径的时候, 参考的文件是其他的文件(a.js)

• 报错: No such file or directory, ...

• 解决: 让路径参考a.js, 但是如果当其层级结构非常深的时候, 所以可以利用__dirname来解决

  • __dirname: 它写在上面地方, 就表示当前文件所在的目录. 相当于用相对形式来表示绝对路径.
    • 如, 当前在b.js中, 如果b.js的去路径是c:/abc/1234/b.js, __dirname表示c:/abc/1234

处理对应的的post请求

    /*处理提交的数据
    * 一般提交的数据比较多, 如果数据都提交完成后处理
    * 有可能会阻塞程序运行
    * 为了避免阻塞,提高效率,一般把对应的数据拆分成不同各个小的部分
    * 然后当这些小的部分的数据过来以后,直接处理
    * 最后把这些小的数据拼接起来,形成我们最终的数据
    * 1.我们需要处理提交过来的各个部分,所以我们需要监听数据
    * 2.然后为我们还需要监听数据的完成,如果完成后,我们直接显示数据
    * addListener:第一个参数表示监听的标识,一般是固定,第二个对应的回调
    * 回调中有传递过来的数据
    * */

    var http = require('http');
    var querystring = require('querystring');
    var server = http.createServer(function (req,res) {
    
        if(req.url=='/dopost' && req.method.toLowerCase() =='post'){
            var allString = '';
            req.addListener('data',function (chunk) {
                /*只有有数据传递过来,我们就需要对数据进行拼接
                * 我们可以设置一个字符串来拼接数据*/
                allString += chunk; 
            })
        
            /*2.监听数据完成*/
            req.addListener('end',function (err) {
                var allStringO = querystring.parse(allString)
        
                console.log(allStringO);    
            })
        }
    })
    server.listen(3000,'127.0.0.1');

formidable包使用

• 使用formidable包处理post请求

    /*1.创建表单*/
    var form = new formidable.IncomingForm();
  
    /*1.1我们在解析之前设置对应的上传图片的目录*/
    form.uploadDir = "./uploads";
  
    /*2.使用表单解析对应的请求
    * parse中有两个参数,第一个参数表示对应的请求
    * 第二个参数表示回调,回调中有是三个参数
    * 第一个表示错误
    * 第二个fields:表示和域相关的东西,域就是凡是input就可以看做域
    * 第三个参数files:表示和文件相关的东西*/
    form.parse(req,function (err,fields,files) {
        if(err){
            console.log(err);
            return;
        }
        console.log(fields);
        console.log(files);
        console.log(files.tupian.path);
    })
  

silly-datetime包处理图片唯一性

• 规则: 一般采用一个时间戳+一个随机数字

    var http = require('http');
    var formidable = require('formidable');
    var sd = require('silly-datetime');
    var fs = require('fs');
    
    var server = http.createServer(function (req,res) {
    
        /*判断路径和请求方法,然后处理对应的请求数据*/
        if(req.url=='/dopost' && req.method.toLowerCase() =='post'){
            
            var form = new formidable.IncomingForm();
            form.uploadDir = "./uploads";
    
            /*实际开发中,需要根据我们自己的规则来给对应的图片设置
            * 对应的名称用以保证图片的唯一性              
            * HH:如果是大写表示对应的24小时
            * hh:表示12小时*/
            var newTime = sd.format(new Date(),'YYYYMMDDHHmmss');
            var randomNum = parseInt(Math.random()*89999+100000);
  
            form.parse(req,function (err,fields,files) {
    
                /*我们需要使用新的规则替换旧的路径,所以我们需要获取旧的的路径
                 * 因为我们在使用新的路径替换旧的路径的时候,我们最好使用绝对路径
                 * 所以我们获取新的路径和旧的路径的时候,最好设置为绝对路径
                 * 在解析路径的时候,会把最后一个/之前的所有的东西都解析成路径*/
                var oldPath = __dirname+'/'+files.tupian.path;
                var newPath = __dirname+'/uploads'+'/uploads'+newTime + randomNum+'.jpg';
    
                /*使用fs的rename方法来设置替换路径
                * rename:第一个参数表示旧的路径
                * 第二个参数表示新的路径,
                * 第三个参数表示回调*/
                fs.rename(oldPath,newPath,function (err) {
                    if(err){
                        console.log(err);       
                        return;
                    }       
                })      
            })      
            res.end();      
        }       
    })
    server.listen(3000,'127.0.0.1');
  

后端模板的渲染过程

• 过程
  • 当对应的前端发送请求的时候,我们接受到请求
  • 然后在后端把对应的页面使用数据渲染完成,然后发送给前端

• 使用后端渲染EJS模板
  1. 设置模板
     • 一般是一个字符串. 我们设置这个字符串的时候一般会把对应的变量以及当前程序无法识别的东西放置在一个<%%>中间
     • 变量: <%= a%>
  2. 设置数据
     • 一般是一个字典
  3. 使用数据渲染模板
     • ejs.render(模板,数据)