用Nodejs搭建服务器访问html、css、JS等静态资源文件


Posted in NodeJs onApril 28, 2017

为了测一个附近门店的功能,需要配置一下服务器进行测试。本来打算用apache的,后来想自己是做前端的,好久没有用过Nodejs了何不用所学的知识自己配一下呢,说动手就手。

第一步,俗话说的好,工欲善其事,必先利其器。既然要用node+express配置服务器,如果电脑上没有的话自然要先安装这两个大宝贝啦。

1.安装node。到Node官网下载安装即可,直接下一步下一步就完成了。

2.npm初始化项目。打开终端,输入npm init -y即可。注意:如果不输入-y要自己写一些配置,写了-y会默认直接生成一个package.json文件。

3.安装Express。在终端输入 npm i S express回车即可

第二步,编写Express配置文件。新建一个app.js文件(文件名可随意,但不要使用关键字)

var express = require('express');
var path = require('path');
var app = express();

[color=#ff0000]app.use(express.static(path.join(__dirname, 'public')));[/color]

app.listen(4444, function() {
 console.log('App listening at port 8080;');
});

其中最主要的部分是app.use(express.static(path.join(__dirname, 'public')))  ,该行代码是在express添加中间件,设置静态资源路径为public,所有的HTML、CSS、JS等文件都放在public下即可

第三步,在public文件夹中添加测试页面。我这里写的是一个命名为changeColor.html的页面。当它显示在手机上时,手机横、竖屏变化,body显示不同的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>testExpress</title>
 <style type="text/css">
 body{background-color: yellow;}
 @media screen and (orientation:landscape){
  body{background-color: orange;}
 }
 </style>
</head>
<body>
</body>
</html>

第四步,添加完后,启动服务。

我这里用的是sublime,按两个ctrl+r,如果控制台输出App listening at port 4444;表示启动服务成功。打开浏览器,在地址栏输入:http://localhost/4444/changeColor.html

就可以查看测试网页了。如果把localhost换成本机的IP,替换后的地址就可以放在手机上显示了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

NodeJs 相关文章推荐
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
nodeJs爬虫获取数据简单实现代码
Mar 29 NodeJs
解析NodeJs的调试方法
Dec 11 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
nodejs基础应用
Feb 03 NodeJs
深入理解nodejs中Express的中间件
May 19 NodeJs
nodejs集成sqlite使用示例
Jun 05 NodeJs
nodejs 图解express+supervisor+ejs的用法(推荐)
Sep 08 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
nodejs搭建本地服务器并访问文件操作示例
May 11 NodeJs
nodejs脚本centos开机启动实操方法
Mar 04 NodeJs
NodeJS和浏览器中this关键字的不同之处
Mar 03 NodeJs
Nodejs读取文件时相对路径的正确写法(使用fs模块)
Apr 27 #NodeJs
详解nodejs express下使用redis管理session
Apr 24 #NodeJs
nodejs入门教程六:express模块用法示例
Apr 24 #NodeJs
Nodejs进阶:express+session实现简易登录身份认证
Apr 24 #NodeJs
nodejs入门教程五:连接数据库的方法分析
Apr 24 #NodeJs
nodejs入门教程四:URL相关模块用法分析
Apr 24 #NodeJs
nodejs入门教程三:调用内部和外部方法示例
Apr 24 #NodeJs
You might like
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue实现通讯录功能
2018/07/14 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python flask 多对多表查询功能
2017/06/25 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
保险公司晨会主持词
2014/03/22 职场文书
敬老院标语
2014/06/27 职场文书
经典演讲稿开场白
2014/08/25 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书