Tech Blog

如何使用 Node.js 开发一个文件上传功能？

2024-08-16

所有,nodejs

在Node.js中，可以使用内置的http模块搭建一个简单的服务器，并使用formidable模块来处理上传的文件。以下是一个简单的例子：

首先，安装formidable模块：




npm install formidable

然后，创建一个简单的服务器来处理文件上传：




const http = require('http');
const formidable = require('formidable');
const fs = require('fs');
 
const server = http.createServer((req, res) => {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // 解析请求，包括文件上传
    const form = new formidable.IncomingForm();
 
    form.parse(req, (err, fields, files) => {
      const oldPath = files.filetoupload.filepath;
      const newPath = __dirname + '/uploads/' + files.filetoupload.originalFilename;
 
      // 重命名文件
      fs.rename(oldPath, newPath, function (err) {
        if (err) throw err;
        res.write('File uploaded and moved!');
        res.end();
      });
    });
  } else {
    // 显示一个用于上传文件的表单
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="upload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
});
 
server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在上述代码中，服务器监听3000端口。当访问服务器时，它会显示一个HTML表单供用户上传文件。当接收到POST请求时，服务器使用formidable解析请求，并将上传的文件移动到服务器上的uploads目录下。

确保服务器运行的目录下有uploads文件夹，以便存放上传的文件。

这只是一个简单的文件上传示例，实际应用中可能需要更多的错误处理和安全措施。

node.js 常用命令71条详解

2024-08-16

所有,nodejs

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它使得JavaScript代码能在服务器端运行。以下是Node.js常用的命令：

初始化一个新的Node.js项目，创建一个新的package.json文件：




npm init

安装一个npm包：




npm install <package_name>

全局安装一个npm包：




npm install -g <package_name>

安装package.json中列出的所有依赖：




npm install

运行一个Node.js文件：




node <file_name.js>

检查Node.js代码中的语法错误：




node -c <file_name.js>

启动Node.js的交互式解释器：




node

列出所有全局安装的npm包：




npm list -g --depth 0

更新一个npm包到最新版本：




npm update <package_name>

卸载一个npm包：




npm uninstall <package_name>

列出所有npm命令：




npm help

创建一个Node.js项目的README文件：




npm init -y

清除npm缓存：




npm cache clean --force

登录npm账户：




npm login

发布一个npm包：




npm publish

查看某个npm包的详细信息：




npm info <package_name>

检查项目的依赖关系和安全性：




npm audit

安装特定版本的npm包：




npm install <package_name>@<version>

创建一个Node.js脚本文件：




touch app.js

使用Node.js的http模块创建一个简单的服务器：




// app.js
const http = require('http');
 
const hostname = '127.0.0.1';
const port = 3000;
 
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});
 
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

使用Node.js的fs模块读取文件：




const fs = require('fs');
 
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

使用Node.js的os模块获取系统信息：




const os = require('os');
 
