使用node创建本地服务器并启动静态页面

使用node创建本地服务器

//导入http模块
const http = require('http');
//创建服务器
const app = http.createServer();
//我这里使用的是箭头函数 这里是给app 绑定了 request 响应事件,函数的参数分别是 request 请求参数,和respond 相应参数
app.on('request',(req,res)=>{
	//响应回的页面内容是ok
	res.end('ok);
})
//正常的写法
app.on('request',function(req,res){
	res.end('ok');
})
//监听端口号 每次创建服务器这个是必须的
app.listen(3000);
//在控制台中输出创建成功
console.log('服务器创建成功')

进入目录 然后可以使用nodemon app.js(因为我创建的名字叫做app.js 如果没有安装nodemon第三方模块也可以使用node app.js 运行)
在这里插入图片描述
进入localhost:3000 出现了ok 代表我们创建的服务器成功了

访问静态页面

思路:
1.通过在url地址中输入localhost:3000/default.html就可以跳转地址,
2.只要我们获取url中pathName的路径然后使用路径拼接找到default.html这个文件然后读取他的内容,使用res.end()方法 把内容响应到页面中就好

1.首先获取请求的url地址

const http = require('http');
//创建服务器
const app = http.createServer();
//导入处理url参数的模块
const url = require('url')
//我这里使用的是箭头函数 这里是给app 绑定了 request 响应事件,函数的参数分别是 request 请求参数,和respond 相应参数
app.on('request',(req,res)=>{
	//获取路径名称
	res.end(url.parse(req.url).pathName);
	
})
//正常的写法
app.on('request',function(req,res){
	res.end('ok');
})
//监听端口号 每次创建服务器这个是必须的
app.listen(3000);
//在控制台中输出创建成功
console.log('服务器创建成功')

在这里插入图片描述
注意看url地址,就算url地址中含有参数内容,使用url.parse(req.url).pathname可以获取到路径名称

2.路径拼接
首先看下这是我的路径 app.js是运行的文件
在这里插入图片描述

const http = require('http');
//创建服务器
const app = http.createServer();
//导入处理url参数的模块
const url = require('url')
//导入路径拼接的模块
const path = require('path')
//我这里使用的是箭头函数 这里是给app 绑定了 request 响应事件,函数的参数分别是 request 请求参数,和respond 相应参数
app.on('request',(req,res)=>{
 		//获取路径名称
        var pathName = url.parse(req.url).pathname;

        //真实路径 = 当前路径+'public'+pathName
        var realPath = path.join(__dirname, 'public' + pathName);
	
})

//监听端口号 每次创建服务器这个是必须的
app.listen(3000);
//在控制台中输出创建成功
console.log('服务器创建成功')

3.找到对应的html文件响应到页面中

const http = require('http');
//创建服务器
const app = http.createServer();
//导入处理url参数的模块
const url = require('url')
//导入路径拼接的模块
const path = require('path')
// 导入读取文件的模块
const fs = require('fs')
//我这里使用的是箭头函数 这里是给app 绑定了 request 响应事件,函数的参数分别是 request 请求参数,和respond 相应参数
app.on('request',(req,res)=>{
 		//获取路径名称
        var pathName = url.parse(req.url).pathname;

        //真实路径 = 当前路径+'public'+pathName
        var realPath = path.join(__dirname, 'public' + pathName);
        // 使用fs.readFile()读取文件内容 
        fs.readFile(realPath, (error, result) => {
        //使用res.end()响应到页面中
            res.end(result)
        })
	
})

//监听端口号 每次创建服务器这个是必须的
app.listen(3000);
//在控制台中输出创建成功
console.log('服务器创建成功')

在网站中输入localhost:3000/default.html打开了静态页面
在这里插入图片描述
4.完善

const http = require('http');
//创建服务器
const app = http.createServer();
//导入处理url参数的模块
const url = require('url')
//导入路径拼接的模块
const path = require('path')
// 导入读取文件的模块
const fs = require('fs')

// 这个模块是根据 文件的类型 返回这个类型的字符串
 const mime = require('mime');
 
//我这里使用的是箭头函数 这里是给app 绑定了 request 响应事件,函数的参数分别是 request 请求参数,和respond 相应参数
app.on('request',(req,res)=>{
 		//获取路径名称
        var pathName = url.parse(req.url).pathname;
		// 如果路径为空 pathName 就会为 '/default.html' 不为空 不发生改变 那么我就可以使用locahost:3000访问到页面内容
	   pathName = pathName == '/' ? '/default.html' : pathName
        //真实路径 = 当前路径+'public'+pathName
        var realPath = path.join(__dirname, 'public' + pathName);
        // 获取文件的类型返回对应文件类型的字符串
   		var type = mime.getType(realPath)

        // 使用fs.readFile()读取文件内容 
        fs.readFile(realPath, (error, result) => {
        //如果报错 就是error 不为空
        if(error!=null){
        	 // 如果文件读取失败就会 报错
            res.writeHead(404, {
                'content-type': 'text/html;charset=utf8', //这里设置charset=utf8 设置的是返回的编码类型 设置text/html 告诉浏览器返回的是什么类型的文本
            });

            res.end('文件读取失败');
            return
        }
        else{
	         res.writeHead(200, {
	            'content-type': type
	        });
	         //使用res.end()响应到页面中
	          res.end(result)
    		 }	
   	})
})

//监听端口号 每次创建服务器这个是必须的
app.listen(3000);
//在控制台中输出创建成功
console.log('服务器创建成功')

看url地址 我们可以通过 localhost:3000去访问
在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值