[Day3] Node.js利用Express托管静态文件

最新推荐文章于 2023-02-20 14:22:00 发布
最新推荐文章于 2023-02-20 14:22:00 发布
阅读量196 收藏
点赞数
分类专栏： nodejs实战 文章标签： javascript nodejs css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhs362625119/article/details/109129271
版权

[Day3] Node.js利用Express托管静态文件

文章目录

要求

  • 了解Express框架
  • 了解JavaScript和html,CSS基础知识
  • 了解node.js常用模块：express
  • 了解require, exports

环境

  1. OS: Win10
  2. Node.js: v12.19.0
  3. Notepad++
  4. Express: v4.17.1
  5. Yarn: v1.22.10

实战

index.html

编写一个简单index.html文件，新建一个静态文件存放的public目录.把index.html文件放到此文件夹，引入style.css

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>Hello HTML</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
		</head>
		<body>
			<h1>看到这句话表示html页面成功显示了。</h1>
		</body>
	</head>
</html>

style.css

新建stylesheets文件夹，在里面新建一个style.css文件

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #00B7FF;
}

index.js

编写index.js

var app=require("./server")

app.listen(3000);
console.log("Server running at localhost:3000");

server.js

编写server.js，直接使用express的中间件托管静态文件目录

var express=require("express");
var app=express();

app.use(express.static('public'))

module.exports = app;

install Express

不在使用npm，用Yarn替代。

Yarn: Fast, reliable, and secure dependency management. 详细参考官网

npm install yarn -g
yarn add express

安装完后，除了node_modules外，出现package.json 和yarn.lock 文件。这2个文件的作用。

  1. package.json

    在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json

  2. yarn.lock

    Yarn 需要准确存储每个安装的依赖是哪个版本。 为了做到这样，Yarn 使用一个你项目根目录里的 yarn.lock 文件

运行index.js

node index.js

结果及演示

浏览器看效果及整个过程
在这里插入图片描述

