详解用node搭建简单的静态资源管理器
什么是静态资源管理器
静态资源管理器是一种用于管理前端静态资源（如html、css、js、图片等）的工具，可以通过该工具实现静态资源的访问、上传、删除、编辑等操作。
搭建静态资源管理器的前置条件
- 安装node.js及npm
- 掌握node.js基本语法
- 掌握npm依赖包管理
步骤一：创建工程目录
mkdir staticManager //创建一个名为staticManager的文件夹
cd staticManager //进入staticManager文件夹
touch index.js //创建名为index.js的文件
npm init -y //初始化npm配置文件
步骤二：安装依赖包
npm install express --save //安装express模块
npm install body-parser --save //安装body-parser模块
npm install multer --save //安装multer模块
步骤三：编写代码
const express = require('express')
const bodyParser = require('body-parser')
const multer = require('multer')
const fs = require('fs')
const app = express()
//静态文件路径
const staticPath = './static'
//创建multer对象
const upload = multer({ dest: `${staticPath}/temp` })
//body-parser
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//静态文件访问
app.use('/static', express.static('static'))
//上传文件
app.post('/upload', upload.single('file'), (req, res) => {
const file = req.file
const { originalname, path } = file
//修改文件名
const newName = `${Date.now()}${originalname.slice(originalname.lastIndexOf('.'))}`
//修改文件名后的路径
const newPath = `${staticPath}/${newName}`
//重命名文件
fs.renameSync(path, newPath)
//返回上传成功信息
res.send({ success: true, message: '上传成功' })
})
//删除文件
app.delete('/delete', (req, res) => {
const { fileName } = req.query
const path = `${staticPath}/${fileName}`
//判断文件是否存在
if(!fs.existsSync(path)) {
res.send({ success: false, message: '文件不存在' })
return
}
//删除文件
fs.unlinkSync(path)
res.send({ success: true, message: '删除成功' })
})
//运行服务器
app.listen(3000, () => {
console.log('Server is running at port 3000...')
})
示例一：上传文件
前端HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<form>
<input type="file" id="file">
<button type="submit" onclick="upload()">上传</button>
</form>
<script>
function upload() {
const file = document.querySelector('#file').files[0]
const xhr = new XMLHttpRequest()
const formData = new FormData()
formData.append('file', file)
xhr.open('POST', '/upload')
xhr.send(formData)
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
const result = JSON.parse(xhr.responseText)
if(result.success) {
alert('上传成功')
} else {
alert(result.message)
}
}
}
}
</script>
</body>
</html>
示例二：删除文件
前端jQuery代码：
$(function() {
$('body').on('click', '.delete-btn', function() {
const fileName = $(this).data('filename')
$.ajax({
url: '/delete',
type: 'DELETE',
data: { fileName },
success: function(result) {
if(result.success) {
alert('删除成功')
} else {
alert(result.message)
}
}
})
})
})
总结
通过以上步骤和代码，我们可以很容易地搭建出一个简单的静态资源管理器，并实现文件上传和删除操作。当然，该示例还仅仅是一个简单的demo，实际应用中还需考虑安全性、并发性、稳定性等问题。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解用node搭建简单的静态资源管理器 - Python技术站
微信扫一扫 
支付宝扫一扫 