原先做前端开发时都是用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. Kafka的可靠性问题

    a. Producer到broker 把request.required.acks设为1,丢会重发,丢的概率很小 b. Broker b.1 对于broker,落盘的数据,除非磁盘坏了,不会丢的 b. ...

  2. Linq 中的Select事例

    ---恢复内容开始--- 1.对查询结果进行转换. string[] names={"ADE","Jerry","Steves"}; var ...

  3. https配置

    总结了一下: 所谓用HTTPS的时候 app 前端要配置SSL 证书的意思就是:相当于服务器端与app 前端, 一个拿公钥,一个拿私钥.简单得说就是客户端发送请求的时候,用配置好的SSL证书里的加密方 ...

  4. 使用 VB.NET 开发多线程

    摘要:.NET 框架提供了新的类,可以方便地创建多线程应用程序.本文介绍如何使用 Visual Basic® .NET 的多线程编程技术来开发效率更高.响应速度更快的应用程序. 目录 简介 多线程处理 ...

  5. Lazy evaluation

    是一段源码,关于Lazy evaluation的,看了很久才懂,记录一下 一,lazy方法返回的比较复杂,一层一层将其剥开. wraps(func)跳转到curry(update_wrapper, f ...

  6. linux 下访问mysql

    1:先进到root:/# /usr/local/mysql/bin/2:root:/# mysql -u root -p     Enter password:

  7. IBM developerWorks 的Ajax系列教程

    掌握 Ajax,第 1 部分: Ajax 入门简介 http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html?csrf-799150205 ...

  8. GitBook整理

    GitBook整理 ECMAScript 6 -- 中文文档 Apache 2.2 --中文官方文档 Redux --React配套架构 英文 express --Node.js 服务端框架 Hexo ...

  9. Oracle 导出HTML

    http://www.linuxidc.com/Linux/2010-10/29133.htm Oracle 执行计划: http://czmmiao.iteye.com/blog/1471756 h ...

  10. mysql DBI 事务控制

    事务: 事务是任何健壮数据库系统的基本组成,它们 防止错误和数据库腐败通过确保有关数据的改变是原子发生的(不可分割的,要么所有要么什么都不做) 这个章节应用于数据库支持事务和 AutoCommit 是 ...