关于访问node express中的static静态文件方法

目录
  • 访问node express中的static静态文件
    • 应用场合
    • 解决方法
    • 示例
  • Express访问静态资源(express.static)
    • 前端调用静态资源
    • Express访问静态资源

访问node express中的static静态文件

应用场合

  • 在项目中需要使用到node express框架进行中间件开发、
  • 使用express托管静态文件或开放其它静态文件

解决方法

通过express内置的express.static方法可以方便地托管静态文件，例如图片、CSS、JavaScript文件等

将静态资源文件所在目录作为参数传递给express.static中间件就可以提供静态资源文件的访问

示例

1. express框架下运行以下代码

#注意格式
app.use('/public',express.static('public'));//将文件设置成静态
#若需要开发其它静态文件，则不需要'/public'路径
app.use(express.static('Simulation_Result'))

2. 在项目中访问静态文件地址即可

     let _PicUrl = [
        "http://127.0.0.1:5678/S-1.png",
        "http://127.0.0.1:5678/S-2.png"
     ]

注意：静态文件的路径为express中间件设置，端口号必须为后端端口号。若访问了错误的路径或者端口号，则页面为空白

Express访问静态资源(express.static)

在开发全栈的时候，html页面需要显示一些图片，视频之类的资源。这些资源被称为“静态资源”，即对每一个用户来讲都是相同的资源。写这篇博文通过对比前后端调用静态资源的方式来记录express框架下静态资源的访问方法。

前端调用静态资源

初入前端的同志应该知道，前端里调用静态资源只是用来测试程序的“缓兵之计”，因为网页的资源一定是来自后端服务器的。在还没有对接服务器的情况下，以播放视频为例，前端是如何实现的呢。

既然只有前端那视频只能是在本地的资源。视频和html文件应在同一目录中：

在video,html文件中输入以下代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
	<p>video:</p>
	<video id="video1" controls width="300px" autoplay>
		<source src="1.mp4" type="video/mp4">
	</video>
</body>
</html>

由html代码可知，视频的路径是由video标签内部的src="1.mp4"决定的，因为html文件和视频文件在同一目录下，因此地址直接写文件名称即可。

Express访问静态资源

当前端要显示后端的静态资源时，就变得比较讲究了。首先，node.js中需要将静态文件放在一个静态目录中。

静态目录的做法：

1.在工程中新建一个文件夹，命名为public。

2.将静态资源全部放在public文件夹中，本次将1.mp4放入：

3.在app.js中设置静态路径，首先导入path模块：

const path = require('path');

4.设置静态路径。__dirname是当前文件所在绝对目录的意思。

app.use('/static',express.static(path.join(__dirname,'public')));

JS代码实现：

JS中的代码比较休闲，只需要传送html页面和设置静态路径就好了。

var express = require('express');
var app = express();
const path = require('path');
app.use('/static',express.static(path.join(__dirname,'public')));
app.get('/', function (req, res) {
   res.sendFile( __dirname + "/" + "video.html" );
});// 显示html页面
var server = app.listen(8080, function () {
   var host = server.address().address;
   var port = server.address().port;
  //  服务器IP地址为127.0.0.1 端口为8888
   console.log( "server is running"+host+port);
 });

HTML5代码实现：

html5代码需要稍微修改一下路径。将原先的1.mp4修改为static/1.mp4。项目的根目录是project，而视频在project里的子目录中，因此需要加文件目录符+虚拟路径“static”。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
	<p>video:</p>
	<video id="video1" controls width="300px" autoplay>
		<source src="static/1.mp4" type="video/mp4">
	</video>
</body>
</html>

