用Nodejs搭建服务器访问html、css、JS等静态资源文件
为了测一个附近门店的功能，需要配置一下服务器进行测试。本来打算用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，替换后的地址就可以放在手机上显示了。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家!
相关文章
本文给大家分享的是如何在centos上快速搭建基于Node.js 构建的开源博客平台ghost的方法，非常的实用，有需要的小伙伴可以参考下2018-05-05
本文主要讲述了使用nodejs制作一个简单的文章发布系统，使用mongodb数据库，时间比较紧，功能做的也比较简单，仅仅是增删改查，外加附近上传，有相同需求的小伙伴可以参考下2014-11-11
Node.js 是一个用于服务器端编程的 JavaScript 平台,允许用户快速构建网络应用程序,通过在前端和后端都使用 JavaScript,开发可以更加一致并且可以在同一个系统中设计,在本指南中,我们将向您展示如何在 Ubuntu 14.04 服务器上开始使用 Node.js2024-09-09
使用 Node.js 和 npm 安装 Taro 等工具时,可能会遇到一些环境问题或配置错误,本文就来介绍一下Node版本切换不成功的问题解决,具有一定的参考价值,感兴趣的可以了解一下2024-12-12
本文主要介绍了node脚本实现自动化签到和抽奖功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
下面小编就为大家带来一篇nodejs读写json文件的简单方法(必看)。2017-03-03
本文主要介绍了原生node.js案例--前后台交互。本案例包含4部分：（1）HTML部分；（2）ajax部分；（3）JavaScript部分；（4）node服务器部分。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了Nodejs如何复制文件的过程，感兴趣的小伙伴们可以参考一下2016-03-03
今天小编就为大家分享一篇解决Mac下安装nmp的淘宝镜像失败问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-05-05
这篇文章主要给大家介绍了关于nvm使用use命令失效问题的解决方法,nvm是一个类似于版本管理工具的软件,它可以轻松地在同一台计算机上管理多个不同的node.js版本,需要的朋友可以参考下2023-07-07
最新评论