用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中简单实现Javascript Promise机制的实例
Dec 06 NodeJs
轻松创建nodejs服务器(9):实现非阻塞操作
Dec 18 NodeJs
nodejs初步体验篇
Nov 23 NodeJs
浅析Nodejs npm常用命令
Jun 14 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
详解nodejs 文本操作模块-fs模块(二)
Dec 22 NodeJs
nodeJS删除文件方法示例
Dec 25 NodeJs
详解NodeJS框架express的路径映射(路由)功能及控制
Mar 24 NodeJs
NodeJs项目中关闭ESLint的方法
Aug 09 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
Nodejs把接收图片base64格式保存为文件存储到服务器上
Sep 26 NodeJs
nodejs脚本centos开机启动实操方法
Mar 04 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数据转成MYSQL数据
2006/10/09 PHP
PHP mkdir()定义和用法
2009/01/14 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Python的argparse库使用详解
2018/10/09 Python
学生信息管理系统python版
2018/10/17 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
python读文件的步骤
2019/10/08 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Python是什么 Python的用处
2020/05/26 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
初中生物教学反思
2014/01/10 职场文书
网页美工求职信范文
2014/04/17 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
2014年店长工作总结
2014/11/17 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
行政二审代理词
2015/05/25 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers