1、node.js实现的时钟案例

大炮不想学习

已于 2023-07-22 13:29:36 修改

阅读量1.9k

点赞数 3

分类专栏： 04、node.js学习文章标签： javascript

于 2022-04-04 20:32:24 首次发布

本文链接：https://blog.csdn.net/weixin_48137421/article/details/123958817

版权

04、node.js学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.JavaScript相关知识回顾

1.1JavaScript

1.2浏览器中JavaScript的运行环境（前端运行环境）

2.初始Node.js

2.1什么是Node.js

2.2Node.js中JavaScript的运行环境（后端运行环境）

1.JavaScript相关知识回顾

1.1JavaScript

JavaScript通过JavaScript解析引擎可以在浏览器中被执行，通过浏览器内置的API可以对BOM和DOM等进行操作。

1.2浏览器中JavaScript的运行环境（前端运行环境）

运行环境是指代码正常运行所需的必要环境，以chrome为例：V8引擎负责解析和执行JavaScript代码。内置API是由运行环境提供的特殊接口，只能在所属的运行环境中被调用。

我们知道JavaScript可以用来做前端开发。JavaScript能否做后端开发呢？答案是肯定的！但是我们不能单纯的用JavaScript来做后端开发，需要借助Node.js运行环境。

通俗的来说，我们的JavaScript是一门语言，我们这门语言所编写的代码如果想去执行的话就离不开运行坏境，如果我们把JS代码运行在浏览器中（浏览器是一个运行环境），我们的JS代码就可以去做前端开发。同时如果我们把JS代码运行在Node.js中（后端运行环境）我们的JS代码就可以去做后端开发。

2.初始Node.js

2.1什么是Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境

2.2Node.js中JavaScript的运行环境（后端运行环境）

3.时钟案例

3.1用到的node.js内置的API模块

案例分析：此次案例我们需要用到Node.js内置的API模块fs（文件系统模块：提供了一系列方法和属性，用来满足对文件的操作需求）和path（路径模块：用来满足用户对路径的处理需求）

3.1.1文件系统模块fs学习

看视频安装node.js

读取文件内容：fs.readFile()

向文件写入内容：fs.writeFile()
读写练习：考试成绩整理

3.1.2路径模块path

__dirname表示当前文件所处的目录
今后凡是涉及到路径拼接的问题时都用path.join()方法进行处理

得到文件名path.basename()
得到扩展名部分path.extname()

3.1代码实现

// 1.1导入fs
const fs = require('fs')
    // 1.2导入path
const path = require('path')

//1.3定义正则表达式，分别匹配<style></style>和<script></script>标签
// [\s\S]表示匹配空格和非空格
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

// 2.1调用fs.readFile()方法读取文件
fs.readFile(path.join(__dirname, '../素材/index.html'), 'utf8', function(err, dataStr) {
        // 2.2文件读取失败
        if (err) {
            console.log('文件读取失败' + err.message)
        }
        // 2.3读取文件成功后，调用对应的三个方法，分别解析出css,js,html文件
        resolveCSS(dataStr)
        resolveJS(dataStr)
        resolveHTML(dataStr)
    })
    // 3.1定义处理css样式的方法
function resolveCSS(htmlStr) {
    // 3.2使用正则提取需要的内容
    const r1 = regStyle.exec(htmlStr)
        // 3.3将提取出来的样式字符串，进行字符串的replace替换操作
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
        // console.log(newCss)
        // 3.4调用fs.writeFile()方法，将提取的样式，写入到clock目录中index.css的文件里边
    fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function(err) {
        if (err)
            return console.log('写入css样式失败!' + err.message)
        console.log('写入样式成功！')
    })
}

// 4.1定义处理js脚本的方法
function resolveJS(htmlStr) {
    // 4.2使用正则提取对应的<script></script>标签
    const r2 = regScript.exec(htmlStr)
        //4.3将提取出来的样式字符串，进行字符串的replace替换操作
    const newJS = r2[0].replace('<script>', '').replace('</script>', '')
        // console.log(newJS)
        // 4.4调用fs.writeFile()方法，将提取的脚本，写入到clock目录中index.js的文件里边
    fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
        if (err)
            return console.log('写入js脚本失败!' + err.message)
        console.log('写入脚本成功！')
    })
}

// 5.1定义处理HTMl结构的方法
function resolveHTML(htmlStr) {
    // 5.2将内嵌的style标签和script标签替换为外联的link和script标签
    const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="index.css"/>').replace(regScript, '<script src="index.js"></script>')
        // 5.3写入index.html这个文件
    fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
        if (err)
            return console.log('写入html失败!' + err.message)
        console.log('写入html成功！')
    })
}

4.http模块

4.1相关知识图

创建web服务器
req请求对象（浏览器只能发起默认的GET请求）
如何进行POST请求

需要借助postman工具

解决中文乱码问题
根据不同的url相应不同的页面

4.2时钟web服务器

创建一个web服务器，将之前拆分出来的文件对外提供为外部资源。

核心思路

实现步骤：

代码实现：

// 1导入需要的模块
const http = require('http')
const fs = require('fs')
const path = require('path')

// 2.1创建web服务器
const server = http.createServer()
    // 2.2监听web服务器的request事件
server.on('request', (req, res) => {
        // 3.1获取到客户端请求的url地址
        // /clock/index.html
        // /clock/index.js
        // /clock/index.css
        const url = req.url
            // 3.2把请求的url地址映射为具体文件的存放路径
            // const fpath = path.join(__dirname, url)
            // 5.1预定义空白的存放路径
        let fpath = ''
        if (url === '/') {
            // 5.2如果请求的路径为/，则手动指定文件的存放路径
            fpath = path.join(__dirname, './clock/index.html')
        } else {
            // /index.html
            // 5.3否则动态拼接文件的存放路径
            fpath = path.join(__dirname, './clock', url)
        }

        // 4.1根据映射过来的文件路径读取文件的内容
        fs.readFile(fpath, 'utf8', (err, dataStr) => {
            // 4.2读取失败，向客户端响应固定的错误消息
            if (err) return res.end('404 Not found')
                // 4.3读取成功,将成功的内容响应给客户端
            res.end(dataStr)
        })
    })
    // 2.3启动服务器
server.listen(8080, () => {
    console.log('server running at http://127.0.0.1:8080')
})