three.js自学之旅(1)——用node.js在本地搭建最最=基本web环境
2018-01-05 15:25
465 查看
学习three.js为什么要搭建本地服务器?(强调一下只是一个最基本的,实际项目中,逻辑还是很复杂的,不要用下面的代码)
公:在文件夹里运行的时候发现网上的图片材质加载不出来。索性搭个服务器让它走http流程。
私:之前学的node.js由于长时间不使用,已经完全生疏了,之前有在eclipse里搭建一个tomcat服务器,各种配,各种配,各种配,配了一整天,脑廓都配爆炸了,今天花了一上午(回顾之前的内容+简单搭建),就完成本地服务器的搭建,所以觉得node.js对于前端开发者来说更加容易上手。
由于内容过于简单,直接上代码,并一句句注释,算是对自己加深印象的一个过程。
整体的目录结构如图所示。如果用的是webstorm,请百度配置流程后,直接运行下面这段代码后即可在浏览器里输入 http://localhost:5681/index.html 即可验证。
结果为:
可以看到html以及js文件都可以成功加载,如果没有webstorm可以用cmd,找到nodeJS的安装目录(注意你的项目要放在nodeJS的安装环境下,或者有关联,怎么关联请自行百度)。使用命令node
你的JS文件名 即可运行该JS。
公:在文件夹里运行的时候发现网上的图片材质加载不出来。索性搭个服务器让它走http流程。
私:之前学的node.js由于长时间不使用,已经完全生疏了,之前有在eclipse里搭建一个tomcat服务器,各种配,各种配,各种配,配了一整天,脑廓都配爆炸了,今天花了一上午(回顾之前的内容+简单搭建),就完成本地服务器的搭建,所以觉得node.js对于前端开发者来说更加容易上手。
由于内容过于简单,直接上代码,并一句句注释,算是对自己加深印象的一个过程。
整体的目录结构如图所示。如果用的是webstorm,请百度配置流程后,直接运行下面这段代码后即可在浏览器里输入 http://localhost:5681/index.html 即可验证。
结果为:
可以看到html以及js文件都可以成功加载,如果没有webstorm可以用cmd,找到nodeJS的安装目录(注意你的项目要放在nodeJS的安装环境下,或者有关联,怎么关联请自行百度)。使用命令node
你的JS文件名 即可运行该JS。
var http = require("http"); var url = require("url"); var fs = require("fs"); //加载三个模块,分别是http模块,url模块,fs模块,引入模块后可以调用里面的对象和方法,有点像前端直接引用JS,具体机制可以百度(初学者不需要了解的那么复杂)稍微介绍一下三个模块(根据个人的理解),第一个用于模拟http请求,第二个用于解析url,第三个用于解析文件
var server = http.createServer();//一句话创建本地服务器,是的,本地服务器已经建好了 server.listen(5681,"localhost"); //创建一个监听器,该函数能监听某个具体端口(5681)发送的请求,端口号请自行定义,尽量不要占用常用的端口(1-1024,) server.on("request",function(req,res){ //监听http请求,req参数是请求从客户浏览器发送到服务器时附带的参数,res参数是服务器收到请求并处理后,返回给客户机的浏览器的结果 var urlObj = url.parse(req.url); //解析发送请求时的url如"http://localhost:5681/index.html?id=1#p=1",则会被解析成一个json对象,具体可以自己打印,这里只用到他的pathName:"/index.html" var dir = __dirname; //获取当前文件夹的路径 var pathName = urlObj.pathname; var type = pathName.substr(pathName.lastIndexOf(".")+1); //获取文件后缀,如html,css,js var filePath =dir+'/'+type+pathName ;//拼接文件名 filePath = filePath.replace(/\//g,'\\');//由于是查找本地文件,所以要把/替换成\,如d:\... fs.readFile(filePath,function(err,data){ //读取文件内容 console.log("Error:"+err);//如果文件存在,err==null if(err){ res.writeHead(404,{ 'content-type' : 'text/html;charset=utf-8' }); res.end();//一定要写这句话,不然http请求在服务器不知道什么时候结束,客户端的浏 a527 览器也会一直处于等待状态 }else{ res.writeHead(200,{ 'content-type' : 'text/html;charset=utf-8' }); res.end(data);//如果文件存在,就把文件读取的内容返回给客户机的浏览器 } }) })
相关文章推荐
- nodejs + express + ejs + mongodb本地环境安装及搭建
- Node.js搭建本地web服务(转)
- 手机端web研发(即在手机上用浏览器进行访问的研发),研发环境搭建,涉及的几个技术,node.js,npm,ionic,vscode
- node.js自学笔记(8)-搭建调试环境
- 建立一个node.js服务器(使用express搭建第一个Web环境)
- 【node.js】使用node.js搭建一个本地web服务器
- Node.js搭建本地Web服务器(一)
- node.js搭建一个自己的本地web服务器
- 建立node.js服务器(使用express搭建Web环境)
- 基于Node.js搭建集成自动化测试环境的基本步骤
- Ubuntu, Mac 下 Web 开发环境搭建:node.js, golang 与 revel 配置安装
- Vue.js之环境搭建:nodejs+npm+webpack
- Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及
- windows8.1下的Node.js实战之web项目搭建(1)
- 从零开始用node.js搭建web聊天室
- Node.js的简易服务器环境的搭建
- Node.JS进行简单新技术分析及环境搭建
- centos 7.0 搭建node.js环境
- node.js环境搭建超详细图文教程
- (NodeJS学习文章收集三) node.js基于express框架搭建一个简单的注册登录Web功能