zoukankan      html  css  js  c++  java
  • NodeJS + express访问html、css、JS等静态资源文件

    原先做前端开发时都是用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,页面展示如下:

  • 相关阅读:
    Problem C: 时间类的常量
    Problem B: 时间类的错误数据处理
    Problem A: 时间类的拷贝和整体读写
    Problem B: 平面上的点——Point类 (IV)
    Problem C: 平面上的点——Point类 (V)
    Problem A: 平面上的点——Point类 (III)
    中间的数(若已经排好序)
    软件工程概论团队结组
    软件工程个人作业04 子数组循环数组
    软件工程个人作业03
  • 原文地址:https://www.cnblogs.com/qingbin-bai/p/6271388.html
Copyright © 2011-2022 走看看