标签 Javascript 下的文章

2024-08-23

在JavaScript中，有七个内置方法可以改变原数组：

pop()：从数组末尾移除最后一个元素，并返回该元素。
push()：在数组末尾添加一个或多个元素，并返回新的长度。
shift()：从数组开头移除第一个元素，并返回该元素。
unshift()：在数组开头添加一个或多个元素，并返回新的长度。
reverse()：颠倒数组中元素的顺序。
sort()：对数组的元素进行排序。
splice()：通过删除现有元素和/或添加新元素来更改一个数组的内容。

以下是每个方法的简单示例：




let arr = [1, 2, 3];
 
// pop(): 移除最后一个元素
arr.pop(); // 返回 3
console.log(arr); // 输出 [1, 2]
 
// push(): 添加元素到末尾
arr.push(4); // 返回 3
console.log(arr); // 输出 [1, 2, 4]
 
// shift(): 移除第一个元素
arr.shift(); // 返回 1
console.log(arr); // 输出 [2, 4]
 
// unshift(): 添加元素到开头
arr.unshift(0); // 返回 3
console.log(arr); // 输出 [0, 2, 4]
 
// reverse(): 颠倒数组顺序
arr.reverse(); // 返回 [4, 2, 0]
console.log(arr); // 输出 [4, 2, 0]
 
// sort(): 对元素进行排序
arr.sort((a, b) => a - b); // 返回 [0, 2, 4]
console.log(arr); // 输出 [0, 2, 4]
 
// splice(): 更改数组内容
arr.splice(1, 1, 'a', 'b'); // 从索引1开始，移除1个元素，然后从索引1开始插入'a'和'b'
console.log(arr); // 输出 [0, 'a', 'b', 4]

以上代码展示了如何使用这七个方法来改变原数组。注意，这些方法将直接修改原数组，而不是返回一个新的数组。

- 阅读更多 -

探索Node.js中的TensorFlow：一个高效、灵活的深度学习平台

System

2024-08-23

所有,nodejs




// 引入TensorFlow的核心模块
const tf = require('@tensorflow/tfjs-node');
 
// 创建一个Tensor，包含随机生成的数据
const randomTensor = tf.randomNormal([2, 2]);
 
// 打印Tensor内容
randomTensor.print();
 
// 执行Tensor的加法操作
const result = tf.add(randomTensor, tf.scalar(2));
 
// 打印加法结果
result.print();
 
// 释放Tensor占用的内存
randomTensor.dispose();
result.dispose();

这段代码演示了如何在Node.js环境中使用TensorFlow.js创建一个随机的Tensor，打印其内容，执行一个简单的加法操作，并最终释放所占用的资源。这是一个典型的机器学习任务的流程，展示了如何在实际应用中使用TensorFlow.js。

- 阅读更多 -

Vue脚手架安装和部署搭建本地的Node.js服务

System

2024-08-23

所有,nodejs

要使用Vue脚手架安装和部署项目，请按照以下步骤操作：

确保你已经安装了Node.js和npm。可以通过在终端运行以下命令来检查是否已安装：
```
node -v
npm -v
```
安装Vue CLI。Vue CLI是一种基于Vue.js进行快速开发的完整系统：
```
npm install -g @vue/cli
```
创建一个新的Vue项目。这里以my-project为例：
```
vue create my-project
```
跟随终端中的指示完成项目的创建。
进入项目目录：
```
cd my-project
```
运行项目：
```
npm run serve
```
如果你想要构建项目以供部署，可以运行：
```
npm run build
```

构建的dist目录包含了可以部署的静态文件。

以上步骤可以快速搭建一个本地的Vue.js开发环境，并且展示了如何部署你的Vue项目。

- 阅读更多 -

推荐项目：Node.js Memcached客户端

System

2024-08-23

所有,nodejs

在Node.js中，有多个可用的Memcached客户端库，其中一些是memcached和memjs。

memcached

memcached是一个简单的Memcached客户端，它提供了基础的操作，但是它不支持分布式。

安装：




npm install memcached

示例代码：




var memcached = require('memcached');
var client = memcached('localhost:11211');
 
client.set('foo', 'bar', 1000, function(err, success) {
  client.get('foo', function(err, data) {
    console.log(data); // 输出: bar
  });
});

memjs

memjs是一个更加健壮和现代的Memcached客户端，它支持分布式和一些高级特性，如二进制协议和一致性哈希。

安装：




npm install memjs

示例代码：




const Memjs = require('memjs');
 
const server1 = { host: 'localhost', port: 11211 };
const client = Memjs.Client.create(server1);
 
client.set('foo', 'bar', { expire: 60 }, (err, result) => {
  if (err) throw err;
 
  client.get('foo', (err, result) => {
    if (err) throw err;
 
    console.log(result.value); // 输出: bar
  });
});

在选择哪一个客户端时，你需要考虑你的需求和环境。例如，如果你需要分布式缓存或者更高级的特性，memjs可能更适合。而如果你只需要一个简单的Memcached客户端，memcached可能会更加适合。

- 阅读更多 -

iis部署前后端分离项目（React前端，Node.js后端）

System

2024-08-23

所有,nodejs

在IIS上部署前后端分离的项目，前端使用React，后端使用Node.js，你需要做以下几步：

构建前端React项目：
在React项目目录下运行 npm run build，构建生成静态文件。
配置Node.js后端项目：
确保你的Node.js后端项目可以通过某个端口独立运行。
配置IIS：
- 在IIS管理器中创建一个新的网站或者使用现有网站。
- 将构建好的React静态文件复制到网站的根目录下。
- 配置网站属性中的HTTP响应特性，添加MIME类型以支持JavaScript、CSS和图片文件。
- 为Node.js后端服务创建反向代理规则，将特定路径的请求转发到Node.js服务器。
启动Node.js后端服务：
确保你的Node.js服务器在一个端口上运行，并且可以接收来自IIS的转发请求。
配置Node.js以接收来自IIS的转发请求：
确保Node.js服务器监听的是特定的端口，并且可以接收来自IIS的转发请求。
测试：
在浏览器中输入IIS网站的URL，检查前端页面是否正确加载，同时检查API请求是否通过IIS转发到Node.js服务器并得到响应。

以下是一个简化的示例，展示如何在IIS中配置反向代理，将API请求转发到Node.js服务器：




<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
    <rewrite>
      <rules>
        <rule name="API Proxy" stopProcessing="true">
          <match url="^api/(.*)$" />
          <action type="Rewrite" url="http://localhost:3000/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

在这个例子中，所有到 /api 路径的请求都会被重写并转发到运行在localhost的3000端口的Node.js服务器。确保修改 url="http://localhost:3000/{R:1}" 为你的Node.js服务器实际地址和端口。

- 阅读更多 -

【实战】nodejs 必会技能 —— 封装 mysql 数据库连接

System

2024-08-23

所有,nodejs




// 引入mysql模块
const mysql = require('mysql');
 
// 创建数据库连接池
const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'example.org',
  user: 'username',
  password: 'password',
  database: 'dbname',
});
 
// 查询方法
function query(sql, values, callback) {
  pool.query(sql, values, (error, results, fields) => {
    if (error) throw error;
    callback(results, fields);
  });
}
 
// 关闭连接池
function end() {
  pool.end();
}
 
// 导出查询和关闭方法
module.exports = { query, end };
 
// 使用方法示例
const db = require('./database');
 
// 执行查询
db.query('SELECT * FROM users WHERE id = ?', [1], (results, fields) => {
  console.log(results);
});
 
// 关闭连接池
db.end();

这段代码演示了如何在Node.js中使用mysql模块创建数据库连接池，并封装了一个简单的查询方法和关闭连接池的方法。使用时，只需要引入这个模块，并调用相应的方法即可。这样可以确保数据库连接的高效复用，并简化代码结构。

System

2024-08-23

所有,nodejs

以下是一个伪CICD脚本的示例，它模拟了自动构建和部署Next.js和Node.js项目的过程：




#!/bin/bash
# 伪CICD脚本模拟自动构建和部署Next.js和Node.js项目
 
# 安装依赖并构建Next.js项目
echo "安装依赖并构建Next.js项目"
cd nextjs_project
npm install
npm run build
 
# 安装Node.js项目依赖并启动
echo "安装Node.js项目依赖并启动"
cd ../nodejs_project
npm install
npm start

