NodeJS + express访问html、css、JS等静态资源文件

最新推荐文章于 2024-05-27 15:28:41 发布

zyx_

最新推荐文章于 2024-05-27 15:28:41 发布

阅读量2.7k

点赞数

分类专栏： node 文章标签： node 放置静态资源

node 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原先做前端开发时都是用tomcat，测试自己的前端代码，

用NodeJS做Web服务器。因为最终与后台交互的是用Java作开发语言的，作为一个静态服务器以及模拟处理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，页面展示如下：

zyx_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
NodeJS + express访问html、css、JS等静态资源文件

原先做前端开发时都是用tomcat，测试自己的前端代码，用NodeJS做Web服务器。因为最终与后台交互的是用Java作开发语言的，作为一个静态服务器以及模拟处理Ajax数据请求1. 初始化项目1.1. 环境搭建先安装NodeJs、npm(自带)，国外的镜像资源访问慢的话，可以考虑使用taobao的资源，用npm安装nrm来管理registry的路径,比较常用的是taobao，也可...
复制链接

扫一扫