用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的10个性能优化技巧
Jul 15 NodeJs
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
Sep 26 NodeJs
ubuntu下安装nodejs以及升级的办法
May 08 NodeJs
NodeJs的优势和适合开发的程序
Aug 14 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
nodejs实现超简单生成二维码的方法
Mar 17 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
NodeJS读取分析Nginx错误日志的方法
May 14 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 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
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
JavaScript实现区块链
2018/03/14 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
angularjs请求数据的方法示例
2019/08/06 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
python3实现随机数
2018/06/25 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
简单的Python调度器Schedule详解
2019/08/30 Python
使用Pycharm分段执行代码
2020/04/15 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
python如何进入交互模式
2020/07/06 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
《跨越百年的美丽》教学反思
2014/02/11 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
学校消防安全责任书
2014/07/23 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
停电放假通知
2015/04/14 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