用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实现多人同时在线移动鼠标的小游戏分享
Dec 06 NodeJs
nodejs 中模拟实现 emmiter 自定义事件
Feb 22 NodeJs
详解nodejs中exports和module.exports的区别
Feb 17 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
NodeJs安装npm包一直失败的解决方法
Apr 28 NodeJs
nodejs制作爬虫实现批量下载图片
May 19 NodeJs
Nodejs中Express 常用中间件 body-parser 实现解析
May 22 NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 NodeJs
nodejs取得当前执行路径的方法
May 13 NodeJs
nodejs中方法和模块用法示例
Dec 24 NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 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
php 过滤危险html代码
2009/06/29 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python对数组进行反转的方法
2015/05/20 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python代码需要缩进吗
2020/07/01 Python
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
表彰大会策划方案
2014/05/13 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
目标责任书格式范文
2015/05/11 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书