目录结构如图:
index.html页面
一个h1标签,以及一个外联js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="./js/index.js"></script>
</head>
<body>
<h1>这是首页</h1>
</body>
</html>
list页面:
一个h1标签和一个img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是列表页</h1>
<img src="./images/vue.png" alt="">
</body>
</html>
index.js页面:
页面加载完成给body添加背景颜色
vonload = function () {
document.body.style.backgroundColor = "red"
}
页面结构都是相当的简单,当然主要目地是为了模拟实现一个基本的http服务器
下面是具体代码逻辑部分
// 1.引入node中自己定义的核心模块
// 使用 HTTP 服务器与客户端 需要 require('http')。
const http = require("http");
// 文件系统
const fs = require("fs");
// 路径
const path = require("path");
// 2.创建一个服务器
const server = http.createServer();
// 3.为这个server服务器,通过 on 方法,绑定一个 事件来监听每次请求
server.on("request", (req, res) => {
// 获取当前请文件名
let url = req.url;
// 调用封装函数
readStaticFile(url,res)
})
// 4.启动服务器
server.listen(3000,() => { // 默认为localhost(本地主机); 端口为3000
console.log("server is running")
})
function readStaticFile(url, res) {
// 读取对应路径的文件
fs.readFile(path.join(__dirname, 'static', url), (err, data) => {
// 找不到文件则返回404
if (err) return res.end("404");
// res.end来返回上面读取的内容
res.end(data)
})
}
以上就实现了一个最基本的静态资源服务器。
使用express.static来快速托管静态资源文件
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。
中文官网:点击打开链接
关于express的使用这里暂时先不说明,抽空一并总结,可以先看一下具体的实现
// 1. 导入 express 模块
const express = require("express");
// 2. 创建服务器
const app = express();
// 使用 express.static 来托管 assets 目录
// 这里app.use是一个中间件,所谓中间件其实也是一个路由,是一个可以处理所有http请求的路由
app.use(express.static("./assets"))
// 3. 开启服务器
app.listen(3001, () => { // 默认为localhost(本地主机); 端口号3001
console.log("express is runing")
})
nodemon
在做服务器相关业务逻辑的时候,每次更改代码都要重启项目工程,这里给大家推荐一个非常好用的插件,nodemon , 相信有的朋友是知道的,这里就简单介绍一下基本使用
nodemon安装
npm i stall nodemon -g (因为是一个工具所以全局安装)
nodemon使用
和用 node 来运行 文件一样 只需 nodemon 文件路径 即可
此时在你更改代码时会自动帮你重启。