用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教程 安装express及配置app.js文件的详细步骤
May 11 NodeJs
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
基于nodejs+express(4.x+)实现文件上传功能
Nov 23 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
nodejs中模块定义实例详解
Mar 18 NodeJs
docker中编译nodejs并使用nginx启动
Jun 23 NodeJs
nodejs判断文件、文件夹是否存在及删除的方法
Nov 10 NodeJs
nodejs async异步常用函数总结(推荐)
Nov 17 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
nodejs 生成和导出 word的实例代码
Jul 31 NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
May 30 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
js切换光标示例代码
2013/10/10 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
分析python请求数据
2018/08/19 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
安全生产检查通报
2014/01/29 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
健康证明
2015/06/19 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis