标签 Javascript 下的文章

在Jenkins 中使用 NVM 管理 Node.js 部署项目的自动化脚本

2024-08-07

所有,nodejs




# 使用NVM安装并使用Node.js版本，然后运行npm命令来部署项目
 
# 下载NVM安装脚本
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
# 在脚本中使用nvm安装特定版本的Node.js并使用它
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 
# 安装并使用Node.js
nvm install 14.18
nvm use 14.18
 
# 在项目目录内运行npm命令进行部署
cd /path/to/your/project
npm run deploy

这个简化版的脚本展示了如何在Jenkins中使用NVM来安装和使用Node.js版本，然后在特定的项目目录下运行npm命令进行部署。这是一个典型的Jenkins项目部署流程的实践示例。

【Node.js操作SQLite指南】

2024-08-07

所有,nodejs




// 引入SQLite模块
const sqlite3 = require('sqlite3').verbose();
 
// 创建或打开数据库
let db = new sqlite3.Database('./database.sqlite3', (err) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log('Connected to the SQLite database.');
  }
});
 
// 创建表
db.run(`
  CREATE TABLE IF NOT EXISTS messages (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    content TEXT,
    created_at DATE DEFAULT (datetime('now', 'localtime'))
  )
`, (err) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log('Messages table created or already exists.');
  }
});
 
// 插入数据
const insertStatement = `
  INSERT INTO messages (title, content)
  VALUES (?, ?)
`;
 
db.run(insertStatement, ['Hello World', 'This is a message.'], (err) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log('A row has been inserted.');
  }
});
 
// 查询数据
db.all('SELECT id, title, content, created_at FROM messages', (err, rows) => {
  if (err) {
    console.error(err.message);
  } else {
    rows.forEach((row) => {
      console.log(row);
    });
  }
});
 
// 关闭数据库连接
db.close((err) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log('Close the database connection.');
  }
});

这段代码展示了如何在Node.js中使用sqlite3模块来进行基本的数据库操作，包括创建或打开数据库、创建表、插入数据、查询数据以及关闭数据库连接。这对于开发者学习和理解如何在Node.js环境中管理数据库非常有帮助。

node.js与npm的版本与Vue2和Vue3版本运行，nvm的使用

2024-08-07

所有,nodejs

在使用Node.js和npm时，通常会遇到需要安装或切换不同版本的情况，这时候nvm（Node Version Manager）就派上用场了。以下是如何使用nvm管理Node.js和npm版本，并根据不同的Vue版本安装和运行项目的步骤。

安装nvm：

在Linux和macOS上，可以使用curl或wget来安装：




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 或者
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

在Windows上，可以使用nvm-windows：




https://github.com/coreybutler/nvm-windows/releases

安装Node.js和npm：




nvm install node # 安装最新版本的Node.js和npm
nvm install 14  # 安装特定版本的Node.js
nvm use 14      # 切换到特定版本的Node.js

根据Vue版本安装Vue CLI：




npm install -g @vue/cli
# 如果是Vue 2项目
npm install -g @vue/cli-init
vue init webpack my-project-name

对于Vue 3项目：




npm install -g @vue/cli
vue create my-project-name

运行Vue项目：
```
cd my-project-name
npm run serve
```

以上步骤展示了如何使用nvm管理Node.js和npm版本，并安装和运行Vue 2和Vue 3项目。这样可以避免不同项目之间的版本冲突，保证开发环境的稳定性和一致性。

html css js实现无缝轮播图思路及其实现

