System 发布的文章

2024-08-24

在jQuery中，Ajax的运用主要是通过$.ajax()函数实现的。以下是一个简单的例子，展示了如何使用jQuery发送Ajax GET请求：




$.ajax({
    url: 'your-endpoint.php', // 请求的URL
    type: 'GET', // 请求方法，可以是GET或POST
    data: {
        key1: 'value1', // 发送到服务器的数据
        key2: 'value2'
    },
    success: function(response) {
        // 请求成功后的回调函数
        console.log(response); // 打印服务器返回的响应
    },
    error: function(xhr, status, error) {
        // 请求失败后的回调函数
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});

若要发送POST请求，只需将type改为'POST'，并且可以通过data属性发送需要发送的数据。

以下是一个简单的POST请求示例：




$.ajax({
    url: 'your-endpoint.php',
    type: 'POST',
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});

这些是使用jQuery发送Ajax请求的基本方法。jQuery还提供了更简洁的$.get()和$.post()方法，用于发送GET和POST请求，但底层仍然是通过$.ajax()实现的。

- 阅读更多 -

AJAX知识点（详解）

System

2024-08-24

所有,ajax

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以使网页的更新不需要重新加载整个页面。以下是AJAX的一些关键知识点和示例代码：

创建XMLHttpRequest对象：




var xhr = new XMLHttpRequest();

配置请求：




xhr.open('GET', 'your-api-endpoint', true);

发送请求：




xhr.send();

处理服务器响应：




xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理响应
        var response = xhr.responseText;
        console.log(response);
    }
};

处理POST请求和数据：




xhr.open('POST', 'your-api-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1&param2=value2');

使用JSON：




xhr.open('GET', 'your-api-endpoint', true);
xhr.responseType = 'json'; // 设置响应类型为JSON
xhr.send();
 
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.response; // 直接获取JSON对象
        console.log(response);
    }
};

跨域请求（CORS）：
如果需要从不同的域进行请求，服务器需要在响应头中设置Access-Control-Allow-Origin。
jQuery中的AJAX：




$.ajax({
    url: 'your-api-endpoint',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        // 请求成功，处理响应
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败
        console.error(error);
    }
});

这些是AJAX的基本概念和使用方法，实际应用中可能还需要考虑错误处理、请求超时、跨域请求等问题。

System

2024-08-24

所有,javascript

在uni-app项目中，你可以在项目根目录下的manifest.json文件中设置全局变量，然后在main.js中引入并设置到Vue.prototype上，这样在应用的任何页面都可以通过this访问这些全局变量。

打开manifest.json文件。
在manifest.json的h5节点下，或者根节点下（全局生效），添加你的后端地址配置：




{
  // ... 其他配置
  "global": {
    "apiUrl": "https://your-backend-url.com/api/"
  }
}

打开main.js文件，引入全局变量并设置到Vue.prototype上，以便于全局访问：




// main.js
Vue.prototype.$apiUrl = manifest.global.apiUrl;
 
// 或者如果你不想在每个页面单独引入manifest.json，可以在main.js中直接设置
Vue.prototype.$apiUrl = "https://your-backend-url.com/api/";

在应用的任何页面或组件中，你可以通过this.$apiUrl来访问后端访问地址：




// 例如，在某个页面的methods中
methods: {
  fetchData() {
    const url = this.$apiUrl + 'some-endpoint';
    // 使用url进行后续的网络请求操作
  }
}

确保在使用这些全局变量之前，已经在main.js中正确设置了它们。这样你就可以在config.js中设置后端访问地址，并在应用的任何页面通过全局变量来使用它了。

System

2024-08-24

所有,javascript




