NodeJS + express访问html、css、JS等静态资源文件
原先做前端开发时都是用XAMPP或LAMP，把HTML、CSS、JS等前端资源放到htdocs下，测试自己的前端代码，但有些不方便的地方是，在调用Ajax请求后无法模拟请求返回的数据，最近学了点NodeJS，就用NodeJs来做Web服务器。因为最终与后台交互的是用Java作开发语言的，所以就不用jade、ejs等模板了，只是单纯地作为一个静态服务器以及模拟处理Ajax数据请求
1. 初始化项目
1.1. 环境搭建
先安装NodeJs、npm(自带)，国外的镜像资源访问慢的话，可以考虑使用taobao的资源，用npm安装nrm来管理registry的路径,比较常用的是taobao，也可以用cnpm或者其他的
1.2. npm初始化项目
npm初始化项目
npm init
初始化时可以对package.json进行配置，全部默认即可，若有兴趣可看下express的package.json，一般情况下标准的配置项，express的package.json中都有体现
1.3. 安装express
express的安装很简单，使用以下命令安装
npm i express --save
2. 编写app.js
app.js代码如下：
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.listen(8080, () => {
console.log(`App listening at port 8080`)
})
其中最主要的部分是app.use(express.static(path.join(__dirname, 'public')))，该行代码是在express添加中间件，设置静态资源路径为public，所有的HTML、CSS、JS等文件都放在public下即可，后续代码迁移直接将public下的代码copy到Java Web的webRoot中就行
3. 添加测试页面##
在public中添加测试页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web管理平台</title>
</head>
<body>
<h1>Web管理平台</h1>
</body>
</html>
4. 启动APP应用
添加完后，启动APP应用
node app.js
控制台输出App listening at port 8080,说明NodeJs的Web应用已经跑起来了
在浏览器中输入127.0.0.1:8080，页面展示如下：
NodeJS + express访问html、css、JS等静态资源文件的更多相关文章
- springboot 项目中css js 等静态资源无法访问的问题
目录 问题场景 问题分析 问题解决 问题场景 今天在开发一个springboot 项目的时候突然发现 css js 等静态资源竟然都报404找不到,折腾了好久终于把问题都解决了,决定写篇博客,纪录总结 ...
- 解决Tomcat无法加载css和js等静态资源文件
解决思路有两个 一是,你使用了Apache服务器,html不交给Tomcat处理,所以你找不到Html等静态资源,所以你先停掉阿帕奇,然后只用Tomcat猫试试. 二是,像我一样,使用了Jetty开发 ...
- 防止SpringMVC拦截器拦截js等静态资源文件
SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静 ...
- 在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案
方案一.拦截器中增加针对静态资源不进行过滤(涉及spring-mvc.xml) <mvc:resources location="/" mapping="/**/* ...
- Spring MVC程序中得到静态资源文件css,js,图片
转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题
问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文 ...
- spring访问静态资源文件
用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文 ...
- html 如何访问 jar 包里面的静态资源（js、css、字体等）
前言:最近两天在尝试写一个工具 jar 包,里面包含后台处理的 java 代码,包含前端 html.js.css.字体文件等,过程中解决了访问 jar 包里的静态资源问题,所以记录下来. 附:自己的一 ...
随机推荐
- WPF做的迁移文件小工具
客户这边需要往服务器上传PDF文件.然后PDF文件很多,需要挑出来的PDF文件也不少.因此做了个小工具. 功能很简单,选定源文件夹,选定记录着要提取的文件的excel 文件.OK ,界面如下. XAM ...
- 向PHP语言进发
在做了几个月的.NET技术之后,我决定转去做PHP开发!人家都说,一言通,多言通!努力吧!
- 字符串聚合技术（String Aggregation Techniques）
from: http://www.oracle-base.com/articles/misc/string-aggregation-techniques.php String Aggregation ...
- linux通过文件查找依赖关系
通过文件查找安装包安装缺少libstdc++6这个文件在ls /usr/lib/libstd*下有两个文件/usr/lib/libstdc++.so.6 /usr/lib/libstdc++.so.6 ...
- 【转】commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar实现文件上传
总共:一个upload.jsp,一个FileUploadServlet.java,两个文件:ImagesUploaded,ImagesUploadTemp, 一个web.xml,两个架包:common ...
- dot.js教程文档api
dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...
- html中的圆角边框
border-radius:20px; radius:以某某为半径画圆. 如何制作一个圆形: div{height:150px;//像素的一半,再加上边框的像素 width:150px; border ...
- 客户端持久化解决方案: Web SQL
客户端持久化解决方案: Web SQL Web SQL 提供了一组使用 SQL 操作客户端数据库的 APIs, 不是 HTML5 规范的一部分,是一个独立的规范. 核心方法 openDatabase: ...
- 论山寨手机与Android 【12】3G时代SmartPhone BP部分
最成熟的3G网络系统,是3GPP项目组制订的WCDMA.WCDMA的网络结构,可参考Figure 12.1,其中有几个特点. 1. 反向兼容GSM/GRPS网络. 原有GSM网络的基站子系统(BSS) ...
- 重启VirtualBox里面的系统提示VT-x features locked or unavailable in MSR错误
有次不小心设置了一下virtualbox里面的一些配置,然后启动系统时出现了如下提示 在网上找了一些资料尝试了一些方法偶然有一次成功 原来是自己把那个cpu个数设置成了2,改成1就好了,不知道为什么做 ...