2024-08-07

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无缝轮播图</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
    overflow: hidden;
  }
  .slider img {
    width: 300px;
    height: 200px;
    position: absolute;
    transition: transform 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img src="image1.jpg" alt="Image 1" class="active">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;
 
  function showImage(index) {
    images[currentIndex].style.transform = 'translateX(100%)';
    images[index].style.transform = 'translateX(0)';
    currentIndex = index;
  }
 
  function nextImage() {
    const nextIndex = (currentIndex + 1) % imageCount;
    showImage(nextIndex);
  }
 
  function startSlider() {
    setInterval(nextImage, 3000);
  }
 
  startSlider();
</script>
 
</body>
</html>

这个简单的无缝轮播图示例使用了基本的HTML、CSS和JavaScript。轮播图中有三张图片，每张图片都是绝对定位的，并且初始都在左侧（translateX(100%)）。当轮播开始时，当前活动图片会移动到右侧（translateX(0)），而下一张图片会移动到视图中（translateX(100%)变为translateX(0)）。这个例子使用了简单的模运算来处理图片的索引循环。

nuxt.js中使用axios以及二次封装

2024-08-07

在Nuxt.js中使用axios并进行二次封装，可以通过以下步骤实现：

安装axios:




npm install axios

在plugins目录下创建axios.js文件，并编写二次封装的代码:




// plugins/axios.js
import axios from 'axios';
 
let axiosInstance = axios.create({
  baseURL: 'http://your-api-url/',
  // 其他配置...
});
 
// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 可以在这里添加例如token等请求头
  // if (store.state.token) {
  //   config.headers.common['Authorization'] = `Bearer ${store.state.token}`;
  // }
  return config;
}, error => {
  return Promise.reject(error);
});
 
// 添加响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 对响应数据做处理
  return response.data;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});
 
export default axiosInstance;

在nuxt.config.js中配置axios插件:




// nuxt.config.js
export default {
  // ...
  plugins: [
    '@/plugins/axios'
  ],
  // ...
}

在组件或页面中使用封装后的axios实例:




// 在组件中
export default {
  async fetch() {
    const response = await this.$axios.get('/your-endpoint');
    this.data = response;
  }
}

通过以上步骤，你可以在Nuxt.js项目中使用二次封装的axios实例，并能够方便地在请求和响应中添加全局的处理逻辑。

2024-08-07

Highlight.js 和 Markdown-it 是两个常用的JavaScript库，分别用于代码高亮和Markdown解析。以下是如何将它们结合使用的示例代码：

首先，确保在你的项目中包含了这两个库的CSS和JavaScript文件。
在HTML文件中，创建一个容器来显示高亮后的代码和解析后的Markdown。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight.js and Markdown-it Example</title>
    <link rel="stylesheet" href="path/to/highlight.js/styles/default.css">
    <script src="path/to/highlight.js/highlight.pack.js"></script>
    <script src="path/to/markdown-it.js"></script>
</head>
<body>
    <div id="code-container"></div>
    <div id="markdown-container"></div>
    <script>
        // 初始化Markdown-it
        var md = markdownit();
 
        // 初始化Highlight.js
        hljs.initHighlightingOnLoad();
 
        window.onload = function() {
            // 示例代码
            var code = '```javascript\nconsole.log("Hello, World!");\n```';
 
            // 将代码放入代码容器
            document.getElementById('code-container').innerHTML = code;
 
            // 解析Markdown并放入Markdown容器
            document.getElementById('markdown-container').innerHTML = md.render(code);
        };
    </script>
</body>
</html>

在这个例子中，我们首先在HTML的<head>部分包含了Highlight.js和Markdown-it的CSS和JavaScript文件。然后，在<body>中创建了两个<div>容器，分别用于显示高亮后的代码和解析后的Markdown。在<script>标签中，我们初始化了Markdown-it，并在页面加载完成后通过Highlight.js的initHighlightingOnLoad函数进行代码高亮。最后，我们使用Markdown-it的render函数将代码块解析为HTML，并将其显示在页面上。

2024-08-07

AST-HOOK是一种用于JavaScript的逆向工程技术，它允许开发者在JavaScript的抽象语法树(AST)级别进行代码分析和操作。

在这里，我们将使用ast-hook-for-js-re库来实现一个简单的内存漫游的例子。首先，我们需要安装这个库：




npm install ast-hook-for-js-re

下面是一个简单的使用ast-hook-for-js-re的例子，它会在AST层面修改一个函数的行为，使其在执行时打印一条特定的消息：




