用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017-04-28 10:34
766 查看
为了测一个附近门店的功能,需要配置一下服务器进行测试。本来打算用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搭建服务器访问html、css、js等外部链接
- NodeJS express访问html,css,JS等静态资源文件
- web.xml中配置访问资源URL<url-pattern>/</url-pattern>时无法访问.html、.jsp、.js、.css等静态资源时的解决方案
- IOS开发(7)WKWebView加载本地HTML、CSS、JS文件JS(解决html内访问其他资源路径问题)
- WEB项目部署到Linux下无法访问html、css、js等静态文件的解决
- 【node.js】搭建可访问静态文件的服务器②
- web.xml中配置访问资源URL<url-pattern>/</url-pattern>时无法访问.html、.jsp、.js、.css等静态资源时的解决方案
- WEB项目部署到Linux下无法访问html、css、js等静态文件的解决
- 定义不被SpringMVC拦截的静态资源(html, js, css等文件)通用方法
- Spring MVC中访问静态资源(如html, js, css等)
- Nginx服务器静态资源无法访问,例css,js
- 定义不被SpringMVC拦截的静态资源(html, js, css等文件),通用方法,不需要每个目录都设置
- 菜鸟小白使用node.js搭建简单服务器(可请求图片,html,js,css,json等文件)
- SpringMVC项目中静态资源js,css文件访问不到404
- HTML页面后台取静态资源(CSS,JS文件)的路劲问题!
- web.xml中配置访问资源URL<url-pattern>/</url-pattern>时无法访问.html、.jsp、.js、.css等静态资源时的解决方案
- 【node.js】搭建可访问静态文件的服务器①
- springMVC访问静态资源:为什么图片/js/css等文件写在jsp中是404不能获取
- SPRING-MVC访问静态文件,如jpg,js,css
- Spring mvc 项目中页面访问不到静态文件,如img , js , css 等