分类 javascript 下的文章

Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问

2024-08-07

在Node.js中，您可以使用内置的http模块来快速搭建一个简单的HTTP服务器。以下是一个示例代码，它创建了一个HTTP服务器，并且可以被公网访问：




const http = require('http');
 
// 创建HTTP服务器并定义响应逻辑
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
});
 
// 获取本机IP地址
const os = require('os');
const networkInterfaces = os.networkInterfaces();
const ipv4 = networkInterfaces.eth0[0].address; // 假设您的网络接口为eth0
 
// 设置服务器监听的端口号，这里设置为8080
const PORT = 8080;
 
// 开始监听
server.listen(PORT, ipv4, () => {
  console.log(`服务器运行在 http://${ipv4}:${PORT}/`);
});

确保您的网络接口名称（例如eth0）与实际使用的接口相匹配。

如果您想将此服务器公网远程访问，您可能需要以下几个步骤：

确保您的路由器允许外部访问端口8080（或您选择的其他端口）。
使用外网IP地址而不是内网IP地址运行您的Node.js服务器。
如果您有一个域名，您可以将此域名指向您的外网IP地址。

如果您正在使用的是云服务提供商（如AWS、Google Cloud、Azure等），您可能需要配置安全组或防火墙规则来允许流量通过端口8080。

请注意，将服务公开到公网可能会涉及安全问题，确保采取适当的安全措施，例如使用SSL/TLS加密传输的数据，设置身份验证和授权机制，以及防火墙规则等。

HOW - BFF 服务实践系列- 基于 NodeJS 实现

2024-08-07




// 引入所需的模块
const express = require('express');
const { ApolloServer } = require('apollo-server-express');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');
 
// 创建 Express 应用
const app = express();
 
// 创建 Apollo Server 实例并将其与 Express 应用集成
const server = new ApolloServer({
  typeDefs,
  resolvers,
});
server.applyMiddleware({ app });
 
// 设置端口和启动 Express 服务器
const PORT = process.env.PORT || 4000;
app.listen({ port: PORT }, () =>
  console.log(`服务器正在 http://localhost:${PORT}${server.graphqlPath}`)
);

这段代码演示了如何在 Node.js 环境中使用 Express.js 和 Apollo Server 创建一个简单的 BFF 服务。它定义了 GraphQL 的类型和解析器，并将 Apollo Server 与 Express 应用程序集成在一起，然后设置了监听端口并启动了服务器。这是构建 BFF 服务的一个基本模板。

js【深度解析】代码的执行顺序

2024-08-07

JavaScript中的代码执行顺序通常遵循以下规则：

同步代码会按照它们在代码中出现的顺序执行。
异步代码（如回调函数，setTimeout，setInterval，Promises，async/await）会在当前JavaScript执行"栈"（synchronous stack）执行完之后再执行。
事件循环（Event Loop）处理异步操作，如I/O、用户界面的事件、setTimeout等。

以下是一些示例代码，演示了这些执行顺序：




// 同步代码
console.log('同步代码1');
console.log('同步代码2');
 
// 异步代码
setTimeout(function() {
  console.log('异步代码1');
}, 0);
 
new Promise((resolve) => {
  console.log('异步代码2');
  resolve();
})
.then(() => {
  console.log('Promise中的同步代码');
})
.then(() => {
  console.log('另一个Promise中的同步代码');
});
 
// async/await 使得异步代码看起来像同步代码（但实际上是异步的）
async function asyncFunction() {
  console.log('async/await同步代码');
  await new Promise((resolve) => {
    console.log('await前的同步代码');
    resolve();
  });
  console.log('await后的同步代码');
}
asyncFunction();
 
// 结果输出顺序将是：
// 同步代码1
// 同步代码2
// 异步代码2
// async/await同步代码
// await前的同步代码
// Promise中的同步代码
// 另一个Promise中的同步代码
// await后的同步代码
// 异步代码1

在上述代码中，首先执行的是同步代码，然后是Promise中的代码，接着是async/await中的代码。最后，当事件循环执行到setTimeout时，它将异步代码放入执行"队列"（task queue），在同步代码执行完毕后再执行。

JS实现点击按钮显示倒计时

2024-08-07

在JavaScript中，你可以创建一个简单的倒计时功能，当点击一个按钮时显示倒计时。以下是实现这一功能的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时按钮</title>
<script>
// 设置倒计时的全局变量
var count = 10;
 
// 倒计时函数
function countdown() {
    var counter = document.getElementById("counter");
    counter.innerHTML = count;
    if (count > 0) {
        count--;
        // 在1秒后调用函数本身
        setTimeout(countdown, 1000);
    }
}
</script>
</head>
<body>
 
<p>倒计时: <span id="counter">10</span>秒</p>
<button onclick="countdown()">开始倒计时</button>
 
</body>
</html>

