express入门02静态资源托管

文摘   2024-06-12 20:00   内蒙古  

上一篇我们讲解了使用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

这样每次修改的时候服务器会自动重启,比较方便

总结

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


低代码布道师
分享微搭低代码使用教程,提问交流+知识星球50556232
 最新文章