用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制作爬虫全过程(续)
Dec 22 NodeJs
nodejs事件的监听与触发的理解分析
Feb 12 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
Nodejs 获取时间加手机标识的32位标识实现代码
Mar 07 NodeJs
nodejs入门教程一:概念与用法简介
Apr 24 NodeJs
Nodejs使用Mongodb存储与提供后端CRD服务详解
Sep 04 NodeJs
使用koa-log4管理nodeJs日志笔记的使用方法
Nov 30 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
Dec 12 NodeJs
nodejs dgram模块广播+组播的实现示例
Nov 04 NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 NodeJs
NodeJS配置CORS实现过程详解
Dec 02 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
WordPress自定义时间显示格式
2015/03/27 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python os模块介绍
2014/11/30 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python3 操作符重载方法示例
2017/11/23 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python上下文管理器全实例详解
2019/11/12 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
神路信息Java面试题目
2013/03/31 面试题
争先创优公开承诺书
2014/08/30 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js