const hook = require('ast-hook-for-js-re');
 
// 要修改的JavaScript代码
const code = `
function add(a, b) {
  return a + b;
}
`;
 
// 创建一个hook实例
const hookInstance = hook(code);
 
// 定义一个钩子函数，它会在add函数执行时被调用
const hookedAdd = hookInstance.hookFunction('add', function(args, original) {
  console.log('Function add is about to be called with arguments:', args);
  // 调用原始函数
  const result = original(...args);
  console.log('Function add has been called with result:', result);
  // 返回结果
  return result;
});
 
// 执行修改后的代码
const addResult = hookInstance.exec(); // 这将执行add函数，并应用了我们的钩子函数
 
// 打印结果
console.log(addResult); // 这将输出我们在钩子函数中记录的信息

在这个例子中，我们首先导入了ast-hook-for-js-re库，然后定义了一些JavaScript代码。接着，我们使用hook函数创建了一个hook实例，并使用hookFunction方法钩住了add函数的执行。在hookFunction方法中，我们记录了函数调用的参数和结果，并在函数执行前后打印了相关信息。最后，我们执行了修改后的代码，并打印了结果。

这个例子展示了如何使用AST-HOOK进行代码的逆向工程和修改，这在进行安全研究、逆向工程和调试等领域有着广泛的应用。

Vue3+NodeJS 接入文心一言，发布一个 VSCode 大模型问答插件

2024-08-07

以下是一个简化的示例，展示如何在Vue3和NodeJS环境中接入文心一言，并创建一个VSCode插件用于提供大模型问答服务。




// Vue3 前端部分，简单的问答界面
<template>
  <div>
    <input v-model="query" placeholder="输入你的问题" />
    <button @click="askQuestion">提问</button>
    <div v-if="answer">{{ answer }}</div>.
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import axios from 'axios';
 
const query = ref('');
const answer = ref('');
 
async function askQuestion() {
  try {
    const response = await axios.post('/api/ask-question', { query: query.value });
    answer.value = response.data.answer;
  } catch (error) {
    console.error('问答失败:', error);
  }
}
</script>




// NodeJS 后端部分，处理前端请求并转发至文心一言
const express = require('express');
const axios = require('axios');
 
const app = express();
const port = 3000;
 
app.use(express.json());
 
app.post('/api/ask-question', async (req, res) => {
  try {
    const { query } = req.body;
    const response = await axios.post('https://aip.baidubce.com/rpc/2.0', {
      // 文心一言的请求参数
    });
    const answer = response.data.result; // 假设文心一言的响应格式
    res.json({ answer });
  } catch (error) {
    console.error('调用文心一言失败:', error);
    res.status(500).json({ error: '服务器错误' });
  }
});
 
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

以上代码仅为示例，具体实现时需要根据文心一言的API文档填充请求参数和处理响应。在实际部署时，还需要处理身份验证、错误处理、缓存等问题。此外，VSCode插件的具体实现会有所不同，需要遵循VSCode的插件开发规范。

Node.js 基于HTML的企业进销存管理系统

2024-08-07

所有,html

由于这个项目涉及的代码量较大且涉及商业敏感信息，我无法提供完整的代码实例。但我可以提供一个简化的Express服务器初始化的例子，这个例子展示了如何使用Express框架来设置一个简单的服务器，并且如何在服务器中定义路由来响应HTTP请求。




const express = require('express');
const app = express();
const port = 3000;
 
// 中间件，用于解析URL编码的请求体
app.use(express.urlencoded({ extended: true }));
 
// 中间件，用于提供静态文件服务
app.use(express.static('public'));
 
// 主页路由
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
 
// 监听指定端口
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

这个代码实例展示了如何设置一个简单的Express服务器，并且如何定义一个主页路由和一个用于提供静态文件服务的中间件。这个例子不包含数据库连接和业务逻辑处理，但它可以作为开始学习如何使用Node.js和Express创建Web应用的起点。在实际应用中，你需要根据具体需求添加数据库集成、用户认证、业务逻辑处理等功能。