用node或者vscode开启一个简单的本地server服务器,加载html网页

使用Live Server

想要加载本地html页面可以快速能让它在你本地浏览器中打开,可以有好多种方式,如果你有使用vscode,可以安装一个插件:Live Server,然后直接在vscode中直接右键就可以开启这个服务:

安装好之后,在vscode中打开html,然后右键:就可以自动打开浏览器并加载你这个html页面

使用node搭建server服务

使用node.js自己写一个server服务,然后开启服务后,就可以返回本地的一个HTML页面:

javascript 复制代码
//加载必须的模块
var http = require('http')
var fs = require('fs')
var url = require('url')
var path = require('path')

//定位静态目录的位置,根据请求找出对应的文件
function staticRoot(staticPath, req, res) {
  var pathObj = url.parse(req.url, true)

  if (pathObj.pathname === '/') {
    pathObj.pathname += 'index.html'
  }
  //读取静态目录里面的文件,然后发送出去
  var filePath = path.join(staticPath, pathObj.pathname)
  fs.readFile(filePath, 'binary', function (err, content) {
    if (err) {
      res.writeHead(404, 'Not Found')
      res.end('<h1>404 Not Found</h1>')
    } else {
      res.writeHead(200, 'Not Found')
      res.write(content, 'binary')
      res.end()
    }
  })
}
//创建服务器
var server = http.createServer(function (req, res) {
  staticRoot(path.join(__dirname, '/'), req, res)
})
//监听8080端口
server.listen(80)
相关推荐
执明wa3 小时前
Android Studio 打包 APK
android·ide·android studio
好悬给我拽开线7 小时前
RoboTTT
ide·vscode·编辑器
2601_962294619 小时前
Python工具软件开发:借助InsCode AI IDE开启智能编程新时代
ide·python·ai·开发工具·智能化编程
心平气和量大福大1 天前
android studio(AS)工具-调试-统计总行数
android·ide·android studio
时间的情敌1 天前
几款常用的编程AI工具
vscode
山峰哥1 天前
造价算量系统SQL优化,慢查询从9秒压到35毫秒‌
大数据·数据库·sql·编辑器·深度优先
捷瑞电子工坊1 天前
VSCode的配置和一些报错问题
vscode·ubuntu·c/c++·编译报错·开发环境配置·初学者教程·json配置
孙小l懒_keep_update2 天前
【VSCODE中的Codex 打不开(页面空白,一直 Loading)】
vscode
-To be number.wan2 天前
编译原理第三章:编译器是怎么“认字“的?——词法分析全解析
学习·编辑器
gzkuijing2 天前
MDI1PRD23B7‑EQ|Novanta IMS一体化RS-485/422步进电机参数、选型要点与典型应用
人工智能·机器学习·编辑器