用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下用submit提交表单提示cannot post错误的解决方法
Nov 21 NodeJs
NodeJS配置HTTPS服务实例分享
Feb 19 NodeJs
NodeJs下的测试框架Mocha的简单介绍
Feb 22 NodeJs
NodeJS学习笔记之Module的简介
Mar 24 NodeJs
Ajax异步文件上传与NodeJS express服务端处理
Apr 01 NodeJs
nodejs入门教程一:概念与用法简介
Apr 24 NodeJs
nodejs制作爬虫实现批量下载图片
May 19 NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 NodeJs
Nodejs 和 Electron ubuntu下快速安装过程
May 04 NodeJs
Mac下通过brew安装指定版本的nodejs教程
May 17 NodeJs
NodeJs项目中关闭ESLint的方法
Aug 09 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
解析URI与URL之间的区别与联系
2013/11/22 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python实现经典排序算法的示例代码
2021/02/07 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
酒店led欢迎词
2014/01/09 职场文书
淘宝好评语大全
2014/05/05 职场文书
经营理念口号
2014/06/21 职场文书
三八妇女节标语
2014/10/09 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
护士求职简历自我评价
2015/03/10 职场文书
教师节老师寄语
2015/05/28 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
MySQL数字类型自增的坑
2021/05/07 MySQL