原先做前端开发时都是用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. Ugly Number,Ugly Number II,Super Ugly Number

    一.Ugly Number Write a program to check whether a given number is an ugly number. Ugly numbers are po ...

  2. Android_使用getIdentifier()获取资源Id

    Android 获取资源ID的另外一种方法,常规获取ID是在特定的文件夹下面的资源,如果在比较特殊的文件夹下面,就需要其他方法获取ID 了: 使用getIdentifier()方法可以方便的获各应用包 ...

  3. Android _优雅实现元素间的分割线 （支持3.0以下）

    转:http://blog.csdn.net/lmj623565791/article/details/42407923 1.概述 话说,随着Android SDK版本的升级,很多控件增加了新的属性方 ...

  4. HTML 语义化

    语义化,让你的网页更好的被搜索引擎理解 要记住学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化.那么什么 ...

  5. skynet newservice API参考

    local skynet = require("skynet") skynet.start(start_func) c服务snlua启动后执行的第一个lua文件里面的主逻辑必定是s ...

  6. mac下配置java环境

    1.tomcat配置 http://www.cnblogs.com/freeyiyi1993/p/3436368.html 2.下载eclipse和jdk安装  jdk去oracle网站下载

  7. Android混淆、反编译以及反破解的简单回顾

    =========================================================================虽然反编译很简单,也没下面说的那么复杂,不过还是转了过 ...

  8. Java调用.dll文件

    因为项目的需求,要在JAVA项目中调用Windows的Dll(动态链接库)文件,之前用Jni调用过C写的Dll文件,比较麻烦,这里不多说,网上也有很多这方面的文档.在网上找到一个开源的组件JNativ ...

  9. 普里姆(Prim)算法

    /* 普里姆算法的主要思想: 利用二维数组把权值放入,然后找在当前顶点的最小权值,然后走过的路用一个数组来记录 */ # include <stdio.h> typedef char Ve ...

  10. Weinre - 远程调试工具

              Weinre  代表Web Inspector Remote,是一种远程调试工具.借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Wei ...