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

express入门02静态资源托管

news 2026/4/2 9:20:58

目录

  • 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

AI黑科技展示：CYBER-VISION零号协议实时视频分割效果

AI黑科技展示&#xff1a;CYBER-VISION零号协议实时视频分割效果 1. 未来已来&#xff1a;当AI视觉遇见赛博朋克 想象一下这样的场景&#xff1a;一位视障人士戴上智能眼镜&#xff0c;眼前的世界突然变得清晰可辨——人行道上的盲道被高亮标注&#xff0c;前方的障碍物用醒目…...

编程新知 2026/4/2 9:16:56

Apprise：一个库统治所有推送通知平台的终极解决方案

Apprise&#xff1a;一个库统治所有推送通知平台的终极解决方案 前言 在日常开发与运维工作中&#xff0c;我们经常需要将系统状态、告警信息或业务事件通过各种渠道推送给相关人员——可能是 Telegram、企业微信、钉钉、邮件&#xff0c;也可能是 Slack、Discord 或 PushBulle…...

编程新知 2026/4/2 8:20:03

C++学习笔记——初始化列表、创建和实例化对象、new 关键字、隐式构造与 explicit 关键字、运算符与运算符重载

目录 1. 初始化列表 1.1 基本语法 1.2 为什么使用初始化列表&#xff1f; 1.3 初始化顺序 2. 创建和实例化对象 2.1 栈上分配&#xff08;自动存储期&#xff09; 2.2 堆上分配&#xff08;动态存储期&#xff09; 2.3 栈 vs 堆&#xff1a;Cherno 的建议 3. new 关键…...

编程新知 2026/4/2 7:39:17

大海捞针：从海量真实世界5G-A基站数据中追踪无人机

大家读完觉得有帮助记得关注和 点赞&#xff01;&#xff01;&#xff01; 摘要 无人机在日常生活中的潜在应用使得对其监控变得至关重要。然而&#xff0c;现有的无人机监控系统通常依赖于摄像头、激光雷达或雷达&#xff0c;这些系统的感知范围有限或部署成本高昂&#xff0…...

编程新知 2026/4/2 7:27:10

Ostrakon-VL像素终端实操：自定义扫描任务清单配置方法

Ostrakon-VL像素终端实操&#xff1a;自定义扫描任务清单配置方法 1. 像素特工终端介绍 Ostrakon-VL像素终端是一款专为零售与餐饮场景设计的智能扫描工具&#xff0c;采用独特的8-bit像素风格界面&#xff0c;将复杂的图像识别任务转化为直观有趣的"特工任务"。基…...

编程新知 2026/4/2 7:27:10

PyTorch 2.8镜像作品集：基于OpenCV+Torch的实时手势识别视频演示

PyTorch 2.8镜像作品集&#xff1a;基于OpenCVTorch的实时手势识别视频演示 1. 镜像环境与能力概览 PyTorch 2.8深度学习镜像是一个经过深度优化的专业级开发环境&#xff0c;专为现代AI应用设计。这个环境最吸引人的特点是它已经预装了所有必要的工具和库&#xff0c;让你可…...

编程新知 2026/4/2 6:56:49

C标准库缓冲区溢出问题与安全编程实践

1. C标准库缓冲区溢出问题概述缓冲区溢出是C语言开发中最常见的安全漏洞之一。作为一名有十年经验的嵌入式开发者&#xff0c;我见过太多由于不当使用标准库函数导致的崩溃和安全问题。缓冲区溢出通常发生在程序向固定大小的缓冲区写入超过其容量的数据时&#xff0c;多余的数据…...

编程新知 2026/4/2 5:01:38

nli-distilroberta-base实际项目：新闻摘要与原文蕴含关系自动评估

nli-distilroberta-base实际项目&#xff1a;新闻摘要与原文蕴含关系自动评估 1. 项目概述 在新闻媒体和内容创作领域&#xff0c;如何快速评估一篇摘要是否准确反映了原文内容一直是个挑战。传统的人工审核方式效率低下且成本高昂。nli-distilroberta-base项目正是为解决这一…...

编程新知 2026/4/2 4:55:36

SDMatte开源大模型部署：本地化AI抠图替代PS，支持透明物体精细提取

SDMatte开源大模型部署&#xff1a;本地化AI抠图替代PS&#xff0c;支持透明物体精细提取 1. 产品概述 SDMatte是一款专注于高质量图像抠图的AI模型&#xff0c;特别擅长处理传统抠图工具难以应对的复杂场景。与Photoshop等传统工具相比&#xff0c;SDMatte通过深度学习技术实…...

编程新知 2026/4/2 4:39:28

Mac环境OpenClaw深度优化：Qwen3-4B模型推理速度提升30%方案

Mac环境OpenClaw深度优化&#xff1a;Qwen3-4B模型推理速度提升30%方案 1. 为什么需要优化OpenClaw的模型推理速度 上周我在用OpenClaw处理一个简单的文件整理任务时&#xff0c;发现整个流程耗时比预期长了近一倍。通过日志排查才发现&#xff0c;大部分时间都消耗在等待Qwe…...

编程新知 2026/4/2 4:27:19