当前位置： 首页 > news >正文

express入门02静态资源托管

news 2026/2/10 21:08:09

目录

  • 1 搭建静态资源结构
  • 2 代码助手
  • 3 多目录托管
  • 4 服务器热启动
  • 总结

上一篇我们讲解了使用express搭建服务器的过程，服务器搭建好了之后，除了在地址栏里输入URL发起get请求或者post请求外，通常我们还需要访问静态资源，比如html、css、JavaScript等。本节我们讲解一下如何托管静态资源

1 搭建静态资源结构

在项目的根目录下创建一个public文件夹，里边分别创建css、javascript、images文件夹
在这里插入图片描述
在html页面我们搭建一个基础布局，用来显示我们家政预约平台的LOGO及名称，再放置一个退出按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css"><script src="./javascript/index.js"></script>
</head>
<body><div class="nav-header"><img class="logo" src="./images/logo.png" alt="" width="80px" height="80px"><span class="title">家政预约管理后台</span><button onclick="logout()">退出</button></div>
</body>
</html>

这里我们引入了css和js

在css中我们定义一下组件的样式，让我们的组件横向排列，垂直居中

.logo{border-radius: 50%;
}
.title{ font-size: 20px;font-weight: bold;color: #000000;
}
.nav-header{display:flex;align-items: center;flex-direction: row;justify-content: flex-start;
}

在js中我们定义一个方法，提示一个信息

function logout(){alert('退出成功');
}

在images目录放置一个图片用来显示LOGO

静态资源放置好了之后，设置我们的app.js，让express启用我们的静态目录

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

设置好之后，启动我们的服务器，在地址栏里输入http://localhost:3000/index.html就可以看到具体的效果
在这里插入图片描述

2 代码助手

现在AI发展比较快，写代码的时候有一个助手就比较便捷了，这里我们安装一下Baidu Comate。点击扩展，输入插件的名称，点击Install在这里插入图片描述
安装好之后需要进行登录，登录后你在写代码的时候，ai就会识别你的意图帮你自动补充代码，还是非常便捷的

3 多目录托管

如果有多个目录需要访问的，可以在项目的根目录继续创建文件夹，可以给新增的目录增加前缀来进行区分
在这里插入图片描述
在app.js里增加额外的托管目录

app.use('/uploads', express.static('uploads'))

在浏览器里我们就可以通过我们设置的前缀来访问静态资源
在这里插入图片描述

4 服务器热启动

每次修改app.js内容的时候，都得重启一下服务器，比较繁琐，我们引入一个插件来自动重启，输入如下命令安装

npm i nodemon -g

在这里插入图片描述
然后用nodemon来启动我们的app.js

nodemon app.js

在这里插入图片描述
这样每次修改的时候服务器会自动重启，比较方便

总结

本篇我们介绍了静态资源托管的功能，有了这个之后，下一篇我们就可以梳理一下和公众号的集成，比如响应用户的关注事件，自动给用户发送一个欢迎消息。

相关文章：

express入门02静态资源托管

目录 1 搭建静态资源结构2 代码助手3 多目录托管4 服务器热启动总结 上一篇我们讲解了使用express搭建服务器的过程&#xff0c;服务器搭建好了之后&#xff0c;除了在地址栏里输入URL发起get请求或者post请求外&#xff0c;通常我们还需要访问静态资源&#xff0c;比如html、c…...

编程日记 2024/6/11 21:22:33

Java常见的引用类型

1、强引用&#xff1a;普通的变量引用&#xff0c;Student sutnew Student(); 2、软引用&#xff1a;堆内对象若未被引用&#xff0c;GC不会立刻删除&#xff0c;而是在堆内存空间不足时才会进行删除。 3、弱引用&#xff1a;GC触发&#xff0c;会立刻删除。 4、虚引用&am…...

编程日记 2024/6/11 21:21:32

使用易备数据备份软件，简单快速地备份 Oracle 数据库

易备数据备份软件能够以简单高效的方式&#xff0c;实现对 Oracle 数据库的保护。 易备数据备份软件数据库备份功能的关键特性 自动保护网站数据库及应用程序实时备份&#xff0c;不需要任何中断或数据库锁定基于日期和时间的备份任务计划可恢复到一个已存在的数据库或创建一…...

编程日记 2024/6/11 21:20:31

基于SSM+Jsp的交通事故档案管理系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…...

编程日记 2024/6/11 21:17:28

深度解析：ChatGPT全面测评——功能、性能与用户体验全景剖析

从去年底至今&#xff0c;由 OpenAI 发布的大规模语言模型 ChatGPT 引发了几乎所有科技领域从业者的高度关注。据瑞银集团的报告显示&#xff0c;自 2023 年 1 月起&#xff0c;仅两个月内&#xff0c;ChatGPT 的月活用户数便超过了 1 亿。 ChatGPT 被誉为“最强 AI”&#xff…...

编程日记 2024/6/11 21:16:25

领夹麦克风哪个品牌好？哪个麦克风好？揭秘无线麦克风十大排名！

​无线领夹麦克风因其便携性和高音质而备受青睐。今天&#xff0c;我要为大家推荐几款备受赞誉的无线领夹麦克风&#xff0c;它们不仅在音质上表现出色&#xff0c;更在设计和性能上各有千秋。这些麦克风不仅适合专业录音师使用&#xff0c;也适合普通用户在日常生活中的各种场…...

编程日记 2024/6/11 21:15:24

低代码开发：智能财务系统开发应用

