初识 Nodejs (附带案例)_nodejs 实例

目录

一、什么是Node.js

二、Node.js 可以做什么

三、Node.js内置API

3.1、fs 模块

3.2、path 路径模块

3.3、http模块

四、本地服务案例

---

一、什么是Node.js

        它不是一门语言，库，框架，而是js运行时的环境。nodejs可以解析和执行js代码，相比于以前只用浏览器才可以解析执行js代码，现在的Js可以完全脱离浏览器来运行。Nodejs作者把Chrome中的V8引擎移植出来，开发了一个独立的js运行时环境(Nodejs)。

        Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。

二、Node.js 可以做什么

        Node.js 作为一个 JavaScript 的运行环境，仅提供了一些基础的功能和 API，然而结合一些框架和第三方库能够完成很多丰富的应用。

1. 基于 Express 框架（http://www.expressjs.com.cn/），可以快速构建 Web 应用

2. 基于 Electron 框架（https://electronjs.org/），可以构建跨平台的桌面应用

3. 基于 restify 框架（http://restify.com/），可以快速构建 API 接口项目

4. 读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…

Node.js学什么？

Node.js 内置 API 模块（fs、path、http等）和 第三方 API 模块（express、mysql 等）

三、Node.js内置API

3.1、fs 模块

fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求。例如：

• fs.readFile( path，[options，] callback) 方法，用来读取指定文件中的内容；

                参数1：必选参数，字符串，表示文件的路径。
                参数2：可选参数，表示以什么编码格式来读取文件。
                参数3：必选参数，文件读取完成后，通过回调函数拿到读取的结果。

        回调函数（err，dataStr）： 成功， err 的值等于 null；失败，err是一个错误对象，dataStr 的值为 undefined

• fs.writeFile(file，data，[options，] callback) 方法，用来向指定的文件中写入内容；

                参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径。
                参数2：必选参数，表示要写入的内容。
                参数3：可选参数，表示以什么格式写入文件内容，默认值是 utf8。
                参数4：必选参数，文件写入完成后的回调函数。

        回调函数（err）：成功，则 err 的值等于 null;失败，则 err 的值等于一个 错误对象

//导入内置模块
const fs = require('fs')
 
//读文件
fs.readFile('./path',function(err,dataStr){
    if(err)  {
       return console.log('文件读取失败'+ err.message) 
    } 
    console.log(dataStr)
 
})
 
//写文件
fs.writeFile('./path','String',function(err){
    if(err){
        return console.log('文件写入失败！' + err.message)
    }
    console.log('文件写入成功！')
})

3.2、path 路径模块

path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求。例如：

•  path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串
•  path.basename(path [,ext]) 方法，用来从路径字符串中，将文件名解析出来    

                        path <string> 必选参数，表示一个路径的字符串
                        ext <string> 可选参数，表示文件扩展名
                        返回: <string> 表示路径中的最后一部分

•  path.extname(path)可以获取路径中的扩展名部分

3.3、http模块

http 模块，创建服务器，对外提供 web 服务。步骤：

1. 导入 http 模块
2. 创建 web 服务器实例
3. 为服务器实例绑定 request 事件，监听客户端的请求
4. 启动服务器

const http =require('http')
 
const server = http.createServer()
// req 是请求对象，包含了与客户端相关的数据和属性
// res 是响应对象，包含了与服务端相关的数据和属性
server.on(require,(req,res)=>{    
    // req.url 是客户端请求的 URL 地址,req.method 是客户端请求的 method 类型
    const url = req.url
    const method = req.method
 
    const str = `Your request url is ${url}, and request method is ${method}`
    
    // 调用 res.setHeader() 方法，设置 Content-Type 响应头，解决中文乱码的问题
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    // 调用 res.end() 方法，向客户端响应一些内容
    res.end(str)
})
 
server.listen(80,()=>{
    console.log('server running at http://127.0.0.1')
})

