用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 npm包管理的配置方法及常用命令介绍
Jun 05 NodeJs
Nodejs sublime text 3安装与配置
Jun 19 NodeJs
Nodejs+express+html5 实现拖拽上传
Aug 08 NodeJs
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
Sep 26 NodeJs
nodejs中操作mysql数据库示例
Dec 20 NodeJs
nodejs爬虫抓取数据乱码问题总结
Jul 03 NodeJs
解析NodeJs的调试方法
Dec 11 NodeJs
nodejs基础应用
Feb 03 NodeJs
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
Sep 06 NodeJs
Nodejs调用Dll模块的方法
Sep 17 NodeJs
nodejs实现用户登录路由功能
May 22 NodeJs
nodejs+koa2 实现模仿springMVC框架
Oct 21 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP实现图片简单上传
2006/10/09 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
高中体育教学反思
2014/01/29 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL