用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中的this详解
Mar 26 NodeJs
NodeJS实现客户端js加密
Jan 09 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
用Nodejs搭建服务器访问html、css、JS等静态资源文件
Apr 28 NodeJs
nodejs操作mysql实现增删改查的实例
May 28 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
Nodejs调用Dll模块的方法
Sep 17 NodeJs
NodeJS服务器实现gzip压缩的示例代码
Oct 12 NodeJs
nodejs中方法和模块用法示例
Dec 24 NodeJs
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
Feb 02 NodeJs
Nodejs 识别图片类型的方法
Aug 15 NodeJs
浅谈使用nodejs搭建web服务器的过程
Jul 20 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 编写的日历
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python中的字符串内部换行方法
2018/07/19 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python提取频域特征知识点浅析
2019/03/04 Python
详解Python:面向对象编程
2019/04/10 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python实现猜拳小游戏
2020/04/05 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
红色经典观后感
2015/06/18 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android