原先做前端开发时都是用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. SQL中数据类型转换

    CAST 和 CONVERT 将某种数据类型的表达式显式转换为另一种数据类型.CAST 和 CONVERT 提供相似的功能. 语法 使用 CAST: CAST ( expression AS data ...

  2. 【Tomcat】项目自动部署的链接重置错误

    在服务器中装好的tomcat7 ,(服务器是的window server 2008) 在tomcat bin目录运行的 service.bat install 安装服务.然后,设置服务项(服务项名称: ...

  3. NSURLSessionDownloadTask 下载文件

    -(void)RequestdataUI:(NSString*)ImageURL imageName:(NSString*)imageName{ NSURL *url = [NSURL URLWith ...

  4. C# for循环 迭代法 穷举法应用

    迭代 //兔子生兔子 class Class5    { static void Main(string[] args) { int tu1 = 1, tu2 = 1; //tu1是倒数第一个月的兔子 ...

  5. SQL Server 2005为数据库设置用户名和密码的方法

    1.打开SQL Server Manager管理器,在左面找到 ‘安全性’ 单击右键 选择‘新建”->“登录”, 如下图 2.弹出对话框,在登录名中输入你的登录号,选择'SQLSERVER身份验 ...

  6. DOS下导入dmp文件到Oracle数据库

    imp usename/password@SID full=y  file= d:\data\xxxx.dmp ignore=y imp system/manager file=bible_db lo ...

  7. AfxSocketInit()

    作用:初始化Windows套接字 原型:BOOL AfxSocketInit(WSADATA* lpwsaData = NULL ); 参数:lpwsaData 指向WSADATA结构的指针.    ...

  8. Linux系统学习笔记：文件I/O

    Linux支持C语言中的标准I/O函数,同时它还提供了一套SUS标准的I/O库函数.和标准I/O不同,UNIX的I/O函数是不带缓冲的,即每个读写都调用内核中的一个系统调用.本篇总结UNIX的I/O并 ...

  9. 嵌入式程序员应知道的0x10个基本问题

     来源:网络 嵌入式程序员应知道的0x10个基本问题 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)#define SECONDS_PER_YEAR (60 ...

  10. WdatePicker日历控件使用方法

    1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...