console.log('Hostname: ' + os.hostname());
console.log('Platform: ' + os.platform());
console.log('Arch: ' + os.a

Koa: 打造高效、灵活的Node.js后端 (介绍与环境部署)

2024-08-16

所有,nodejs

Koa 是一个由 Express 创作灵感的 Node.js 框架，其设计目的是为了创建一个更小、更富有表现力、更有 fun 的 web 应用和 API 开发框架。

以下是如何安装和使用 Koa 的基本步骤：

安装 Node.js 和 npm（如果尚未安装）。
使用 npm 安装 Koa:
```
npm init -y
npm install koa
```

创建一个名为 app.js 的文件，并写入以下内容来启动一个基本的 Koa 服务器：




const Koa = require('koa');
const app = new Koa();
 
// 中间件
app.use(async (ctx) => {
    ctx.body = 'Hello Koa!';
});
 
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}.`);
});

运行你的 Koa 应用：
```
node app.js
```
打开浏览器，访问 http://localhost:3000/，你应该看到 "Hello Koa!" 的消息。

这个例子展示了如何创建一个简单的 Koa 服务器，并在其中定义了一个中间件函数，该函数响应所有请求并返回一个简单的响应。这是 Koa 框架的基本使用方法，实际应用中可能会涉及更复杂的中间件链和路由逻辑。

HTML CSS动画实现图片过渡与变换

2024-08-16




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Transition and Transform</title>
<style>
  .container {
    perspective: 1000px;
  }
  .image {
    width: 300px;
    height: 200px;
    margin: 50px;
    transition: transform 1s ease-in-out;
  }
  .image:hover {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
<div class="container">
  <img class="image" src="path_to_image.jpg" alt="Image Description">
</div>
</body>
</html>

这个简单的HTML和CSS代码示例展示了如何在鼠标悬停时使用CSS的transition和transform属性来实现图片的过渡和旋转变化。当用户将鼠标悬停在图片上时，图片将旋转180度。这是一个基本的交互动画示例，展示了如何通过简单的CSS样式增强静态网页的表现力。

ECharts-html 实训

2024-08-16

在HTML中使用ECharts创建一个简单的饼图，可以参考以下代码：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data: [
                        {value: 235, name: '视频广告'},
                        {value: 274, name: '联盟广告'},
                        {value: 310, name: '邮件营销'},
                        {value: 335, name: '直接访问'},
                        {value: 400, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
 
        myChart.setOption(option);
    </script>
</body>
</html>

这段代码首先通过<script>标签引入了ECharts的库。然后，在<body>中定义了一个div元素，该元素将用作图表的容器。接下来，使用echarts.init方法初始化ECharts实例，并设置图表的配置项option。最后，通过myChart.setOption(option)应用这些配置，渲染出一个简单的饼图。

Html给网页添加自定义水印内容

2024-08-16

在HTML页面中添加自定义水印内容，可以通过在body中添加一个绝对定位的div，并在其中设置水印文本。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Watermark</title>
<style>
  body {
    position: relative;
  }
  .watermark {
    position: fixed;
    top: 30%;
    left: 10%;
    z-index: 1000;
    font-size: 5em;
    color: rgba(0, 0, 0, 0.1);
    transform: rotate(-45deg);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
</style>
</head>
<body>
<div class="watermark">Watermark Text</div>
<!-- 页面的其他内容 -->
</body>
</html>

在这个示例中，.watermark 类定义了水印的样式，包括定位、大小、颜色、透明度、旋转等。pointer-events: none; 确保了水印不会阻挡页面上的其他交互（如点击链接），而 user-select: none; 防止了水印文本被用户选中。这个水印是固定在页面上的，但可以通过调整CSS样式来改变其位置和外观。

web前端基础入门学习教程之html中键入多个空格代码，台球物理学原理解析

2024-08-16

在HTML中，默认情况下，连续的空格会被浏览器解析为一个空格。如果你需要在页面上显示多个空格，你可以使用HTML实体 （non-breaking space）来实现。

例如，如果你想在页面上显示10个空格，你可以这样写：




&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

这将在页面上创建10个空格。每个 都代表一个空格。

如果你需要在文本中键入并显示多个连续的空格，你可以直接在HTML代码中输入它们，但要确保它们之间没有换行或其他HTML标签，因为这些也会被当作空格处理。

例如：




<p>这里有一些文本。     这里有更多的空格。</p>

在上面的例子中，尽管你在键入时在两段文本之间键入了很多空格，但是在浏览器显示时，连续的空格会被压缩成一个空格。如果你想显示多个连续空格，你需要使用 。

记住， 是非断行空格，它会保证空格，即使在行尾也不会自动换行。

itext+thyemeleaf 实现html模版生成pdf

2024-08-16

在Java中，使用iText和Thymeleaf实现HTML模板生成PDF的基本步骤如下：

添加依赖库：确保在项目的pom.xml中包含iText和Thymeleaf的依赖。




<dependency>
    <groupId>com.itextpdf</groupId>
    <artifactId>itext7-core</artifactId>
    <version>7.1.9</version>
    <type>pom</type>
</dependency>
 
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.12.RELEASE</version>
</dependency>

准备HTML模板：创建一个HTML模板文件，并使用Thymeleaf语法插入动态数据。




<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>PDF Example</title>
</head>
<body>
    <h1 th:text="${title}"></h1>
    <p th:text="${content}"></p>
</body>
</html>

使用iText和Thymeleaf生成PDF：编写Java代码将HTML模板渲染为PDF。




import com.itextpdf.html2pdf.HtmlConverter;
import com.itextpdf.kernel.pdf.PdfWriter;
import com.itextpdf.layout.element.IBlockElement;
import com.itextpdf.layout.element.List;
import com.itextpdf.layout.property.UnitValue;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
 
import java.io.*;
import java.util.ArrayList;
import java.util.List;
 
public class HtmlToPdfConverter {
 
    public static void convertToPdf(String htmlTemplatePath, String pdfOutputPath, Context context) throws IOException {
        // 加载Thymeleaf模板引擎并设置模板上下文
        TemplateEngine templateEngine = new TemplateEngine();
        Reader templateReader = new FileReader(htmlTemplatePath);
        String htmlContent = templateEngine.process("templateName", context);
 
        // 使用iText HtmlConverter将HTML转换为PDF
        Writer writer = new OutputStreamWriter(new FileOutputStream(pdfOutputPath), "UTF-8");
        HtmlConverter.convertToPdf(htmlContent, writer);
        writer.close();
    }
 
    public static void main(String[] args) throws IOException {
        // 设置Thymeleaf上下文
        Context context = new Context();
        context.setVariable("title", "PDF Title");
        context.setVariable("content", "This is a PDF generated from an HTML template.");
 
        // 调用转换方法
        convertToPdf("path/to/template.html", "path/to/output.pdf", context);
    }
}

确保替换path/to/template.html和path/to/output.pdf为实际的文件路径，并设置合适的HTML模板路径和上下文数据。

以上代码实现了一个简单的HTML模板到PDF的转换。实际应用中可能需要更复杂的配置和错误处理。

两种雪花的动态效果代码，分别使用HTML/CSS和JavaScript实现

2024-08-16

以下是使用HTML和CSS实现的雪花静态效果代码，以及使用JavaScript实现动态雪花效果的代码。

HTML/CSS 静态雪花效果:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowflakes</title>
<style>
  .snowflake {
    position: absolute;
    color: white;
    user-select: none;
    z-index: 1000;
  }
</style>
</head>
<body>
  <div class="snowflake">❄</div>
</body>
</html>

JavaScript 动态雪花效果:




// 动态雪花效果
function createSnowflake() {
  const snowflake = document.createElement('div');
  snowflake.textContent = '❄';
  snowflake.classList.add('snowflake');
  
  // 随机位置
  snowflake.style.left = Math.random() * window.innerWidth + 'px';
  snowflake.style.top = '-50px'; // 初始位置在屏幕上方
  
  document.body.appendChild(snowflake);
  
  // 下落动画
  snowflake.animate(
    [
      { top: '-50px' }, // 开始状态
      { top: `${window.innerHeight}px`} // 结束状态
    ],
    {
      duration: 5000 + Math.random() * 5000, // 随机下落时间
      easing: 'cubic-bezier(0.5, -0.5, 1, 1)', // 缓动函数
      fill: 'forwards' // 在动画结束时保持最后一帧状态
    }
  );
  
  // 动画完成后从DOM中移除
  snowflake.onfinish = () => snowflake.remove();
}
 
// 创建初始雪花
createSnowflake();
 
// 定时创建新雪花
setInterval(createSnowflake, 500);

这段JavaScript代码会在页面中定期创建新的雪花div，并给它们应用一个随机的下落动画。动画完成后，雪花会被从DOM中移除。