这个脚本首先会进入Next.js项目目录，安装依赖并构建项目，然后进入Node.js项目目录，安装依赖并启动项目。这个脚本是为了演示CICD流程的一个简化示例，在实际的CI/CD环境中，构建和部署步骤会更复杂，并且会涉及到版本控制、测试、环境变量管理等多个方面。

- 阅读更多 -

HTML+JavaScript实现随机点名｜随机抽奖效果-demo

System

2024-08-23

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>随机点名 | 随机抽奖效果</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f1f1f1;
        }
        .name-container {
            text-align: center;
            font-size: 24px;
            color: #333;
        }
        .button-container {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="name-container">
        <p id="studentName"></p>
    </div>
    <div class="button-container">
        <button id="startButton">开始</button>
        <button id="stopButton">停止</button>
    </div>
    <script>
        var timer;
        var students = ["张三", "李四", "王五", "赵六", "孙七"];
 
        function getRandomStudent() {
            var index = Math.floor(Math.random() * students.length);
            return students[index];
        }
 
        function startCalling() {
            timer = setInterval(function() {
                var studentName = getRandomStudent();
                document.getElementById("studentName").textContent = studentName;
            }, 100); // 间隔时间可以根据需要调整
        }
 
        function stopCalling() {
            clearInterval(timer);
        }
 
        document.getElementById("startButton").addEventListener("click", startCalling);
        document.getElementById("stopButton").addEventListener("click", stopCalling);
    </script>
</body>
</html>

这段代码实现了一个随机点名的效果。用户点击"开始"按钮后，会无限循环随机显示学生名字。点击"停止"按钮后，会停止显示学生名字。这个简单的示例展示了如何使用JavaScript的定时器功能和随机函数来实现有趣的交互效果。

- 阅读更多 -

原生js实现下拉框，支持多选、搜索

System

2024-08-23

所有,css

以下是一个使用原生JavaScript实现的简单下拉框，支持多选和搜索的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Select Dropdown with Search</title>
<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content label {
    display: block;
  }
  .dropdown-content label:hover {
    background-color: #f1f1f1;
  }
  .show {display: block;}
</style>
</head>
<body>
 
<div class="dropdown">
  <input type="text" id="myInput" onkeyup="filterFunction()" placeholder="Search.." title="Type in a name">
  <div id="myDropdown" class="dropdown-content">
    <label><input type="checkbox" name="vehicle" value="Bike"> Bike</label>
    <label><input type="checkbox" name="vehicle" value="Car"> Car</label>
    <label><input type="checkbox" name="vehicle" value="Boat"> Boat</label>
    <label><input type="checkbox" name="vehicle" value="Airplane"> Airplane</label>
  </div>
</div>
 
<script>
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("label");
 
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>
 
</body>
</html>

这段代码实现了一个简单的下拉框，用户可以通过输入来搜索和筛选选项。当用户在搜索框中输入时，下拉内容会根据用户的输入实时更新显示。选中的选项（复选框）会被提交，以便在表单提交时使用。

System

2024-08-23

所有,ajax

以下是一个简化的Spring MVC + Spring + MyBatis项目的Maven依赖配置示例，它展示了如何使用注解来简化配置：




<properties>
    <spring.version>5.3.13</spring.version>
    <mybatis.version>3.5.9</mybatis.version>
    <mysql.connector.version>8.0.26</mysql.connector.version>
</properties>
 
<dependencies>
    <!-- Spring MVC -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>${spring.version}</version>
    </dependency>
 
    <!-- Spring AOP -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-aop</artifactId>
        <version>${spring.version}</version>
    </dependency>
 
    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>${mybatis.version}</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.7</version>
    </dependency>
 
    <!-- MySQL Connector -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>${mysql.connector.version}</version>
    </dependency>
 
    <!-- Jackson for JSON -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.13.0</version>
    </dependency>
 
    <!-- Logging -->
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-log4j12</artifactId>
        <version>1.7.36</version>
    </dependency>
</dependencies>

Spring配置示例（applicationContext.xml）:




<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/context
                           http://www.springframework.org/schema/context/spring-context.xsd">
 
    <context:component-scan base-package="com.yourpackage" />
 
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="dr

- 阅读更多 -