用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学习笔记之Connect中间件应用实例
Jan 27 NodeJs
Windows系统中安装nodejs图文教程
Feb 28 NodeJs
Nodejs中的this详解
Mar 26 NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 NodeJs
nodejs前端自动化构建环境的搭建
Jul 26 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
nodejs实现OAuth2.0授权服务认证
Dec 27 NodeJs
详解nodejs通过响应回写的方式渲染页面资源
Apr 07 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
nodejs使用async模块同步执行的方法
Mar 02 NodeJs
nodejs实现用户登录路由功能
May 22 NodeJs
Nodejs 数组的队列以及forEach的应用详解
Feb 25 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
javascript时间函数基础介绍
2013/03/28 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
python抓取网页内容示例分享
2014/02/24 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python利用opencv保存、播放视频
2020/11/02 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
副总经理工作职责
2013/11/28 职场文书
签约仪式主持词
2014/03/19 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
学习心理学的体会
2014/11/07 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
论文评审意见
2015/06/05 职场文书
公司保洁员管理制度
2015/08/04 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
vue3获取当前路由地址
2022/02/18 Vue.js