在当今数字化时代&#xff0c;企业对于高效的财务管理系统需求日益增长。低代码开发平台为开发智能财务系统提供了快速、灵活的解决方案&#xff0c;使企业能够快速构建、定制和部署应用程序&#xff0c;提升财务管理效率。本文将探讨低代码开发在智能财务系统开发应用中的应用…...

编程日记 2024/6/11 21:14:23

Windows 10 找不到Microsoft Edge 浏览器

下载链接 了解 Microsoft Edge 手动下载浏览器 问题说明 一般来说&#xff0c;windows10系统应该是自带浏览器edge的&#xff0c;但有的电脑就是没有找到edge浏览器&#xff0c;可能系统是精简过的&#xff0c;可能是被卸载了。如下&#xff0c;控制面板确实没找到程序。 ​ …...

编程日记 2024/6/11 21:11:20

【react】useState 使用指南

React的useState是函数组件中用于管理状态（state）的Hook。以下是关于useState的使用指南，结合参考文章中的信息，以清晰、分点的方式表示： 1. 基本概念 useState是React函数组件中用于管理状态(state)的Hook。它接受一个初始状态值，并返回一个包含当前状态和一个用于更新…...

编程日记 2024/6/11 21:08:18

RK3588 Debian11进行源码编译安装Pyqt5

RK3588 Debian11进行源码编译安装Pyqt5 参考链接 https://blog.csdn.net/qq_38184409/article/details/137047584?ops_request_misc%257B%2522request%255Fid%2522%253A%2522171808774816800222841743%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&…...

编程日记 2024/6/11 21:07:17

二叉树的前序遍历-力扣

二叉树的前序遍历&#xff0c;指先遍历中间节点&#xff0c;然后遍历左节点&#xff0c;然后遍历右节点&#xff0c;按照这个顺序进行递归即可。 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* …...

编程日记 2024/6/11 21:02:13

千问Qwen7B chat：本地部署及网页端使用

基于前面的安装经验&#xff0c;千问大模型的本地部署并不算难&#xff0c;主要时间用在大模型文件的下载上。同时系统运行对硬件也有较高的要求&#xff0c;本机的硬件配置为N卡3060&#xff0c;显存12G。 使用conda创建虚拟环境&#xff0c;主要版本如下&#xff1a; Pyth…...

编程日记 2024/6/11 21:01:11

(27)ADC接口---＞(002)FPGA实现AD7606接口

（002）FPGA实现AD7606接口 1 目录 （a）FPGA简介 （b）IC简介 （c）Verilog简介 （d）FPGA实现AD7606接口 （e）结束 1 FPGA简介 （a）FPGA（Field Programmable Gate Array）是在PAL （可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。…...

编程日记 2024/6/11 21:00:06

设计模式-设计模式分类

概述 23 种设计模式&#xff0c;分为创建型模式、结构型模式和行为型模式。另外&#xff0c;近来这一清单又增加了一些类别&#xff0c;例如&#xff0c;并发型模式、线程池模式、Java EE 企业技术的多层应用程序上的模式等。 一、创建型模式 1.工厂方法模式(Factory Method…...

编程日记 2024/6/11 20:57:00

重邮计算机网络803-（1）概述

目录 一.计算机网络向用户提供的最重要的功能 二.互联网概述 1.网络的网络 2.计算机网络的概念 3. 互联网发展的三个阶段 4.制订互联网的正式标准要经过以下的四个阶段 5.互联网的组成&#xff08;功能&#xff09; 6.互联网功能 7.互联网的组成&#xff08;物理&…...

编程日记 2024/6/11 20:55:59

党史馆3d网上展馆

在数字化浪潮的推动下&#xff0c;华锐视点运用实时互动三维引擎技术&#xff0c;为用户带来前所未有的场景搭建体验。那就是领先于同行业的线上三维云展编辑平台搭建编辑器&#xff0c;具有零基础、低门槛、低成本等特点&#xff0c;让您轻松在数字化世界中搭建真实世界的仿真…...

编程日记 2024/6/11 20:54:58

小心人工智障

最近gpt用的有点多 基本上centos命令都懒得自己动脑&#xff0c;直接把需求给gpt然后cv命令就用了事实证明还是需要自己盯一盯的&#xff0c;今天我想给新服务器配置一下环境&#xff0c;下个maven&#xff0c;给了他现在官网最新的版本号&#xff0c;他给我修正好的下载命令&a…...

编程日记 2024/6/11 20:53:57

[AIGC] 自定义Spring Boot中BigDecimal的序列化方式

在很多场景下&#xff0c;我们需要对BigDecimal类型的数据进行特殊处理&#xff0c;比如保留三位小数。Spring Boot使用Jackson作为默认的JSON序列化工具&#xff0c;我们可以通过自定义Jackson的序列化器&#xff08;Serializer&#xff09;来实现&#xff0c;下面将详细介绍实…...

编程日记 2024/6/11 20:52:55

ubuntu20.04设置文件开机自启动

硬件&#xff1a;树霉派4B 系统&#xff1a;ubuntu20.04 在ubuntu20.04上经常需要运行 ./BluetoothServerParse_L.c ,比较繁琐&#xff0c;想要设置开机自启动&#xff0c;让树霉派4B在接上电源之后就自动运行该程序。使用systemd服务&#xff0c;设置步骤如下&#xff1a; &…...

编程日记 2024/6/11 20:49:52

盛水最多的容器

class Solution { public:int maxArea(vector<int>& height) {int l0,rheight.size()-1;int ans0;while(l<r){int areamin(height[l],height[r])*(r-l);ansmax(area,ans);if(height[l]<height[r]){l;}else{--r;}}return ans;} };...

编程日记 2024/6/11 20:48:51

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/2/9 15:39:14

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57