在这个例子中，当页面加载时，倒计时的初始值设置为10秒。当点击按钮时，countdown函数被触发，并且每隔1秒更新显示的倒计时数字。当倒计时结束时，计数停止。你可以根据需要调整初始的倒计时时间。

Speech JS：JavaScript 的语音识别与合成

2024-08-07

Speech JS 是一个基于 Web Speech API 的 JavaScript 库，它提供了语音识别和语音合成的功能。以下是如何使用 Speech JS 进行语音识别和合成的简单示例代码：

语音识别 (Speech Recognition):




// 引入 Speech JS 库
const speech = require('speech-js');
 
// 语音识别开始
speech.startRecognition((error, result) => {
    if (error) {
        console.error(error);
    } else {
        console.log('你说了：', result);
    }
});

语音合成 (Speech Synthesis):




// 引入 Speech JS 库
const speech = require('speech-js');
 
// 语音合成
speech.say('你好，世界！', error => {
    if (error) {
        console.error(error);
    } else {
        console.log('已经说话了。');
    }
});

请注意，以上代码假定 Speech JS 已经通过 npm 或其他方式安装到了项目中。实际使用时，可能需要在浏览器环境中使用，并确保用户允许使用麦克风和扬声器。此外，Web Speech API 的兼容性和权限设置可能会影响这些功能的使用。

2024-08-07

使用Mammoth.js将后端获取的文件流转换为HTML非常简单。以下是一个使用Node.js的示例代码：




const mammoth = require("mammoth");
 
// 假设buffer是从后端获取的文件流数据
const buffer = getFileStreamFromBackend();
 
mammoth.convertToHtml({arrayBuffer: buffer.buffer})
    .then(function(result){
        const html = result.value; // 转换生成的HTML
        // 可以选择将html写入文件或直接使用
        console.log(html);
    })
    .catch(function(err){
        // 处理错误
        console.log(err);
    });

在这个例子中，getFileStreamFromBackend() 是一个占位符，代表你从后端获取文件流的逻辑。你需要替换为实际获取文件流的代码。mammoth.convertToHtml() 方法接受一个对象，其中包含arrayBuffer属性，该属性应该是文件的ArrayBuffer形式。

确保你已经通过npm安装了mammoth.js依赖：




npm install mammoth

这段代码将.docx文件转换为HTML字符串，并在控制台中打印出来。你可以根据需要进一步处理这个HTML字符串，例如将其写入文件或者作为响应发送给客户端。

2024-08-07




# 设置npm默认淘宝镜像
npm config set registry https://registry.npm.taobao.org
 
# 使用Vue CLI创建新项目
vue create my-project
 
# 通过SSH远程管理服务器
ssh username@server_ip
 
# 踢出特定用户，例如'user_to_kick'
sudo fail2ban-client set sshd banip action=kick user_to_kick
 
# 使用SCP传输文件
scp -r local_folder_path username@server_ip:remote_folder_path

以上代码提供了如何设置npm为淘宝镜像，使用Vue CLI创建新项目，通过SSH连接到远程服务器，踢出特定用户，以及使用SCP传输文件的示例。这些都是在2024年7月17日可能会用到的技术和命令。

Nuxt.js服务器端渲染（SSR)

2024-08-07

在Nuxt.js中，可以通过在页面组件中使用asyncData方法来实现服务器端渲染。asyncData在服务器端和客户端都会被调用，但它在服务器端渲染时会将数据预填充进组件中。

以下是一个简单的例子：




<template>
  <div>
    <h1>服务器端渲染的数据: {{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  async asyncData({ params, error }) {
    try {
      const message = await fetch('https://api.example.com/data').then(res => res.json());
      return { message };
    } catch (e) {
      error({ statusCode: 500, message: '服务器错误' });
    }
  }
};
</script>

在这个例子中，当访问这个页面时，Nuxt.js会在服务器端调用asyncData方法，并将获取到的数据message预渲染到页面中。这样，用户在加载页面时会首先看到服务器送达的HTML，提升了应用的加载性能和SEO友好性。

Sortable.js板块拖拽示例

2024-08-07




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sortable.js 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
</head>
<body>
 
<ul id="items">
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
</ul>
 
<script>
    // 获取列表元素
    var el = document.getElementById('items');
    // 创建 Sortable 对象
    var sortable = new Sortable(el, {
        animation: 150, // 动画持续时间
        ghostClass: 'blue-background-class' // 设置幻影元素的类
    });
</script>
 
<style>
    .blue-background-class {
        background: lightblue;
    }
</style>
 
</body>
</html>

这段代码演示了如何使用Sortable.js创建一个可拖拽排序的列表。在HTML中，我们定义了一个ID为items的无序列表，并通过JavaScript引入了Sortable.js库，并初始化了一个Sortable实例，可以对列表中的项进行拖拽排序。通过animation属性设置了动画效果，并通过ghostClass属性定制了拖拽项的样式。