分类 javascript 下的文章

2024-08-21

Fuse.js 是一个轻量级的模糊搜索库，它允许你在 JavaScript 数组、对象数组等中进行模糊搜索。Fuse.js 不依赖任何外部库，因此可以非常轻松地集成到你的项目中。

以下是一个使用 Fuse.js 进行模糊搜索的基本示例：




// 引入 Fuse.js
const Fuse = require('fuse.js');
 
// 定义一个简单的数据集
var books = [
  {
    "title": "Old Man's War",
    "author": "John Scalzi"
  },
  {
    "title": "The Lock Artist",
    "author": "Steve Hamilton"
  },
  {
    "title": "HTML5",
    "author": "Remy Sharp"
  }
];
 
// 初始化 Fuse 并设置选项
var fuse = new Fuse(books, {
  keys: ['title', 'author'],
  threshold: 0.3 // 模糊搜索的阈值，范围从0到1，1为完全匹配
});
 
// 进行模糊搜索
var results = fuse.search("John Scalzi");
 
console.log(results); // 输出搜索结果

在这个例子中，我们定义了一个包含图书信息的简单数组。然后，我们使用这个数组初始化 Fuse 并设置搜索的键（即我们希望进行模糊匹配的字段）。最后，我们使用 search 方法来执行搜索，并将结果输出到控制台。

Fuse.js 提供了多种选项来配置搜索，包括自定义评分函数、多个搜索字段的权重等。它还支持多种语言的全文搜索，并且可以轻松地与现代 JavaScript 框架（如 Vue.js 或 React.js）集成。

System

2024-08-21

所有,javascript

报错解释：

这个错误表示在JavaScript中，一个Promise对象在执行过程中遇到了问题，导致其没有被正常解决（fulfilled），而是被拒绝（rejected）了。错误信息中的"Uncaught (in promise)"表明这个拒绝的Promise没有被捕获（即没有使用.catch()处理错误）。错误后面的"Error: Request failed with status code 404"进一步说明了问题的根源：一个HTTP请求以404状态码结束，表示所请求的资源在服务器上找不到。

解决方法：

确认请求的URL是否正确，资源是否存在于服务器上。
如果URL和资源是正确的，检查服务器端的路由配置是否正确处理了请求。
如果这个请求是可选的，可以在Promise后面加上.catch()处理错误，避免未捕获的Promise错误。
如果不希望看到这个错误，但又想保留Promise的处理逻辑，可以在Promise后面加上.catch()来捕获并处理错误，而不是让它抛出未捕获的错误。

示例代码：




fetch('some/url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error('An error occurred:', error);
    // 在这里处理错误，例如显示错误信息给用户
  });

在这个示例中，我们在请求的Promise链中加入了.catch()，这样即使发生错误，也不会导致未捕获的Promise错误。

- 阅读更多 -

Vue + JS + tauri 开发一个简单的PC端桌面应用程序

System

2024-08-21

所有,javascript

为了创建一个简单的桌面应用程序，我们需要以下步骤：

安装Tauri工具和Vue CLI。
创建一个Vue项目。
集成Tauri。
编写前端代码。
构建并运行应用程序。

以下是具体步骤的示例代码：




# 安装Tauri工具
cargo install tauri-cli
 
# 安装Vue CLI
npm install -g @vue/cli
 
# 创建一个新的Vue项目
vue create my-tauri-app
 
# 进入项目目录
cd my-tauri-app
 
# 集成Tauri
tauri init
 
# 安装依赖
npm install

在src/main.js中，你可以写入基本的Vue代码来展示你的应用程序界面：




// src/main.js
import Vue from 'vue'
import App from './App.vue'
 
new Vue({
  render: h => h(App),
}).$mount('#app')

在src/App.vue中，添加一些基本的HTML来展示你的应用程序：




<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Hello, Tauri Desktop App!</h1>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

最后，构建并运行你的Tauri应用程序：




# 构建Vue项目
npm run build
 
# 运行Tauri应用程序
tauri dev

这样，你就拥有了一个简单的桌面应用程序，它可以通过Tauri在桌面上运行Vue构建的前端界面。

- 阅读更多 -

使用js的正则表达式匹配字符串里的url，并对url进行修改后替换原来的url

System

