用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访问ActiveX对象,以操作Access数据库为例。
Dec 15 NodeJs
nodejs中使用monk访问mongodb
Jul 06 NodeJs
使用Nodejs开发微信公众号后台服务实例
Sep 03 NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 NodeJs
详解nodejs中exports和module.exports的区别
Feb 17 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
Nodejs 和Session 原理及实战技巧小结
Aug 25 NodeJs
windows系统下更新nodejs版本的方案
Nov 24 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
详解NodeJs开发微信公众号
May 25 NodeJs
nodejs中实现用户注册路由功能
May 20 NodeJs
详解NodeJs项目 CentOs linux服务器线上部署
Sep 16 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
orm获取关联表里的属性值
2016/04/17 PHP
javascript globalStorage类代码
2009/06/04 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
幼儿园师德演讲稿
2014/05/06 职场文书
倡议书格式
2014/08/30 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
vue 自定义组件添加原生事件
2022/04/21 Vue.js