用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中SSL服务的性能
Jul 15 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
Dec 18 NodeJs
nodejs实现bigpipe异步加载页面方案
Jan 26 NodeJs
使用nodejs中httpProxy代理时候出现404异常的解决方法
Aug 15 NodeJs
用nodejs搭建websocket服务器
Jan 23 NodeJs
深入浅析Nodejs的Http模块
Jun 20 NodeJs
nodejs判断文件、文件夹是否存在及删除的方法
Nov 10 NodeJs
nodejs实现OAuth2.0授权服务认证
Dec 27 NodeJs
nodejs使用http模块发送get与post请求的方法示例
Jan 08 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
Oct 10 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 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注入点构造代码
2008/06/14 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
分享3个php获取日历的函数
2015/09/25 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python连接数据库的方法
2017/10/19 Python
python实现单向链表详解
2018/02/08 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
css3学习心得分享
2013/08/19 HTML / CSS
暑假家长评语大全
2014/04/17 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js