2024-08-21

所有,javascript

要使用JavaScript的正则表达式匹配字符串中的URL，并对这些URL进行修改后替换原来的URL，可以使用String.prototype.replace()方法配合正则表达式。以下是一个简单的例子：




function modifyAndReplaceUrls(text, modifyFunction) {
  const urlRegex = /https?:\/\/[^ ]+/g; // 匹配URL的正则表达式
  return text.replace(urlRegex, function(url) {
    return modifyFunction(url); // 调用修改函数
  });
}
 
// 示例修改函数，添加查询参数
function addQueryParam(url, key, value) {
  const updatedUrl = new URL(url);
  updatedUrl.searchParams.set(key, value);
  return updatedUrl.toString();
}
 
// 示例字符串
const originalText = "Here are some URLs: https://example.com and https://google.com";
 
// 使用修改函数和正则表达式替换字符串中的URL
const modifiedText = modifyAndReplaceUrls(originalText, (url) => addQueryParam(url, 'foo', 'bar'));
 
console.log(modifiedText);

在这个例子中，modifyAndReplaceUrls函数接受一个文本和一个修改函数。修改函数接受一个URL并返回修改后的URL。addQueryParam函数接受一个URL，添加查询参数，然后返回修改后的URL。replace方法会在文本中查找所有符合正则表达式的URL，并用修改后的URL替换它们。

- 阅读更多 -

HTML、CSS、JS浅浅浅浅浅解

System

2024-08-21

所有,javascript

HTML、CSS、JS的简单解释和示例代码如下：

HTML (Hyper Text Markup Language):

HTML是用来创建网页的标准标记语言。它定义了网页内容的结构。




<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

CSS (Cascading Style Sheets):

CSS用于定义网页的布局和样式。




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
p {
    color: green;
}

JS (JavaScript):

JavaScript是一种编程语言，用于增加网页的交互性。




function showAlert() {
    alert('你好，欢迎点击按钮！');
}
 
document.querySelector('button').addEventListener('click', showAlert);

HTML定义了网页的结构，CSS用于装饰页面，而JavaScript用于实现网页的行为。这三者结合使用，可以创建一个富有交互性和视觉吸引力的网页。

- 阅读更多 -

用 Next.js 和 Supabase 进行“全栈”开发的入门

System

2024-08-21

所有,javascript




import { createClient } from '@supabase/supabase-js'
 
// 使用你的 Supabase URL 和 ACCESS_KEY
const supabase = createClient('你的SupabaseURL', '你的ACCESS_KEY')
 
// 在 Next.js 的 getServerSideProps 中使用 Supabase
export async function getServerSideProps(context) {
  try {
    const { data, error } = await supabase
      .from('你的表名')
      .select('*')
 
    if (error) {
      throw error
    }
 
    return {
      props: {
        data: data || [] // 如果没有数据，返回空数组
      }
    }
  } catch (error) {
    return {
      props: {
        error: error.message
      }
    }
  }
}
 
// 在 Next.js 页面中使用获取的数据
export default function Home({ data, error }) {
  if (error) {
    return <div>Error: {error}</div>
  }
 
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li> // 假设你的表有 id 和 name 字段
      ))}
    </ul>
  )
}

这个代码示例展示了如何在 Next.js 的服务器端获取 Supabase 数据库中的数据，并将其作为 props 传递到页面组件中。同时，展示了错误处理和条件渲染的实践。

System

2024-08-21

所有,javascript




// 父页面脚本
 
// 监听子页面发送的消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://child.example.com') return; // 确保消息来源可信
  if (event.data.type === 'resize') {
    // 根据子页面发送的数据调整父页面的布局
    document.body.style.width = event.data.width + 'px';
    document.body.style.height = event.data.height + 'px';
  }
});
 
// 向子页面发送消息
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
  iframe.contentWindow.postMessage({ type: 'getDimensions' }, 'http://child.example.com');
};
 
// 子页面脚本
 
// 监听父页面发送的消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://parent.example.com') return; // 确保消息来源可信
  if (event.data.type === 'getDimensions') {
    // 计算需要发送给父页面的数据
    var dimensions = { type: 'resize', width: document.body.scrollWidth, height: document.body.scrollHeight };
    // 发送尺寸数据给父页面
    window.parent.postMessage(dimensions, 'http://parent.example.com');
  }
});

