nodejs入门

最新推荐文章于 2024-09-16 08:47:17 发布

白潏

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量377

点赞数 10

分类专栏：前端文章标签： javascript node.js 前端

本文链接：https://blog.csdn.net/qq_65719034/article/details/135325479

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

从学完html，css，js之后，就开始做支付宝小程序的项目了，最近项目刚结束，又开始了自己的前端学习之旅，做一个项目真的能压榨自己的潜力和精力hhh，10.15-12.31，小程序是从0到1的构建，这个项目中也学到了很多，如有想要和作者探讨的请私聊或者评论，当然俺也是一个小白也不一定能给出什么很有用的建议。

进入正题---nodejs的学习笔记

fs模块

const fs=require('fs')

// fs.readFile('./1.txt','utf-8',function(err,dataStr){
//     if(err){
//         return console.log('文件读取失败',err.message)
//     }
//     // console.log(err)
//     console.log('---------')
//     console.log("读取成功",dataStr)
// })

// fs.writeFile('./1.txt','hello-----',function(err){
//     if(err){
//         console.log("sss")
//     }
// })


fs.readFile('./1.txt','utf-8',function(err,dataStr){
    if(err){
        return console.log('文件读取失败',err.message)
    }
    // console.log(err)
    // console.log('---------')
    console.log("读取成功",dataStr)
    //分割
    const arrOld=dataStr.split(' ')
    const arrNew=[]
    arrOld.forEach(item=>{
        arrNew.push(item.replace('=',':'))
    })

    const newStr=arrNew.join('\r\n')
    console.log(newStr)

    fs.writeFile('./detail.txt',newStr,'utf-8',function(err){
        if(err){
            return console.log('文件写入失败',err.message)
        }
        console.log("写入成功")
    })
})

path模块

        当动态拼接路径时，node会以当前命令时所处的目录，动态拼接出被操作文件的完整路径，
如果要解决，可以直接提供一个完整的文件路径
        __dirname表示当前文件所处的目录
        路径拼接的操作，用path.join()方法处理，不要直接用+进行字符串拼接

fs.writeFile()方法只能用于创建文件，不能用来创建路径,重复调用会覆盖

// console.log(__dirname)

const fs=require('fs')
// fs.readFile(__dirname+'/2.txt','utf-8',function(err,dataStr){
//     if(err){
//         return console.log('文件读取失败',err.message)
//     }
//     // console.log(err)
//     console.log('---------')
//     console.log("读取成功",dataStr)
// })

//路径拼接
const path =require('path')
// ../会抵消一层路径  ./忽视
const pathStr=path.join('/a','/b/c','../','/d/d/e')
console.log(pathStr)

// fs.readFile(path.join(__dirname,'/2.txt'),'utf-8',function(err,dataStr){
//     if(err){
//         return console.log('文件读取失败',err.message)
//     }
//     // console.log(err)
//     console.log('---------')
//     console.log("读取成功",dataStr)
// })

const fpath='/a/xc/v/index.html'
var fullName=path.basename(fpath)
console.log(fullName)//index.html
var nameWithoutExt=path.basename(fpath,'.html')
console.log(nameWithoutExt)//index
var fext=path.extname(fpath)
console.log(fext)//.html

拆分一个html文件的案例->css，js，html

const fs=require('fs')
const path=require('path')


//匹配<style></style>标签的正则
// \s表示空白字符 \S表示非空白字符 *表示匹配任意次

const regStyle=/<style>[\s\S]*<\/style>/
const regScript=/<script>[\s\S]*<\/script>/


fs.readFile(path.join(__dirname,'../xanli.html'),'utf-8',function(err,dataStr){
    if(err) return console.log("读取失败"+err.message)
    resolveCSS(dataStr)
    resolveJS(dataStr)
    resolveHTML(dataStr)
})


//exec()方法用于检索字符串中的正则表达式的匹配
function resolveCSS(htmlStr){
    const r1=regStyle.exec(htmlStr)
    const newCSS=r1[0].replace('<style>','').replace('</style>','')
    fs.writeFile(path.join(__dirname,'./test/index.css'),newCSS,err=>{
        if(err) return console.log("写入css失败"+err.message)
        console.log("写入成功")
    })
}

function resolveJS(htmlStr){
    const r2=regScript.exec(htmlStr)
    const newJS=r2[0].replace('<script>','').replace('</script>','')
    fs.writeFile(path.join(__dirname,'./test/index.js'),newJS,err=>{
        if(err) return console.log("写入css失败"+err.message)
        console.log("写入成功")
    })
}


function resolveHTML(htmlStr){
    // const r2=regScript.exec(htmlStr)
    const newHTML=htmlStr.replace(regStyle,'<link rel="stylesheet" href="./index.css"/>').replace(regScript,'<script src="./index.js"></script>')
    fs.writeFile(path.join(__dirname,'./test/index.html'),newHTML,err=>{
        if(err) return console.log("写入css失败"+err.message)
        console.log("写入成功")
    })
}

案例文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
        {
            height: 500px;
            width: 400px;
            background-color: pink;
            margin: 0  auto;
        }
        .center{
            text-align: center;
        }
        .color1{
            color: aquamarine;
        }
        .color2{
            color:beige;
        }
        .color3{
            color:black;
        }
        a{
            text-decoration: none;
        }
        .indent{
            text-indent: 2em;
        }       
    </style>
</head>
<body>
    <div >
        <h1 class="center">标题</h1>
        <p class="center">
            <span class="color1">2023年7月9日15:47:51 </span>
            <a href="https://www.baidu.com/" target="_blank" class="color2">百度</a> 
            <a href="#" target="_blank" class="color3">收藏</a>          
        </p>
        <hr>
        <p class="indent">
            让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时，会设置 line-height：1 可以取消上下间距
 </p>
        <p class="indent">
            让单行文本垂直居中可以设置line-height 文字父元素高度
            网页精准布局时，会设置 line-height：1 可以取消上下间距</p>
        <p class="indent">
            让单行文本垂直居中可以设置line-height 文字父元素高度
网页精准布局时，会设置 line-height：1 可以取消上下间距 </p>
    </div>
</body>
<script>
    console.log("我是js模块")
</script>
</html>

http模块

const fs= require('fs')
const http=require('http')
const path = require('path')
// 创建web服务器实例
const server=http.createServer()
// 为服务器绑定request事件，监听客户端的请求
server.on('request',function(req,res){
    console.log("这是re事件")
})
// req请求对象
// 只要服务器接收到了客户端的请求，就调用通过server.on()为服务器绑定的requst事件处理函数，如下是访问客户端相关的数据或属性

server.on('request',(req,res)=>{
    // ///req是请求对象，包含了与客户端相关的数据和属性
    // //req.url 是客户端请求的url地址
    // //req.method 是客户端的method请求类型
    // const str=`your request url is ${req.url},and request method is ${req.method}`
    // console.log(str)

    // //res是响应对象，包含了与服务器相关的数据和属性
    // //要发送到客户端的字符串
    // //res.end()向客户端发送指定内容，并结束这次请求的处理过程---向客户端发送中文内容时会出现乱码问题，需要手动设置内容的编码格式
    // const str1=`你在请求${req.url},请求方法 ${req.method}`
    // //防止中文乱码的问题，设置响应头
    // res.setHeader('Content-Type','text/html; charset=utf-8')
    // res.end(str1)

    //根据不同的url响应不同的html内容
    // const url =req.url
    // let content='<h1>404 Not Found!</h1>'//默认的内容
    // if(url==='/'||url==='index.html'){
    //     content='<h1>这是首页</h1>'
    // }else if(url==='/about.html'){
    //     content='<h1>关于页面</h1>'
    // }
    // res.setHeader('Content-Type','text/html; charset=utf-8')
    // res.end(content)

    const url =req.url
    let fpath=''
    if(url==='/'){
        fpath=path.join(__dirname,'../3/test/index.html')
    }else{
        fpath=path.join(__dirname,'../3/test/',url)
    }
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
        if(err) return res.end('404 Not found')
            // //防止中文乱码的问题，设置响应头
        // res.setHeader('Content-Type','text/html; charset=utf-8')
        res.end(dataStr)
    })
})


// 启动服务器
server.listen(8080,function(){
    console.log("sever running at http://127.0.0.1:8080")
})

消费资源的电脑就是客户端
对外提供网络资源的电脑就是服务器

服务器和普通电脑的区别就是安装了web服务器软件，如IIS，Apache等

在node.js中，不需要第三方web服务器软件，可以基于http模块，写一个服务器软件，提供web服务

ip地址
IP地址就是互联网上每一台计算机的唯一地址，具有唯一性，只有知道对方IP地址的前提下，才能与对应的电脑进行通信
互联网中每台web服务器都有自己的IP地址，在终端运行 ping www.baidu.com 可以查看到百度服务器的ip地址，
开发期间，127.0.0.1,就是自己web服务器的ip地址---localhost

域名
ip地址和域名是一一对应的，域名相当于IP地址的别名，这种关系存在于域名服务器的电脑中。域名服务器就是提供IP地址和域名之间的转换服务的服务器
端口号
计算机中的端口号就如同门牌号，每个web晚饭前都对应一个唯一的端口号，客户端发过来的网络请求，通过端口号看了眼准确的交给对应的web服务器进行处理
每个端口号不能同时被多个web服务占用
在实际应用中，url中的80端口可以被省略