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

express入门02静态资源托管

news 2025/10/28 7:46:31

目录

  • 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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/10/28 2:05:10

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/10/18 5:19:13

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/10/16 11:41:31

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/10/24 16:04:24

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/10/21 12:40:54

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/10/20 8:12:05

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/10/25 6:07:35

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/10/21 11:17:25