-- 创建学生信息表
CREATE TABLE `student_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `phone` varchar(255) NOT NULL,
  `gender` enum('male', 'female', 'other') NOT NULL,
  `age` int(11) NOT NULL,
  `city` varchar(255) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;




<!-- 学生列表页面 (student-list.html) -->
<!DOCTYPE html>
<html>
<head>
  <title>学生信息管理系统</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2 class="my-4">学生信息列表</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>电话</th>
          <th>性别</th>
          <th>年龄</th>
          <th>城市</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <!-- 这里是学生信息列表的动态数据 -->
      </tbody>
    </table>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，我们创建了一个名为student_info的MySQL数据表，并定义了学生信息的字段。然后，我们创建了一个简单的HTML页面，用于显示学生信息列表，该列表是用Bootstrap框架制作的。这个HTML页面会被Vue.js或其他前端框架用来渲染学生信息，并与后端服务（使用Node.js和Express框架）进行数据交互。

- 阅读更多 -

JS-拷贝问题

System

2024-08-24

所有,javascript

在JavaScript中，"浅拷贝"和"深拷贝"是两种不同的复制对象的方法。浅拷贝只复制了对象的最外层，而深拷贝则会递归复制所有层级。

浅拷贝的实现方法：

对象展开运算符（...）
Object.assign()
手动循环属性

深拷贝的实现方法：

使用JSON.parse(JSON.stringify())（注意，这种方法不能复制包含循环引用的对象或者函数等无法序列化的属性）
递归复制（手动实现深拷贝）

以下是实现浅拷贝和深拷贝的示例代码：

浅拷贝示例：




// 使用对象展开运算符
const shallowCopy1 = { ...originalObject };
 
// 使用Object.assign()
const shallowCopy2 = Object.assign({}, originalObject);
 
// 手动循环属性
const shallowCopy3 = {};
for (let key in originalObject) {
  shallowCopy3[key] = originalObject[key];
}

深拷贝示例：




// 使用JSON.parse(JSON.stringify())
const deepCopy1 = JSON.parse(JSON.stringify(originalObject));
 
// 递归复制
const deepCopy2 = recursiveCopy(originalObject);
 
function recursiveCopy(obj) {
  if ((obj === null) || (typeof obj !== 'object')) {
    return obj;
  }
 
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
 
  if (obj instanceof Array) {
    return obj.reduce((arr, item, i) => {
      arr[i] = recursiveCopy(item);
      return arr;
    }, []);
  }
 
  if (obj instanceof Object) {
    return Object.keys(obj).reduce((newObj, key) => {
      newObj[key] = recursiveCopy(obj[key]);
      return newObj;
    }, {});
  }
}

注意：JSON.parse(JSON.stringify())的方法存在局限性，不能复制函数、undefined、循环引用等。因此，在复杂场景下，通常推荐使用递归复制的方式来创建深拷贝。

- 阅读更多 -

用pako.js压缩字符串，如何在后端用java解开？

System

2024-08-24

所有,javascript

在前端使用pako.js压缩字符串，然后在后端使用Java解压，你可以使用Java的Inflater类来解压经过pako.js压缩的数据。以下是一个简单的例子：

前端（JavaScript）:




const pako = require('pako');
 
// 假设这是你通过pako压缩过的数据
const compressedData = pako.deflate('这是一个压缩的字符串', { to: 'string' });
 
// 将compressedData发送到服务器

后端（Java）:




import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.util.zip.DataFormatException;
import java.util.zip.Inflater;
 
public class Decompressor {
    public static String decompress(String compressedStr) {
        byte[] compressedBytes = Base64.getDecoder().decode(compressedStr);
        ByteArrayInputStream bis = new ByteArrayInputStream(compressedBytes);
        Inflater inflater = new Inflater();
        ByteArrayOutputStream bos = new ByteArrayOutputStream(compressedBytes.length);
 
        try {
            byte[] buffer = new byte[1024];
            int len;
            inflater.setInput(bis);
            while (!inflater.needsInput()) {
                len = inflater.inflate(buffer);
                if (len <= 0) {
                    break;
                }
                bos.write(buffer, 0, len);
            }
            bis.close();
            inflater.end();
 
            return new String(bos.toByteArray(), "UTF-8");
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
 
    public static void main(String[] args) {
        String compressedStr = "eJzT0yMAAGTvBe8="; // 这里应该是前端发送过来的压缩数据
        String decompressedStr = decompress(compressedStr);
        System.out.println(decompressedStr);
    }
}

确保前端发送到服务器的数据是Base64编码的，并且在Java端使用相同的编码方式来解码。解压后的字符串应该是原始的压缩字符串。

System

2024-08-24

所有,javascript

以下是使用Java、Python、C++和JavaScript实现的约瑟夫环算法的代码示例：

Java版本：




public class JosephusGame {
    public static void josephusGame(int n, int k) {
        LinkedList<Integer> circle = new LinkedList<>();
        for (int i = 1; i <= n; i++) {
            circle.add(i);
        }
 
        int idx = 0;
        while (circle.size() > 1) {
            idx = (idx + k - 1) % circle.size();
            circle.remove(idx);
        }
 
        System.out.println("最后剩下的人是：" + circle.get(0));
    }
 
    public static void main(String[] args) {
        josephusGame(5, 3); // 例如，n = 5，k = 3的情况
    }
}

Python版本：




class JosephusGame:
    def josephus_game(self, n, k):
        circle = list(range(1, n + 1))
        while len(circle) > 1:
            idx = (idx + k - 1) % len(circle)
            del circle[idx]
        print(f"最后剩下的人是：{circle[0]}")
 
jg = JosephusGame()
jg.josephus_game(5, 3)  # 例如，n = 5，k = 3的情况

C++版本：




#include <iostream>
#include <list>
 
void josephusGame(int n, int k) {
    std::list<int> circle(n);
    std::iota(circle.begin(), circle.end(), 1);
 
    auto it = circle.begin();
    while (circle.size() > 1) {
        for (int i = 0; i < k - 1; ++i) {
            ++it;
            if (it == circle.end()) {
                it = circle.begin();
            }
        }
        auto next_it = ++it;
        if (next_it == circle.end()) {
            next_it = circle.begin();
        }
        circle.erase(it);
        it = next_it;
    }
 
    std::cout << "最后剩下的人是：" << *it << std::endl;
}
 
int main() {
    josephusGame(5, 3); // 例如，n = 5，k = 3的情况
    return 0;
}

JavaScript版本：




function josephusGame(n, k) {
    let circle = Array.from({ length: n }, (_, i) => i + 1);
 
    let idx = 0;
    while (circle.length > 1) {
        idx = (idx + k - 1) % circle.length;
        circle.splice(idx, 1);
    }
 
    console.log(`最后剩下的人是：${circle[0]}`);
}
 
josephusGame(5, 3); // 例如，n = 5，k = 3的情况

以上代码实现了约瑟夫环的核心功能，并在主函数中提供了使用例子。

System

2024-08-24

所有,javascript

current-node-key 和 setCurrentKey 是 Element UI 的 Tree 组件中用于设置和获取当前选中节点的属性和方法。如果你发现 current-node-key 失效或者 setCurrentKey 方法失效，可能是以下原因导致的：

确保你使用的 Element UI 版本是最新的，或者至少是支持这些属性和方法的版本。
确保你正确地使用了 current-node-key 属性，它应该是每个节点对象中唯一标识该节点的键名。
确保你正确地使用了 setCurrentKey 方法，并且在组件已经加载完成后调用它。
如果你在使用 Vue 的响应式数据特性，确保你的节点数据是响应式的，即使用 Vue 的数据绑定机制来更新。

解决方案示例：




// 确保组件已经加载完成
this.$nextTick(() => {
  // 使用 setCurrentKey 方法设置当前选中节点的 key
  this.$refs.tree.setCurrentKey('节点的唯一标识值');
});

如果以上方法都不能解决问题，可以尝试查看 Element UI 的官方文档或者社区寻求帮助，也可以检查自己的代码是否有其他错误。

System

2024-08-24

所有,javascript




cmake_minimum_required(VERSION 3.13)
project(my_project)
 
set(CMAKE_CXX_STANDARD 14)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
# 设置Emscripten工具链变量
set(EMSCRIPTEN_ROOT "/path/to/emsdk/upstream/emscripten")
set(CMAKE_TOOLCHAIN_FILE "${EMSCRIPTEN_ROOT}/cmake/Modules/Platform/Emscripten.cmake")
 
# 设置Emscripten编译选项
set(EMSCRIPTEN_OPTIMIZATION -O3)
set(EMSCRIPTEN_LINK_OPTIMIZATION "${EMSCRIPTEN_OPTIMIZATION}")
set(EMSCRIPTEN_CODE_GEN_OPTIMIZED ON)
 
# 设置Emscripten编译标志
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -s WASM=1 -s SIDE_MODULE=1 -s ASSERTIONS=1 -s DEMANGLE_SUPPORT=1")
 
# 添加源代码文件
file(GLOB SOURCE_FILES "src/*.cpp")
file(GLOB HEADER_FILES "include/*.h")
 
# 添加wasm-bindgen生成的typescript绑定
file(GLOB BINDGEN_FILES "src/*_bg.js")
 
# 创建目标wasm文件
add_custom_command(
    OUTPUT ${CMAKE_BINARY_DIR}/my_project.wasm
    COMMAND emcc ${SOURCE_FILES} ${HEADER_FILES} ${BINDGEN_FILES} -o ${CMAKE_BINARY_DIR}/my_project.js -s WASM=1 -s SIDE_MODULE=1
    DEPENDS ${SOURCE_FILES} ${HEADER_FILES} ${BINDGEN_FILES}
)
 
# 添加自定义目标
add_custom_target(run_project ALL
    COMMAND emrun --no_browser --port 8080 ${CMAKE_BINARY_DIR}/my_project.html
)

这个示例CMakeLists.txt文件展示了如何设置Emscripten工具链，并使用add_custom_command来编译C++项目为WebAssembly和相关的JavaScript文件。它还演示了如何添加一个自定义目标来使用emrun运行项目。注意，这里假设你已经安装了Emscripten SDK，并且将/path/to/emsdk/upstream/emscripten替换为你的实际Emscripten SDK路径。

- 阅读更多 -

vite创建vue3项目页面引用public下js文件失败解决

System

2024-08-24

所有,javascript

报错问题：在使用Vite创建的Vue 3项目中，无法在页面上正确引用位于public目录下的JavaScript文件。

可能原因及解决方法：

路径错误：确保在<script>标签中正确引用public目录下的文件路径。例如，如果你有一个public/js/example.js文件，你应该使用以下路径引用它：




<script src="/js/example.js"></script>

注意：Vite服务器会将public目录作为一个静态文件服务的根目录，因此不需要在路径前加上/src。

缓存问题：Vite可能因为缓存问题而无法正确加载public目录下的文件。尝试清除缓存后重新启动服务器：




npm run dev

或者，如果你使用的是Yarn，则运行：




yarn dev

文件引用语法：确保没有语法错误，比如拼写错误或者错误的文件扩展名。
文件加载顺序：如果页面在public文件夹的js文件之前加载，那么可能会出现问题。确保在需要使用该js文件的地方，该文件已经加载完毕。

如果以上方法都不能解决问题，请提供更详细的错误信息，以便进一步诊断。

- 阅读更多 -