这个示例展示了如何在遵守同源策略的前提下，通过postMessage方法实现跨文档（父子）通信。父页面监听子页面发送的消息，并根据接收到的数据调整自身布局。子页面也监听父页面发送的消息，并在需要时向父页面发送数据。这里使用了event.origin来确保消息的来源是安全可信的，避免了潜在的安全问题。

- 阅读更多 -

利用宝塔面板搭建nodejs网站（不使用pm2）

System

2024-08-21

所有,javascript

要在宝塔面板上不使用PM2搭建Node.js网站，你可以直接使用Nginx作为反向代理来连接Node.js应用。以下是简化的步骤和示例配置：

安装Node.js和Nginx。
创建Node.js应用并运行。
配置Nginx反向代理。

以下是示例步骤：

在宝塔面板安装Node.js和Nginx。
创建Node.js应用，例如使用Express框架。




const express = require('express');
const app = express();
 
app.get('/', (req, res) => {
  res.send('Hello, World!');
});
 
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

在宝塔面板中配置Nginx反向代理。

假设你的Node.js应用运行在3000端口，你需要在宝塔面板的Nginx配置文件中添加以下配置：




server {
    listen 80;
    server_name your_domain.com;
 
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        
        proxy_pass http://127.0.0.1:3000;
        proxy_redirect off;
    }
}

保存配置并重启Nginx。

现在，你可以通过域名访问你的Node.js网站而不需要使用PM2，因为Nginx作为代理服务器会直接连接到Node.js应用。

System

2024-08-21

所有,javascript

在Next.js 14中使用App Router时，如果你遇到了与farmer-motion初始化相关的异常，可能是因为你尝试在_app.js或_document.js中引入和使用farmer-motion的动画特性时出现了问题。

farmer-motion是一个用于创建复杂动画的库，它依赖于@farmerbot/farm-animations这样的库来实现动画效果。在Next.js中，如果你在服务端渲染(SSR)的环境中直接引入这样的客户端依赖，可能会导致服务端渲染(SSR)失败。

解决方法通常涉及到客户端依赖的动态引入，以确保动画逻辑只在客户端执行。你可以使用useEffect钩子来确保只在客户端渲染后初始化动画。

以下是一个示例代码，展示了如何在Next.js的_app.js中动态引入farmer-motion并进行初始化：




// _app.js
import { useEffect } from 'react';
 
function App({ Component, pageProps }) {
  useEffect(() => {
    // 动态导入farmer-motion依赖
    import('farmer-motion').then((farmerMotion) => {
      // 初始化动画
      farmerMotion.init();
    });
  }, []);
 
  return <Component {...pageProps} />;
}
 
export default App;

在这个例子中，useEffect用于确保动画的初始化只在客户端之后执行，import()函数用于代码分割，以便动态地引入farmer-motion。这样，你就可以在Next.js 14的App Router中使用farmer-motion，而不会在服务端遇到异常。

- 阅读更多 -

el-popover 通过js手动控制弹出框显示、隐藏

System

2024-08-21

所有,javascript

在Vue.js中，可以使用ref属性来引用el-popover组件，并通过组件实例的show和hide方法来控制弹出框的显示和隐藏。

以下是一个简单的例子：




<template>
  <div>
    <el-popover
      ref="popover"
      content="这是一段内容, 这是一段内容, 这是一段内容."
      title="标题"
      placement="top"
      width="200"
      trigger="manual"
    >
      <el-button slot="reference">手动触发</el-button>
    </el-popover>
 
    <el-button @click="showPopover">显示弹出框</el-button>
    <el-button @click="hidePopover">隐藏弹出框</el-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    showPopover() {
      this.$refs.popover.show();
    },
    hidePopover() {
      this.$refs.popover.hide();
    }
  }
};
</script>

在这个例子中，el-popover组件被赋予了一个ref属性，值为"popover"。通过this.$refs.popover可以访问到该组件的实例。trigger属性设置为manual以允许通过代码控制弹出框的显示和隐藏。showPopover方法调用this.$refs.popover.show()来显示弹出框，hidePopover方法调用this.$refs.popover.hide()来隐藏弹出框。

- 阅读更多 -