用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中SSL服务的性能
Jul 15 NodeJs
nodejs URL模块操作URL相关方法介绍
Mar 03 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
详解nodeJS之二进制buffer对象
Jun 03 NodeJs
ajax +NodeJS 实现图片上传实例
Jun 06 NodeJs
Express+Nodejs 下的登录拦截实现代码
Jul 01 NodeJs
nodeJs爬虫的技术点总结
May 13 NodeJs
详解NodeJS Https HSM双向认证实现
Mar 12 NodeJs
NodeJs实现简易WEB上传下载服务器
Aug 10 NodeJs
Nodejs + Websocket 指定发送及群聊的实现
Jan 09 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获取服务器信息的实现代码
2013/02/04 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
深入理解Python中的*重复运算符
2017/10/28 Python
pandas 选择某几列的方法
2018/07/03 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
采购助理岗位职责
2014/02/16 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
详解Python牛顿插值法
2021/05/11 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
MySQL优化及索引解析
2022/03/17 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电