express入门02静态资源托管

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

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

总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/699416.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！