nodejs运行前端项目
有时候我们会创建一些小项目,只有几个简单html,没有引入一些前端框架,也没有使用webpack,那我们要如何让代码在我们本地跑起来呢?
当然是有很多种方法,IIS、wampserver等等好多都可以用,这里只是说道纯粹用node就把项目跑起来,配置简单。
前提是你要安装好了nodejs,安装方法,去百度一下大把。
现在假设你的文件目录如下
- index
- templates
- index.html
- static
- js
- index.js
- css
- index.css
- js
- templates
现在需要在index同级目录新建两个文件server.js:
var PORT = 8089;//监听的端口 var http = require('http');
var url=require('url');
var fs=require('fs');
var help=require('./help').types;//
var path=require('path'); var server = http.createServer(function (request, response) {
var pathname = url.parse(request.url).pathname;
var realPath = path.join("index", pathname); //这里设置自己的文件名称;
var ext = path.extname(realPath);
ext = ext ? ext.slice(1) : 'unknown';
fs.exists(realPath, function (exists) {
if (!exists) {
response.writeHead(404, {
'Content-Type': 'text/plain'
}); response.write("This request URL " + pathname + " was not found on this server.");
response.end();
} else {
fs.readFile(realPath, "binary", function (err, file) {
if (err) {
response.writeHead(500, {
'Content-Type': 'text/plain'
});
response.end(err);
} else {
var contentType = help[ext] || "text/plain";
response.writeHead(200, {
'Content-Type': contentType
});
response.write(file, "binary");
response.end();
}
});
}
});
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");
help.js
exports.types = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml"
};
然后再index文件夹的同级目录下运行:
node http.js
浏览器中输入:
http://localhost:8089/templates/index.html
就可以打开你的项目了,只是没有热更新,要手动刷新,但起码跑起来了
nodejs运行前端项目的更多相关文章
- 使用nodeJS实现前端项目自动化之项目构建和文件合并
前面的话 一般地,我们使用构建工具来完成项目的自动化操作.本文主要介绍如何使用nodeJS来实现简单的项目结构构建和文件合并 项目构建 假设,最终实现的项目名称为'test',结构如下图所示 那么,首 ...
- nodejs启动前端项目步骤
在.nuxt目录下打开命令行: 一:npm rm node-sass 二:npm install node-sass 三:npm install 四:npm run dev
- 【Problem】前端项目运行:Module build failed:Error Node Sass does not yet support my current environmen
我在运行renren-fast-vue前端项目时,安装完依赖cnpm install 启动服务npm run dev 出现问题. Module build failed: Error: Node Sa ...
- Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...
- 运行VUE的前端项目
前提条件:已经安装nodejs和cnpm ,参考前一篇文章 1.在前端项目所在的目录下执行cnpm install 下载该项目需要的包,这些包和全局配置下的包可能不同的版本cnpm会根据package ...
- centos7.4系统部署nodejs前端项目
1.安装nodejs运行环境 wget命令下载Node.js安装包,该安装包是编译好的文件,解压之后,在bin文件夹中就已存在node和npm,无需重复编译 wget https://nodejs.o ...
- Win环境下安装vue及运行vue开发的前端项目
vue安装及配置 首先下载node.js要求版本在8.9以上 官网:https://nodejs.org/zh-cn/ 下载完可检查在windows任务命令行里输入node -v 使用淘 ...
- nodejs解压版安装和配置(带有搭建前端项目脚手架)
nodejs 安装 我先前用了nvm,觉得nvm挺厉害可以随时更换nodejs版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的 ...
- nodejs 前端项目编译时内存溢出问题的原因及解决方案
现象描述 昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Alloca ...
随机推荐
- ”TCP连接“究竟是什么意思?
我们经常听到"建立TCP连接","服务器的连接数量有限"等,但仔细一想,连接究竟是个什么东西,是和电话一样两端连起一根线?似乎有点抽象不是么? 1. 久违的分组 ...
- C的函数指针与指针函数
1.函数指针 指向函数的指针.本质是一个指针. 指针变量可以指向变量的地址.数组.字符串.动态分配地址,同时也可指向一个函数,每个函数在编译的时候,系统会分配给该函数一个入口地址,函数名表示这个入口地 ...
- C++中const用于函数重载
C++中const用于函数重载 常成员函数和非常成员函数之间的重载 首先先回忆一下常成员函数 声明:<类型标志符>函数名(参数表)const: 说明: (1)const是函数类型的一部分, ...
- 洗礼灵魂,修炼python(6)--活起来的代码+列表
活起来的用法: 使用input内置函数 注意python2中和python3中,input函数是不太一样的,python2中,input用户传入什么类型就是什么类型而python3中,不管传入什么类型 ...
- css3动画:弹出式菜单
css3动画:弹出式菜单 今天主要来讲讲transition和transform结合做的动画,会举一些现在(2017年)常见的动画例子. 注:本人也接触css3不久,如果写的有纰漏请指出,不喜勿喷. ...
- Longge's problem poj2480 欧拉函数,gcd
Longge's problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6918 Accepted: 2234 ...
- mui框架移动开发初体验
前 言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...
- 21.Linux-写USB键盘驱动(详解)
本节目的: 根据上节写的USB鼠标驱动,来依葫芦画瓢写出键盘驱动 1.首先我们通过上节的代码中修改,来打印下键盘驱动的数据到底是怎样的 先来回忆下,我们之前写的鼠标驱动的id_table是这样: 所以 ...
- Vue使用总结
好久没更新博客,确实是自己已经懒癌晚期,最近毕业刚工作3个月,公司开发一直在用Vue,自己个人也比较喜欢这个框架,今天就对自己学习到和用到的知识点作一些总结,希望能帮到大家. Vue 知道Vue也一定 ...
- Python实战之字符串的详细简单练习
['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__' ...