蜗牛乌龟谁跑的快
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js中express.static 托管静态文件
02-15
node.js中可以访问静态文件，只要对静态文件托管就可以了，这是我写的一个例子，和大家交流学习
Node-Static-Server:纯 node.js 中的独立静态文件 http 服务器
06-21
Node.js 的入门套件。 给我在 MacLaren 的朋友的开发礼物 确保你的机器上安装了 Node.js 将 NODE_STATIC_WEB_SERVER.zip 解压缩到您机器上的任何位置 从 NODE_STATIC_WEB_SERVER 文件夹内打开 CMD 提示符或终端窗口，或 cd 到它。 在终端窗口输入：node server 打开浏览器到“ ” 您的新项目已准备就绪。 以下是如何开始： 包含 jQuery。 随意更新版本取决于您何时使用它。 开始在js/app.js编写您的应用程序。 在index.html编写您的应用程序 HTML。 将 CSS 添加到css/style.css 。 ============ 感谢 MacLaren 的每一个人给我们带来了很棒的工作体验：Adam Winick： ：@sinelanguage
express 静态文件托管
Hiroshi's
11-17 184
/* express 静态文件托管 */ const express = require('express'); const app = express(); let server = app.use(express.static('publicm')); app.use('/xxx',express.static('../mypack')); server.listen(3000,()=>{ console.log('running...'); }) 浏览器输入：http://12
Node.js学习（13）- Express静态文件托管
程序员精进之路
09-03 1960
1.通过 Express 内置的express.static可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。 将静态资源文件所在的目录作为参数传递给express.static中间件就可以提供静态资源文件的访问了。例如，假设在public目录放置了图片、CSS 和 JavaScript 文件，你就可以： 2.Express托管静态文件实例 创建一个expr...
express静态资源托管服务
The_Road_of_Java的博客
09-01 231
express静态资源托管服务
node.js+express之静态文件托管
★【World Of Moshow 郑锴】★
09-19 817
静态文件托管 项目中难免会有一些静态文件需要托管，这些文件应该是要可以直接被外部访问，也就是与其他实体路由区分开来。例如通常我们会有static或者public的路径来引用静态文件。 手工路由托管静态文件 假设在public目录下有style.css文件，那么利用一下代码则可以手工创建一个静态路由来管理静态文件 var createError = require('http-errors'); var express = require('express'); var fs = require('fs')
【Node.js】 nodejs搭建静态资源服务器；Express框架；express基本使用；express响应客户端数据；express托管静态资源；expres
wusandaofwy的博客
09-07 5542
nodejs搭建静态资源服务器;Express框架;express基本使用;express响应客户端数据;express托管静态资源;expres
Node.js---Express基本使用和静态资源托管
m0_48375854的博客
01-08 2604
Express一、Express简介二、Express 的基本使用1、安装2、创建基本的 Web 服务器3、监听 GET 请求4、监听 POST 请求5、 把内容响应给客户端6、获取 URL 中携带的查询参数7、获取 URL 中的动态参数三、托管静态资源1、express.static()2、托管多个静态资源目录3、挂载路径前缀四、nodemon1、安装nodemon2、使用nodemon 一、Express简介        &nbsp
关于使用NodeJS+Express搭建服务器访问静态资源的一些填坑经验
cjs1534717040的专栏
11-10 1938
使用NodeJS+Express搭建服务器访问静态资源
express自动渲染静态html,利用 Express 托管静态文件
weixin_30663789的博客
06-03 412
利用 Express 托管静态文件为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。此函数特征如下：express.static(root, [options])The root argument specifies the root directory from which to serve s...
express之实战
cvenginner的博客
12-26 608
使用express制作小案例 一、上传图片 html页面 <form action="http://localhost:8888/reg" method="post" enctype="multipart/form-data" id="form1"> <input type="file" name ="f1"> <br> <input type="submit"> </form> <div id="divim
nodejs实现静态托管
anliujia6342的博客
08-01 832
const express = require("express"); const app = express(); /* 语法1： app.use(express.static('public')); app.use()方法，是专门用来注册 中间件； express.static 是express的内置中间件； 语法2：a...
express托管静态文件
liuhao9999的博客
03-25 4283
app.js文件内容 const express = require('express') const app = express() // 服务端口号 const port = 3000 // 利用 Express 托管静态文件 app.use(express.static('public')) app.listen(port, () => { console.log(`Example app listening at http://localhost:${po...
express托管同目录静态文件
qq_41442397的博客
03-12 161
最近做毕设，用到express，并且需要用其托管静态目录，不托管的话图片是裂的。但是，我搜了很多教程，几乎没有一个教程是如何托管同目录静态文件的，而这却是我遇到的问题。虽然新建一个目录不难，但是头铁的我觉得必须得找到一个方法解决现在的问题，结果还真给我找到方法来解决了。当然，以后写项目目录结构最好还是有条理一点，不要像我这次觉得只是写demo就为了省事把图片和js文件放一起。 首先解释一下...
express的模板直接使用HTML
qpanHappy的博客
11-24 4179
express的模板使用一般情况下，express默认使用ejs或者jade(pug)模板，但是如果我们需要使用其它模板应该怎么办呢，比如直接使用html。
1-14 express托管静态资源
Model球
06-15 1191
express提供了一个非常好用的函数，叫做express.static(),通过它，我们可以非常方便地创建一个静态资源服务器，例如，通过如下代码就可以将public目录下的图片、CSS文件、JavaScript文件对外开放访问了。 注意：Express在指定的静态目录中查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在URL中。 挂载路径前缀 如果希望再托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式：......
使用Express搭建服务,静态资源托管,路由模块-你值得拥有
最新发布
Web_boom的博客
02-20 1850
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
node.js中Express静态资源托管
weixin_44860226的博客
10-12 1770
现在：我们可以将node命令替换为nodemon命令，使用nodemon app.js来启动项目，这样做的好处是：代码被修改之后，会被nodemon监听到，从而实现自动重启项目的效果。当基于Node.js编写了一个网站应用的时候，传统的方式，是运行node app.js命令，来启动项目。这样做的坏处是：代码被修改之后，需要手动重启项目。注意：Express在指定的静态目录中查找文件，并对外提供资源的访问路径，因此存放静态文件的目录名不会出现在URL中。现在，你就可以通过带有。访问静态资源文件时，
Express之托管静态文件
weixin_33962923的博客
02-07 353
中间件express.static 我们使用express初始化一个目录的时候，会在app.js中看到一大推的app.use。 其中一个主要的中间件是express.static(4.0版本依旧保留的中间件) var express = require('express'); var app = express(); app.use('/static',express.static('publ...
Node.js入门指南：从零开始构建Web应用
随着深入学习，第4章至第5章会探讨Node.js的核心模块，这些模块是开发者进行Web开发的基石，如Express框架、Socket.IO等，读者将学会如何利用这些工具构建功能丰富的Web应用。 第6章则转向了一些进阶话题，涉及更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值