nodejs 开发，手把手开始第一个服务器程序（一）

此文章适合有HTML 和css 、js 基础的小伙伴看哦

如果能帮到你，荣幸之至

文章纯手打，如有纰漏欢迎下方留言

写在前面：

　　127.0.0.1 : 回环地址，每一台电脑都有该ip，指向当前使用的电脑

　　nodejs 中的 js 与 浏览器中 js 的区别：

　　　　浏览器中 js ：ECMAScript 核心 + DOM + BOM

　　　　Node 中的 js ：ECMAScript 核心 + 全局成员 + 模块系统（系统模块、第三方模块、自定义模块）

　　　　全局成员： setTimeout、setInterval、console.log() 等。

　　　　注意 ：这几个名称和功能虽然和浏览器中的一样，但是是 Nodejs 自己实现的，与浏览器无关

安装nodejs

　　官网： https://Nodejs.org/en/

　　中文网：http://Nodejs.cn/

　　Nodejs 系统模块是什么 ：随着 Nodejs 一起安装，并由官方进行维护的模块。

　　　　常用的系统模块： fs、http、url、path 等一个模块中包含了很多方法和属性，可以帮助我们实现不同的功能

Node 创建 web 服务器

使用 HTTP 模块搭建 web 服务器：

　　1、引入 http 模块

　　创建一个 js 文件，例如此处取名为 kiss.js 。

const http = require(‘http‘);

　　2、创建服务器对象

const server = http.createServer();

　　3、开启服务器

　　此处监听了 3000 端口

server.listen(3000, () => {
    console.log(‘Server is running...‘);
});

　　4、监听浏览器请求并进行处理

server.on(‘request‘, (req, res) => {
    // end方法能够将数据返回给浏览器，浏览器会显示该字符串
    res.end(‘Hello Nodejs‘);
});

　　on ：该方法用来监听事件

　　参数1（此处的request）：事件类型，request 代表浏览器请求事件

　　参数2 ：回调函数。当监听到浏览器请求后出发的回调函数，该函数中有两个参数

　　　　　　第一个参数（此处的 req ）：请求对象

　　　　　　第二个参数（此处的 res ）：相应对象

　　end 方法能够将数据返回给浏览器，浏览器会显示该字符串

　　遂，在 kiss.js 文件中，内容如下：

//1. 导入 http 模块
const http = require(‘http‘);

//2. 创建服务器对象
const server = http.createServer();

//3. 开启服务器
server.listen(3000, () => {
    console.log(‘Server is running...‘);
});

//4. 监听浏览器请求并进行处理
server.on(‘request‘, (req, res) => {
    // end方法能够将数据返回给浏览器，浏览器会显示该字符串
    res.end(‘Hello Nodejs‘);
});

　　在文件目录中打开 cmd ，运行命令 node .\kiss.js ，即可开启服务器：

　　如图

　　

　　打开浏览器，在地址栏输入  http://127.0.0.1:3000/ ，会看到 res.end() 所返回的字符串

　　如图

　　

显示页面

　　服务器已经搭建起来了，那么下一步就是如何在浏览器端展示页面了

　　首先准备一个 HTML 文件，在 kiss.js 文件同级目录下创建一个 index.html 文件，准备内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kisskiss</title>
    <style>
        h2 {
            width: 800px;
            height: 60px;
            margin: 100px auto;
            line-height: 60px;
            text-align: center;
            color: white;
            background-image: linear-gradient(to right,
                      rgb(255, 211, 218) 0%,
                      rgb(132, 223, 132) 100%)
        }
    </style>
</head>
<body>
   <h2>我是 kiss 首页</h2>
</body>
</html>

　　此时服务器文件 kiss.js 需要另一个模块 ：文件读取模块 ——> readFile

　　1、引入 fs 模块

const fs = require(‘fs‘);

　　2、调用 readFile 方法读取文件内容

fs.readFile(‘./index.html‘, ‘utf-8‘, (err, data) => {
    if (err) {
        return console.log(err);
    }

    console.log(data);
})

　　参数1 : 要读取的文件路径，相对路径和绝对路径均可（推荐使用绝对路径）

　　参数2 : 设置字符集, 常用的中文字符集有三种 : utf-8、 gb2312、 gbk 该参数是可选参数，如果不设置该参数，读取内容默认是二进制数据

　　参数3 : 读取完成后触发的回调函数，该函数中有两个参数  err 和 data

　　　　err : 错误对象 - 如果读取正确 :  err 为 null ;  如果读取失败 :  err 为错误对象 ;

　　　　data : 文件中的数据

　　在 congsole.log(data) 处，便可进行对文件内容的操作，data 整个是以字符串类型被取出

　　调整后 kiss.js 文件内容如下 ：

