用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中简单实现Javascript Promise机制的实例
Dec 06 NodeJs
Nodejs爬虫进阶教程之异步并发控制
Feb 15 NodeJs
Windows 系统下设置Nodejs NPM全局路径
Apr 26 NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
NodeJs下的测试框架Mocha的简单介绍
Feb 22 NodeJs
详解NodeJS框架express的路径映射(路由)功能及控制
Mar 24 NodeJs
nodejs开发——express路由与中间件
Mar 24 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
Jan 12 NodeJs
nodejs acl的用户权限管理详解
Mar 14 NodeJs
基于nodejs的雪碧图制作工具的示例代码
Nov 05 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递归遍历删除文件的方法
2015/04/17 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
应用数学自荐书范文
2013/11/24 职场文书
单位未婚证明范本
2014/01/18 职场文书
期末学生评语大全
2014/04/24 职场文书
门市房租房协议书
2014/12/04 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
消防验收申请报告
2015/05/15 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python