标签 Javascript 下的文章

2024-08-23




// 引入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

- 阅读更多 -

lister.js渐进式化4:ajax的调用与封装

System

2024-08-23

所有,ajax




// 引入lister.js库
import Lister from './lister.js';
 
// 创建Lister实例
const lister = new Lister();
 
// 定义ajax函数，使用Promise封装
lister.ajax = function(url, method = 'GET', data = null) {
  // 返回一个Promise
  return new Promise((resolve, reject) => {
    // 创建一个XMLHttpRequest对象
    const xhr = new XMLHttpRequest();
 
    // 配置请求
    xhr.open(method, url);
 
    // 如果是POST请求，设置请求头
    if (method === 'POST') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
 
    // 发送请求
    xhr.send(data);
 
    // 监听请求完成
    xhr.onload = function() {
      if (this.status >= 200 && this.status < 300) {
        // 请求成功，解析响应并调用resolve
        resolve(JSON.parse(this.response));
      } else {
        // 请求失败，调用reject
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
 
    // 监听请求错误
    xhr.onerror = function() {
      // 请求出错，调用reject
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
  });
};
 
// 使用ajax函数发送请求
lister.ajax('https://api.example.com/data', 'GET')
  .then(response => {
    console.log('请求成功:', response);
    // 处理响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);
    // 处理错误
  });

这段代码首先引入了lister.js库，并创建了一个Lister实例。然后，定义了一个ajax函数，使用Promise封装了XMLHttpRequest请求。该函数可以发送GET或POST请求，并在请求成功或失败时调用resolve或reject。最后，使用lister实例的ajax函数发送了一个GET请求，并在Promise中处理了响应或错误。

System

2024-08-23

所有,ajax

这是一个基于JavaWeb技术栈的SSM（Spring MVC + Spring + MyBatis）框架的茶叶商城管理系统。由于代码量较大，我将提供一些核心代码片段和配置文件的示例。

核心配置文件applicationContext.xml：




<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <!-- 数据库连接池 -->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/tea_store"/>
        <property name="username" value="root"/>
        <property name="password" value="password"/>
    </bean>
 
    <!-- 配置SqlSessionFactory -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>
 
    <!-- 配置Mapper扫描器 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.example.mapper"/>
    </bean>
 
    <!-- 事务管理器配置, 使用DataSourceTransactionManager -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
 
    <!-- 开启注解事务管理 -->
    <tx:annotation-driven transaction-manager="transactionManager"/>
 
</beans>

核心控制器类TeaController.java：




package com.example.controller;
 
import com.example.model.Tea;
import com.example.service.TeaService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
@Controller
@RequestMapping("/tea")
public class TeaController {
 
    @Autowired
    private TeaService teaService;
 
    @RequestMapping(value = "/list", method = RequestMethod.GET)
    public String listTeas(Model model) {
        model.addAttribute("teas", teaService.findAll());
        return "tea_list";
    }
 
    // 其他CRUD操作的映射
}

服务层接口TeaService.java：




package com.example.service;
 
import com.example.mod

System

2024-08-23

所有,ajax

在Node.js中解决跨域问题，可以使用一个名为cors的中间件库。以下是一个简单的例子，展示如何在一个Express应用中设置CORS头部来允许跨域请求。

首先，你需要安装cors库：




npm install cors

然后，在你的Node.js代码中使用它：




const express = require('express');
const cors = require('cors');
 
const app = express();
 
// 使用cors中间件
app.use(cors());
 
// 其他路由和中间件
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

使用cors()中间件，Express应用会自动添加正确的Access-Control-Allow-Origin头部，以响应跨域请求。如果你需要更多的自定义选项，比如指定允许的源或方法，可以传递一个选项对象给cors()：




app.use(
  cors({
    origin: 'http://example.com', // 或使用函数来动态判断允许的源
    methods: ['GET', 'POST'], // 允许的方法
    allowedHeaders: ['Content-Type', 'Authorization'], // 允许的头部
    exposedHeaders: ['Authorization'] // 暴露的头部
  })
);

这样就可以根据实际需求配置跨域请求的相关选项。

- 阅读更多 -

解决：vue3使用axios返回json用v-for遍历失效，标签不渲染

System

2024-08-23

所有,ajax

解释：

这个问题可能是因为在Vue 3中，使用axios获取的数据没有正确地被Vue响应式系统追踪，导致v-for无法正确地更新DOM来渲染数据。

解决方法：

确保你在获取数据后使用Vue的响应式方法来赋值，例如使用ref或reactive。
确保你在模板中使用的数据是响应式的。
如果你在组件外部获取数据，确保在获取数据后使用Vue的生命周期钩子或者Composition API中的onMounted钩子来确保数据已经被赋值。

示例代码：




<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
 
export default {
  setup() {
    const items = ref([]);
 
    onMounted(async () => {
      try {
        const response = await axios.get('your-api-endpoint');
        items.value = response.data;
      } catch (error) {
        console.error('An error occurred while fetching the data:', error);
      }
    });
 
    return {
      items,
    };
  },
};
</script>

在这个例子中，我们使用了ref来创建一个响应式的数据引用items，在onMounted钩子中使用axios来异步获取数据，并将获取到的数据赋值给items.value。这样，当数据改变时，v-for就能正确地渲染DOM元素。

System

2024-08-23

所有,ajax

JSONP（JSON with Padding）是一种跨域请求数据的方式，可以让你在不同域的服务器上获取数据。JSONP 不使用 AJAX 请求，而是通过动态创建 <script> 标签来实现。

下面是使用 jQuery 进行 JSONP 请求的示例代码：




$.ajax({
    url: "http://example.com/api/data", // 跨域请求的URL
    type: "GET",
    dataType: "jsonp", // 指定使用jsonp方式
    jsonpCallback: "callbackFunction", // 服务器端用于包装响应的函数名
    success: function(response) {
        console.log(response); // 处理响应数据
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log('JSONP request failed: ' + textStatus);
    }
});
 
// 回调函数，服务器响应时调用
function callbackFunction(data) {
    // 处理data
    console.log(data);
}

在上面的代码中，url 是你要请求的服务端地址，dataType 设置为 "jsonp" 来指示 jQuery 使用 JSONP 方式发送请求。jsonpCallback 是一个函数名，服务器端用于包装 JSON 响应的函数名，该函数将被传递给服务器，以便服务器可以正确地将响应包装在函数调用中。

服务器端应该能够处理 JSONP 请求，并返回类似于以下格式的响应：




callbackFunction({"key": "value", ...});

这样就可以实现使用 jQuery 进行跨域请求的 JSONP 方式。

- 阅读更多 -