用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全栈框架StrongLoop推荐
Nov 09 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
Dec 18 NodeJs
Nodejs学习item【入门手上】
May 05 NodeJs
初探nodeJS
Jan 24 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
深入nodejs中流(stream)的理解
Mar 27 NodeJs
Nodejs进阶:express+session实现简易登录身份认证
Apr 24 NodeJs
nodejs前端自动化构建环境的搭建
Jul 26 NodeJs
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
Mar 02 NodeJs
nodejs中实现修改用户路由功能
May 24 NodeJs
详解利用nodejs对本地json文件进行增删改查
Sep 20 NodeJs
Nodejs实现WebSocket代码实例
May 19 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
js断点调试经验分享
2017/12/08 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Django实现文件上传下载
2019/10/06 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python删除某个目录文件夹的方法
2020/05/26 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
初级党校心得体会
2014/09/11 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014年节能工作总结
2014/12/18 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
全民创业工作总结
2015/08/13 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript