nodejs 开发,手把手开始第一个服务器程序(原生)
此文章为原生 nodejs ,仅做学习使用
想学习 express 和 koa2 的小伙伴请绕路
此文章适合有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.htmlfs.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.htmlfs.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.htmlfs.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.htmlfs.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.htmlfs.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
nodejs 开发,手把手开始第一个服务器程序(原生)相关推荐
- 用Kotlin开发您的第一个应用程序| Android与Kotlin
In the previous article, we learned how to setup Kotlin in the android studio? Now moving to journey ...
- 使用VS Code开发AngularJS 2 第一个应用程序
使用VS Code开发AngularJS 2 第一个应用程序 目录 运行环境 创建项目 安装依赖包 创建TypeScript应用程序 配置应用程序 运行应用程序 运行环境 运行环境: Windows ...
- 使用Eclipse开发Spring的第一个简单程序
使用Eclipse开发Spring的第一个简单程序 本篇文章将通过一个简单的入门程序向读者演示Spring框架的使用过程,具体如下: 使用Eclipse创建Web应用并导入JAR包 使用Eclipse ...
- 油价小程序开发 - 手把手教你写小程序(适合初学者)
最近有空开了一个简单的油价小程序,分享给大家学习.(适合新手练手项目,大神们请多指教) 首先展示一下小程序 油价小程序预览 小程序分两屏,首屏展示的是每个城市的油价.每日黄历.分享功能.定位当前城市功 ...
- 记录nodejs使用express搭建一个api服务器程序(5)-nodejs操作SQL数据库,Sequelize和Knex
此文章是我自己用来记录如何搭建一个以express为基础的api服务器框架的过程,并不是什么新手教程,并不会每一步都写得非常详细,如果您要阅读此文,需要一点nodejs和编写代码的基础知识 文接上篇 ...
- 【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
- 【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
- 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
- 【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
最新文章
- 中国科学院、东南大学等联合发表最新的视觉 Transformer 综述
- 415. Add Strings
- redis缓存策略小结
- Oracle中rank() over, dense_rank(), row_number() 的区别
- matlab涡轮机建模,数学实验大作业---数学曲面
- Poj - 3254 Corn Fields (状压DP)(入门)
- python爬虫笔记(三):提取(二)
- python有哪些软件包用来考察变量之间的相关性_Python语言基础考察点:python语言基础常见考题(一)...
- 提高设计档次的8个方法
- kali linux 2.0下安装ssh和metasploit
- IDEA 控制台显示Run Dashboard
- atitit 项目管理 package 模块管理 包管理 依赖管理 maven attilax总结.docx
- 可以下载MapInfo地图吗?
- vba批量合并指定的sheet_用VBA实现把多个Excel文件合并到一个Excel文件的多个工作表(Sheet)里...
- 芯片行业相关公司及就业岗位汇总
- css常见定位、居中方案
- 英语学习软件——《经典双语广告语大全》(图)
- 基于[三星6818]I2C驱动开发的0.96寸oled屏
- 测试u盘真假的手机软件,U盘真假怎么检测|教你检测U盘真假的方法
- 21根火柴取放 c语言,趣味C语言题Word版
热门文章
- zcmu-2116一元三次方程求解
- windows下部署oracle11,windows下配置oracle11g的dataguard
- 【译】Jumping into Solidity —The ERC721 Standard (Part 1)
- 理解Android进程创建流程
- 进击的Android Hook 注入术《一》
- 【问链财经-区块链基础知识系列】 第二十七课 区块链与分布式账本的异同
- Android面试题详细整理系列(二)
- java切换系统输入法_java - 关于Android输入法切换的问题
- 浏览器控制台执行代码_JavaScript 和 浏览器那些事
- html如何引入less,VueJS如何引入css或者less文件的一些坑