const http = require(‘http‘); //1. 导入 http 模块
const fs = require(‘fs‘); //5. 导入/加载/引入 文件模块

//2. 创建服务器对象
const server = http.createServer();

//3. 开启服务器
server.listen(3000, () => {
    console.log(‘Server is running...‘);
});

//4. 监听浏览器请求并进行处理
server.on(‘request‘, (req, res) => {

    //6. 读取文件
    fs.readFile(‘./index.html‘, ‘utf-8‘, (err, data) => {
        if (err) {
            return console.log(err);
        }
        //7. end方法返回读取的文件字符串，浏览器会显示该文件内容
        res.end(data);
    })

});

　　在 cmd 中 Ctrl + C 退出之前启动的服务器，重新启动服务器   node kiss.js

　　在浏览器中刷新页面 http://127.0.0.1:3000/ ，可以看到准备的 HTML 页面已经成功展示在浏览器中

　　如图

　　

　　Tips : 中文乱码问题

　　fs 的 readFile 函数中第二个参数可不写，但是会造成页面中文乱码，另一个解决办法是，使用 res（响应对象）中的 setHeader 方法：

res.setHeader(‘content-type‘, ‘text/html;charset=utf-8‘);

 多个页面时

　　再新建一个HTML页面，index_2.html 内容如下 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第二个页面</title>
    <style>
        i {
            display: block;
            background-color: pink;
            width: 300px;
            height: 50px;
            border-radius: 15px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <i>这是第二个页面</i>
</body>
</html>

　　此时问题是，如何才能在输入不同的网址的时候，显示不同的两个页面？

　　解决办法，修改 kiss.js 代码如下 ：

const http = require(‘http‘); //1. 导入 http 模块
const fs = require(‘fs‘); //5. 导入/加载/引入 文件模块

//2. 创建服务器对象
const server = http.createServer();

//3. 开启服务器
server.listen(3000, () => {
    console.log(‘Server is running...‘);
});

//4. 监听浏览器请求并进行处理
server.on(‘request‘, (req, res) => {
    //6. req对象的url属性中保存了当前请求的url地址
    const url = req.url
    //7.判断不同url，返回不同页面到浏览器端进行展示
    if (url === ‘/‘) {
        //8. 读取文件index.html
        fs.readFile(‘./index.html‘, ‘utf-8‘, (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回读取的文件字符串，浏览器会显示该文件内容
            res.end(data);
        })
    } else if (url === ‘/index_2‘) {
        //8. 读取文件index_2.html
        fs.readFile(‘./index_2.html‘, ‘utf-8‘, (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回读取的文件字符串，浏览器会显示该文件内容
            res.end(data);
        })
    }
});

　　重启服务器，在浏览器地址栏输入 http://127.0.0.1:3000 ，依旧显示原来 index.html 页面的内容

　　在地址栏输入 http://127.0.0.1:3000/index_2 ，显示新的 index_2.html 页面的内容，如下 ：

　　

　　

　　核心：req（请求对象）中有url属性，该属性中保存了当前请求的url地址

　　注意： url属性中保存的地址是没有 协议、IP、端口号，并且以 / 开头的地址

　　

　　示例：

　　http://127.0.0.1:3000     ===>    /

　　http://127.0.0.1:3000/index_2    ===>     /index_2

静态资源加载

　　上面已经初步体验了一个服务器是怎样跑起来的，但是！上面只有一个 html 文件，并且它的样式是直接包含在 html 文件中的，如果一个 HTML 文件内引入了它的资源文件呢？ 比如 css 和 js 文件。

　　修改文件结构目录如下 ：

　　

　　index.html 页面内容 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kisskiss</title>
    <link rel="stylesheet" type="text/css" href="../public/css/index.css">
    <script type="text/javascript" src="../public/js/index.js"></script>
</head>
<body>
   <h2>我是 kiss 首页</h2>
</body>
</html>

　　将原来 HTML 文件中的 css 资源单独抽取出来写入 index.css 文件中，index.css 文件内容 ：

h2 {
    width: 800px;
    height: 60px;
    margin: 100px auto;
    line-height: 60px;
    text-align: center;
    color: white;
    background-image: linear-gradient(to right,
              rgb(255, 211, 218) 0%,
              rgb(132, 223, 132) 100%)
}

　　index.js 文件内容 ：

alert(‘this is kiss.js‘);

　　kiss.js 文件内容 ：

const http = require(‘http‘); //1. 导入 http 模块
const fs = require(‘fs‘); //5. 导入/加载/引入 文件模块

//2. 创建服务器对象
const server = http.createServer();

//3. 开启服务器
server.listen(3000, () => {
    console.log(‘Server is running...‘);
});

//4. 监听浏览器请求并进行处理
server.on(‘request‘, (req, res) => {
    //6. req对象的url属性中保存了当前请求的url地址
    const url = req.url
    //7.判断不同url，返回不同页面到浏览器端进行展示
    if (url === ‘/‘) {
        //8. 读取文件index.html
        fs.readFile(‘./view/index.html‘, ‘utf-8‘, (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回读取的文件字符串，浏览器会显示该文件内容
            res.end(data);
        })
    }
});

　　启动服务器，主页一直处于加载状态

　　按下键盘 f12 ，或者单击鼠标右键 → 检查 → 选择 network ：

　　

　　可以看到 index.css 和 index.js 文件的状态（status）显示为 pending

　　服务器发起了对 index.css 和 index.js 文件的请求，但是却一直未得到服务器的响应

　　来分析一下此处的原理 ：

　　

　　1、浏览器中输入请求地址 http:127.0.0.1:3000，按下回车发送请求

　　2、服务器根据请求信息的 url （此时为 "/"）找到 index.html ，并将内容返回给浏览器

　　3、浏览器接收到服务器返回的内容，开始对 index.html 进行解析，当解析到 link 标签和 script 标签时，再次请求服务器，想要获取 index.css 和 index.js 文件，可是我们的服务器代码中，并没有写针对这两个文件的内容，所以也就不会返回这两个文件的内容，服务器就会一直处于等待状态，直到超时报错。

　　接下来我们修改一下 kiss.js 文件，内容如下 ：

const http = require(‘http‘); //1. 导入 http 模块
const fs = require(‘fs‘); //5. 导入/加载/引入 文件模块

//2. 创建服务器对象
const server = http.createServer();

//3. 开启服务器
server.listen(3000, () => {
    console.log(‘Server is running...‘);
});

//4. 监听浏览器请求并进行处理
server.on(‘request‘, (req, res) => {
    //6. req对象的url属性中保存了当前请求的url地址
    const url = req.url
    //7.判断不同url，返回不同页面到浏览器端进行展示
    if (url === ‘/‘) {
        //8. 读取文件index.html
        fs.readFile(‘./view/index.html‘, ‘utf-8‘, (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回读取的文件字符串，浏览器会显示该文件内容
            res.end(data);
        })
    } else if (url === ‘/index_2‘) {
        //8. 读取文件index_2.html
        fs.readFile(‘./view/index_2.html‘, ‘utf-8‘, (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回读取的文件字符串，浏览器会显示该文件内容
            res.end(data);
        })
    } else if(url.startsWith(‘/public‘)) {
        //8. 读取index.html文件的静态资源文件
        fs.readFile(‘.‘+url, ‘utf-8‘, (err, data) => {
            if (err) {
                return console.log(err);
            }
            // end方法返回读取的文件字符串，浏览器会显示该文件内容
            res.end(data);
        })
    }
});

　　分析 ：因为静态资源文件全部被放到了同一个 public 文件夹下，所以我们用一个 else if 分支来处理就可以了

　　　　index.css 文件的 req（请求对象）的 url 属性，值为 ‘/public/css/index.css‘

　　　　index.js 文件的 req（请求对象）的 url 属性，值为 ‘/public/js/index.js‘

　　　　所以我们判断，当 url 以 ‘/public‘ 开头的时候，便将 fs 的 readFile 方法的第一个参数（文件路径）拼接成相对路径加上 url 的形式

　　刷新页面，可以看到弹出 js 文件内容：

　　

　　点击确定后可以看到带有 css 样式的页面，成功显示！

　　　　如果本文帮到您，能否点击右侧打赏作者一包小零食以兹鼓励捏？

　　　　　　　　　

未完待续，敬请期待……

原文地址：https://www.cnblogs.com/yummylucky/p/10367065.html

时间： 2024-08-02 08:35:46

nodejs 开发，手把手开始第一个服务器程序（一）的相关文章

实战第一个云程序

一. 摘要 首先圣殿骑士很高兴云计算系列能得到大家的关注和支持,这个系列准备了几个月,终于在今天发布第一篇了(由于文章太长,拆成了两篇,这是其中一篇).在这几个月中通过不断的使用和实践,对云计算总算有了一个较粗浅的认识,所以也希望能够和大家一起分享.在发布这篇文章之前也考虑了很久,因为一开始就讲概念的话,势必会得不到很好的效果,毕竟大家都不太熟悉这个新事物.与其"人云亦云"还不如先来一个简单的实例,所以我就先选择一个实践应用来看到底云计算能给我们带来什么好处,从开发者角度,随着这个概念

《Nodejs开发加密货币》之七：入口程序app.js解读

入口程序app.js解读 发布本文时,比特币价格 ￥2873.95 / $443.95 .为什么一个凭空设计出来的加密货币如此受追捧?为什么微软.IBM等巨头纷纷进入?为什么尝试了解比特币的技术人员,都会被深深吸引?它到底有什么诱人之处?<Nodejs开发加密货币>,让我们一起探索其背后的密码. <Nodejs开发加密货币>,目的是提供加密货币(亿书币)的详尽开发文档,涉及到使用Nodejs开发产品的方方面面,从前端到后台.从服务器到客户端.从PC到移动.从IO密集型到计算密集型.

完成端口与高性能服务器程序开发

原文出处:http://blog.csdn.NET/roen/archive/2007/03/19/1533378.aspx 以一个文件传输服务端为例,在我的机器上它只起两个线程就可以为很多个客户端同时提供文件下载服务,程序的性能会随机器内CPU个数的增加而线性增长,我 尽可能做到使它清晰易懂,虽然程序很小却用到了NT 5的一些新特性,重叠IO,完成端口以及线程池,基于这种模型的服务端程序应该是NT系统上性能最好的了. 首先.做为完成端口的基础,我们应该理解重叠IO,这需要你已经理解了内核对象及

SharePoint使用BCS开发你第一个应用程序（一）

SharePoint使用BCS开发你第一个应用程序(一) 本系列教你使用BCS(Business Connectivity Service)创建OBA(Office business application). 它包括5个步骤,从数据源的创建到部署插件到客户端.这里假设你想创建OBA可以横跨服务器和客户端.如果你指向要创建在服务器上的OBA时,在第三步停止就可以了. 并且,这些步骤在复杂程度上也不同.例如一个简单的例子是创建Web Service Connection到LOB(Line Of B

Unix 网络编程(四)- 典型TCP客服服务器程序开发实例及基本套接字API介绍

写在开头: 在上一节中我们学习了一些基础的用来支持网络编程的API,包括"套接字的地址结构"."字节排序函数"等.这些API几乎是所有的网络编程中都会使用的一些,对于我们正确的编写网络程序有很大的作用.在本节中我们会介绍编写一个基于TCP的套接字程序需要的一些API,同时会介绍一个完整的TCP客户服务器程序,虽然这个程序功能相对简单,但确包含了一个客户服务器程序所有的步骤,一些复杂的程序也都是在此基础上进行扩充.在后面随着学习的深入,我们会给这个程序添加功能. 下面

nodejs开发游戏服务器遇到的性能问题

问题描述: 使用nodejs开发了一个游戏服务器,为了尽可能提高服务器的性能,服务器采用多进程的架构,前面处理玩家socket连接的是多个nodejs进程,使用 child_process 模块,服务器启动时fork出来,而处理玩家游戏逻辑的是单独一个nodejs进程(因为玩家之间需要交互,而且玩家都是有状态的,所以无法分成多个进程)这个作为主进程:主进程与子进程之间使用使用child_process模块内建的通讯方式进行通讯: 现在服务器性能出现瓶颈,服务器同时在线去到1500人左右,CPU占

SharePoint使用BCS开发你第一个应用程序（四）

SharePoint使用BCS开发你第一个应用程序(四) 很多时候,你想将IIS(Internet Information Services)中的Web Services和外部列表集成.这里教你创建ASP.NET Web Service,部署到IIS,然后在SharePoint Designer中创建外部内容类型. 1. 打开VS--文件--新建--网站,选择.NET Framework 3.5,然后选择ASP.NET Web Service. 2. 默认文件系统,给Web Service提供位

SharePoint使用BCS开发你第一个应用程序（三）

SharePoint使用BCS开发你第一个应用程序(三) 创建外部内容类型. 创建外部内容类型有三种不同方式: 1. 在记事本上手写XML代码(不推荐). 2. 使用SharePoint Designer 2010 创建(推荐). 3. 使用VS(需要有丰富的编程经验). 如果你使用SharePoint Designer创建外部内容类型,它自动保存XML元数据到BDC业务数据连接元数据仓库中并在管理中心呈现出来.VS为BDC元数据项目创建标准WSP,这样XML元数据文件被部署到正确的位置.如果你

SharePoint使用BCS开发你第一个应用程序（二）

SharePoint使用BCS开发你第一个应用程序(二) 创建外部数据源 本章我们使用AdventureWorksLT2008 SQL Server数据库作为外部数据源.下图显示了表SalesLT.Customer,你将在创建OBA过程中用到它. 关于对应数据库文件,可以从这里下载.将mdf和ldf文件放在 c:\Program Files (x86)\Microsoft SQL Server\MSSQL.1\MSSQL\Data文件夹中(我本机没有,只好新建),然后附加到SQL Server即