四、本地服务案例

要求实现访问：127.0.0.1 或 127.0.0.1/clock.html  是时钟； 访问： 127.0.0.1/g2048.html 是2048小游戏；访问其他则是404

 

实现原理： 利用 http 模块监听前端客户请求的地址，根据地址将相应的文件，通过file模块读取并返回给客户。

案例组成：

        

 其中 index.js

//导入相应模块
const http = require('http')
const fs = require('fs')
const path =require('path')
 
const server =http.createServer()
 
server.on('request',function(req,res){
    const url = req.url
    console.log(url);
    
    if(url==='/'||url==='/clock.html'){
        //当访问 '/' 或 '/clock.html' 时，读取的地址是一样的
        const fpath = path.join(__dirname,'./clock.html')
        fs.readFile(fpath, 'utf8', (err,dataStr)=>{
            if(err) {
                //若返回的是中文需要添加响应头，不然会乱码
                res.setHeader('Content-Type', 'text/html; charset=utf-8')
                return res.end('文件读取错误')
            }
            res.end(dataStr)
        })
    }else if(url==='/g2048.html' || url==='/c2048.css'||url==='/j2048.js'){
        //当html文件内链了其他文件，如css，js时，浏览器会主动像服务器进行资源的请求
        //在浏览器输入 /g2048.html 访问2048 页面时，实际访问了/g2048.html，/c2048.css ，/j2048.js 三个文件
        //注意path地址拼接的区别
        const fpath = path.join(__dirname,'js2048',url)
        fs.readFile(fpath,'utf8',(err,dataStr)=>{
            if(err) {
                res.setHeader('Content-Type', 'text/html; charset=utf-8')
                return res.end('文件读取错误')
            }
            res.end(dataStr)
        })
    }else{
        //英文不需要添加响应头
        res.end('404 Not Found.')
    }
})
 
server.listen(80,function(){
     console.log('server listen at http://127.0.0.1');
})

clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="clock">
        <p id="date" class="date"></p>
        <p id="time" class="time"></p>
        <div id="text">内置模块[fs path http]的使用</div>
    </div>
</body>
<script>
    const week = ['周日','周一','周二','周三','周四','五','周六'];
    // const cd=new Date();
   
    let timeID = setInterval(updateTime,1000)
    updateTime();
 
    function updateTime(){
        var cd=new Date();
        console.log(cd);
        
        document.getElementById('time').innerHTML=zeroPadding(cd.getHours(),2) + ":" +zeroPadding(cd.getMinutes(),2)+':'+zeroPadding(cd.getSeconds(),2);
        document.getElementById('date').innerHTML=zeroPadding(cd.getFullYear(),4) + "-" +zeroPadding(cd.getMonth()+1,2)+'-'+zeroPadding(cd.getDate(),2)+'  '+week[cd.getDay()];
 
    }
    
    function zeroPadding(num,digit){
        let zero='';
        for (let i=0;i<digit;i++){
            zero+='0'
        };
        return (zero+num).slice(-digit);
    }
 
</script>
<style>
    html,body{
        height: 100%;
        margin:0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background: #0f3854;
        background: radial-gradient(ellipse at center,#0a2e38 0%,#000000 70%);
        background-size: 100%;
    }
    p {
        margin: 0;
        padding: 0;
    }
    #clock {
        font-family: 'Share Tech Mono', monospace;
        color: #ffffff;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #daf6ff;
        text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
        
    }
    #clock .time {
            letter-spacing: 0.05em;
            font-size: 80px;
            padding: 5px 0;
        }
    #clock .date {
            letter-spacing: 0.1em;
            font-size: 24px;
        }
    #clock .text {
            letter-spacing: 0.1em;
            font-size: 15px;
            padding: 20px 0 0;
        }
 
</style>
</html>

 JavaScript小游戏2048-Javascript文档类资源-CSDN下载

推荐个前端网站（外网）：https://codepen.io/