代码跑起来，完工：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • nodejs express配置自签名https服务器的方法

    nodejs express配置自签名https服务器的方法

    在nodejs中使用express来搭建框架可以说是非常的简单方便,但是一般默认创建的都是http服务器,也就是只能通过http协议进行访问.如今https已经是发展趋势,我们应该顺应时代的潮流.在本篇文章中,我们将会来使用自签名的方式创建证书,然后使用express框架来搭建https服务器,最后让浏览器或者客户端使用https协议进行访问. 首先我们要生成证书文件: (1)生成私钥key文件(下面的pathway表示你要保存的文件路径位置) openssl genrsa 1024 > /pa

  • node.js中express模块创建服务器和http模块客户端发请求

    首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文件等,就可以在浏览器中访问了 var express = require("express"); var path = require("path"); var app = express(); //目录 (当前目录下的www_root目录) app.use(expre

  • C#实现给DevExpress中GridView表格指定列添加进度条

    C#实现给DevExpress中GridView表格指定列添加进度条

    目录 一.问题描述 二.实现方法 2.1.先注册单元格绘制方法 2.2.编写给指定单元格绘制进度条的方法 2.3.使用给指定单元格绘制进度条方法 三.相关内容 3.1.给单元格设置百分比 一.问题描述 在我们使用Winform配合DevExpress进行开发表格时,表格中的涉及到百分比数据的内容除了显示百分比的数字内容外,还希望搭配显示进度条效果(且低于百分之60的内容用红色表示不合格,高于百分之60的用绿色表示),这样百分比的显示效果更加清晰直观. 二.实现方法 2.1.先注册单元格绘制方法

  • express+multer上传图片打开乱码问题及解决

    目录 express+multer上传图片打开乱码 原因 解决方法 简单的node文件上传下载及中文乱码 1. 基于MEAN的技术栈 2. 在前端代码中放置文件上传按钮和处理表单数据 3. 后端接收上传文件 4. 处理上传文件的乱码 5. 下载文件 6. 处理下载文件的乱码 express+multer上传图片打开乱码 原因 由于使用multer处理上传图片时,multer存储的是重命名的文件,文件并没有后缀名导致文件无法在服务器直接打开,手动加上后缀名就能打开文件. 如: 解决方法 引入fs模

  • express提供http服务功能实现示例

    目录 先看使用 实现思路 具体实现 先看使用 const express = require('./express'); const app = express(); app.get('/',function (req,res){ res.end('/') }) app.get('/hello',function (req,res){ res.end('/hello'); }) app.listen(3000,function () { console.log('server start 300

  • 关于访问node express中的static静态文件方法

    目录 访问node express中的static静态文件 应用场合 解决方法 示例 Express访问静态资源(express.static) 前端调用静态资源 Express访问静态资源 访问node express中的static静态文件 应用场合 在项目中需要使用到node express框架进行中间件开发. 使用express托管静态文件或开放其它静态文件 解决方法 通过express内置的express.static方法可以方便地托管静态文件,例如图片.CSS.JavaScript文

  • 对Django中static(静态)文件详解以及{% static %}标签的使用方法

    在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等.因此在DTL中加载静态文件是一个必须要解决的问题.在DTL中,使用static标签来加载静态文件.要使用static标签,首先需要{% load static %}. 加载静态文件的步骤如下: 首先确保django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中. 确保在settings.py中设置了STATIC_URL. 注意: 上面两条都是在创建Dja

  • 快速解决Django关闭Debug模式无法加载media图片与static静态文件

    开发时,通常打开Debug模式会快速定位开发时的一些问题. 项目开始部署时,关闭Debug模式,url.py路由静态文件和图片写法: # url.py from django.views import static from django.conf import settings #路由静态文件和图片 urlpatterns = [ url(r'^static/(?P<path>.*)$', static.serve, {'document_root': settings.STATIC_ROO

  • Django项目中动态设置静态文件路径的全过程

    Django项目中动态设置静态文件路径的全过程

    目录 前言 一.修改BASE_DIR: 二.修改模板文件路径(TEMPLATES中的DIRS的值): 三.修改国际化文件路径,由于LOCALE_PATHS默认不存在,需要自己在合适位置添加,如下图所示: 四.修改公共文件路径,如下图所示: 五.修改STATIC_ROOT文件路径,如下图所示: 六.修改多媒体路径,如下图所示: 总结 前言 Django项目需要在settings.py文件中设置各种文件的路径,例如:媒体文件(media)的路径.静态文件(static files)的路径.模板文件(

  • 在 Node.js 中使用 async 函数的方法

    借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

  • 详解Django模版中加载静态文件配置方法

    1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

  • ASP.NET Core中预压缩静态文件的方法步骤

    前言 Web应用程序的优化是非常重要,因为使用更少的CPU,占用更少的带宽可以减少项目的费用. 在ASP.NET Core中我们可以很容易的启用响应压缩,但是针对预压缩文件,就需要做一些额外的功能了. 这篇博客文章展示了如何在ASP.NET Core中预压缩静态文件. 下面话不多说了,来一起看看详细的介绍吧 为什么需要预压缩文件? 虽然在从服务器请求文件时, 我们可以动态压缩文件,但这意味这Web服务器需要做更多的额外工作. 其实只有在新的应用程序部署时才会更改要压缩的文件. 越好的压缩效果需要

  • 在 Node.js 中使用原生 ES 模块方法解析

    从版本 8.5.0 开始,Node.js 开始支持原生 ES 模块,可以通过命令行选项打开该功能.新功能很大程度上得归功于 Bradley Farias. 1.演示 这个示例的代码目录结构如下: esm-demo/ lib.mjs main.mjs lib.mjs: export function add(x, y) { return x + y; } main.mjs: import {add} from './lib.mjs'; console.log('Result: '+add(2, 3

  • Node.js中npx命令的使用方法及场景分析

    npx使用教程 今晚在学习Vue-Cli时, 由于突发奇想想试试最新的@4.x.x版本, 但是本地全局安装的脚手架版本是@2.x.x的, 因为不想污染全局于是就想到用npx命令, 一路上踩坑不断, 为了以后能够更好的使用npx并区分其跟npm的指令, 就有了本篇笔记 npm 是从5.2版开始, 增加(自带)了 npx 命令. 如果发现没安装请手动安装: npm i -g npx npm与npx的概念 NPM(Node Package Manager) 是Node.js提供的一个包管理器, 可以使

  • 删除xcode 中过期的描述性文件方法

    1.使用终端 首先 打开终端 cd ~/Library/MobileDevice/Provisioning\ Profiles/ 再删除所有 rm *.mobileprovision 2.直接找到文件夹-简单粗暴 首先show in finder,接着 Com+Shi+G ,再 ~/Library/MobileDevice/Provisioning Profiles 最后找到对应的删除 yangdeMacBook-Pro:Provisioning Profiles yangliugrep"dev

随机推荐