原先做前端开发时都是用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等静态资源文件的更多相关文章

  1. springboot 项目中css js 等静态资源无法访问的问题

    目录 问题场景 问题分析 问题解决 问题场景 今天在开发一个springboot 项目的时候突然发现 css js 等静态资源竟然都报404找不到,折腾了好久终于把问题都解决了,决定写篇博客,纪录总结 ...

  2. 解决Tomcat无法加载css和js等静态资源文件

    解决思路有两个 一是,你使用了Apache服务器,html不交给Tomcat处理,所以你找不到Html等静态资源,所以你先停掉阿帕奇,然后只用Tomcat猫试试. 二是,像我一样,使用了Jetty开发 ...

  3. 防止SpringMVC拦截器拦截js等静态资源文件

    SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静 ...

  4. 在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案

    方案一.拦截器中增加针对静态资源不进行过滤(涉及spring-mvc.xml) <mvc:resources location="/" mapping="/**/* ...

  5. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  6. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  7. Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

    问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文 ...

  8. spring访问静态资源文件

    用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文 ...

  9. html 如何访问 jar 包里面的静态资源(js、css、字体等)

    前言:最近两天在尝试写一个工具 jar 包,里面包含后台处理的 java 代码,包含前端 html.js.css.字体文件等,过程中解决了访问 jar 包里的静态资源问题,所以记录下来. 附:自己的一 ...

随机推荐

  1. error: undefined reference to `XXX::XXX(type1, ypte2)

    moc_fortunethread.cpp:100: error: undefined reference to `FortuneThread::GetToParentThread(QString, ...

  2. c# 委托内部构造

    以下纯属个人简介,错误之处,请随意指出. 委托是指向方法的,而事件是委托的触发器,执行事件,就会遍历委托里的方法,并且执行. 委托内部构造第一块是方法指针(methodPtr),用于指向方法的内存地址 ...

  3. Blend制作TextButton和ImageButton

    最近看了几个高人做的软件界面(http://kaodigua.net/),羡慕嫉妒到不行,决定学习一下Blend的用法,马上觉得WPF开发的界面设计就应该放在Blend里面做.学习了两位大神的博客(h ...

  4. Mongodb常见错误

    1. log目录没有创建,而在logpath中有设定 2. SECONDARY默认不可以读取数据,需要db.getMongo().setSlaveOk(); 3. SECONDARY不可以写数据 4. ...

  5. linux 删除和安装java

    一.jdk1.4卸载 由于redhat Enterprise 5 中自带安装了jdk1.4的,所以在安装jdk1.6前我把jdk1.4的卸了,步骤如下:   1.打开终端输入#rpm -qa | gr ...

  6. 让Safari使用Chrome的代理

    Pac文件可以从switchSharp中导出 Configuring Safari manually Getting Started Guide | Cloud Web Protection Solu ...

  7. Delphi Jpg和Gif转Bmp

    begin     bmp:=TBitmap.Create;     jpeg:=TJPEGImage.Create;     jpeg.LoadFromFile(fname);     with b ...

  8. IRC配置for open source community

    IRC是开源社区进行交流使用的一个很重要的工具. 但是很多公司有限制,不让在办公电脑上, 安装IRC的客户端. ZNC + weechat 是一个可以替代的 选择. irccloude 也是一个可替代 ...

  9. ubuntu下perl SVG老是make失败

    解决方法是用libgd-svg-perl软件包代替.

  10. SPOJ 1435 - Vertex Cover(树形DP,树的最小点覆盖)

    算是个经典题目了,很模板的树形DP题目 做这个题的时候一开始就想到树形DP了,可是由于各种原因没写出来,代码太糟烂了,赛后还是改了好久才过的 dp(u,0)=sum(dp(v,1)): dp(u,1) ...