分类前端技术下的文章

2024-08-13

在TypeScript中，我们可以使用Node.js的文件系统（fs模块）来读取和解析Markdown文件。以下是一个简单的例子，展示了如何读取一个Markdown文件，并将其内容转换为HTML。




import { readFileSync } from 'fs';
import { marked } from 'marked';
 
// 假设你有一个叫做 example.md 的Markdown文件
const filePath = './example.md';
 
try {
    // 同步读取文件
    const data = readFileSync(filePath, 'utf8');
 
    // 使用 marked 库将Markdown转换为HTML
    const html = marked(data);
 
    console.log(html);
} catch (err) {
    console.error(err);
}

在这个例子中，我们使用了readFileSync函数来同步读取文件。然后，我们使用了marked函数来转换Markdown内容到HTML。请确保你已经安装了marked库，你可以通过运行npm install marked来安装。

这个简单的TypeScript脚本可以作为一个起点，你可以根据自己的需求对它进行扩展和修改。

- 阅读更多 -

AJAX——ajax原理

System

2024-08-13

所有,ajax

AJAX（Asynchronous JavaScript and XML）技术通过在浏览器与服务器之间使用异步通信（HTTP 请求）更新网页数据，而不是重新加载整个网页。其核心是JavaScript对象XMLHttpRequest，该对象在1999年由Microsoft引入并成为IE5的一部分。随后，Mozilla在其浏览器中实现了相同的对象，随后其他浏览器也跟随实现了这个对象。

AJAX的工作原理：

创建XMLHttpRequest对象
设置请求，如请求方法、URL、是否异步处理
发送请求
监听状态变化，在合适的状态（通常是readyState为4，status为200）时处理响应数据

示例代码：




function makeRequest(url) {
    var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象
 
    // 设置请求方法和URL
    request.open('GET', url, true);
 
    // 发送请求
    request.send();
 
    // 监听请求状态变化
    request.onreadystatechange = function() {
        // 请求完成并且响应状态为200
        if (request.readyState === 4 && request.status === 200) {
            // 处理服务器返回的数据
            var response = request.responseText;
            console.log(response);
        }
    };
}
 
// 使用函数发送请求
makeRequest('https://api.example.com/data');

AJAX的优点是能够在不重新加载整个页面的情况下更新数据，提升用户体验。然而，AJAX也有一些缺点，例如不利于搜索引擎优化（SEO），不支持浏览器back按钮等。随着现代前端框架和库（如React、Vue、Angular）的出现，AJAX的使用频率已大大降低，因为这些框架/库通常提供更高级、更易于使用的数据获取机制。

- 阅读更多 -

Angular：变化检测策略Change Detection的比较

System

2024-08-13

所有,typescript

在Angular中，变化检测是框架的一个核心功能，它能够检测组件数据的变化并相应地更新DOM。Angular提供了不同的变化检测策略，主要有OnPush和Default。

Default变化检测策略：每次事件循环都会检查组件的输入属性和模板是否有变化。
OnPush变化检测策略：通常用于提升性能，只有当组件的输入属性发生变化时才会检查变化。

示例代码：




// 默认变化检测策略
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-default-cd',
  template: `<div>{{ data }}</div>`,
  changeDetection: ChangeDetectionStrategy.Default // 默认就是Default策略
})
export class DefaultCdComponent {
  data = 'Initial data';
 
  updateData() {
    this.data = 'Updated data';
  }
}
 
// OnPush变化检测策略
import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-on-push-cd',
  template: `<div>{{ data }}</div>
              <button (click)="updateData()">Update</button>`,
  changeDetection: ChangeDetectionStrategy.OnPush // 设置为OnPush策略
})
export class OnPushCdComponent {
  data = 'Initial data';
 
  updateData() {
    this.data = 'Updated data'; // 这里的变化不会触发组件视图更新，除非有其他输入属性变化
  }
}

在OnPushCdComponent中，即使调用updateData()方法，视图也不会更新，除非有其他输入属性的变化触发了更新。这样做可以提升性能，因为它减少了不必要的DOM更新。

- 阅读更多 -

【CKEditor5】CKEditor5相关问题

System

2024-08-13

所有,css3

由于您没有提供具体的错误信息，我无法提供针对特定问题的解决方案。但是，我可以提供一个使用CKEditor5的基本示例，这可以帮助您入门。

首先，确保您已经在项目中包含了CKEditor5的脚本。您可以通过CDN或者将其安装到您的项目中来实现。

通过CDN使用CKEditor5:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKEditor 5 Example</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <textarea name="editor" id="editor" rows="10" cols="80"></textarea>
    <script>
        ClassicEditor
            .create(document.getElementById('editor'))
            .then(editor => {
                console.log(editor);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

在上面的示例中，我们在HTML文件中通过<script>标签引入了CKEditor5的CDN链接。然后，我们在页面加载完成后，使用ClassicEditor.create()方法来初始化编辑器，并把它与页面上的textarea元素绑定。

如果您遇到具体的错误信息，请提供，我会尽我所能帮您解决问题。

System

2024-08-13

所有,ajax

在Vue 3和Element Plus中实现多选表格，并使用Ajax发送选中行的ID数组，可以通过以下步骤实现：

使用el-table组件来展示数据，并使用el-table-column的type="selection"来创建多选列。
使用ref属性来引用表格实例，并监听多选事件。
使用Ajax（例如使用axios）发送HTTP请求，将选中行的ID数组发送到服务器。

以下是一个简单的示例代码：




<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="date" label="日期" width="120"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="sendIdsToServer">发送选中ID</el-button>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import axios from 'axios';
 
const tableData = ref([
  // 初始数据
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  // ...更多数据
]);
 
const multipleSelection = ref([]);
 
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
 
const sendIdsToServer = () => {
  const ids = multipleSelection.value.map(item => item.id);
  axios.post('/your-api-endpoint', { ids })
    .then(response => {
      // 处理响应
      ElMessageBox.alert('IDs已发送成功', '成功');
    })
    .catch(error => {
      // 处理错误
      ElMessageBox.alert('发送IDs失败', '错误', { type: 'error' });
    });
};
</script>

在这个示例中，我们定义了一个表格并为其添加了多选列。当选中项变化时，我们通过handleSelectionChange来更新所选行的数据。sendIdsToServer函数负责收集所有选中行的ID，并通过Ajax发送到服务器。

请确保安装了element-plus和axios依赖，并正确配置了API端点。

System

2024-08-13

所有,html

由于篇幅限制，以下仅展示了一个HTML页面的核心代码，其他页面的实现方式相同，只是图片和文字内容不同。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- 导航栏代码 -->
    </header>
    <main>
        <section class="jumbotron">
            <div class="container">
                <h1>欢迎来到成都旅游</h1>
                <p>这里有你需要的一切旅游信息</p>
            </div>
        </section>
 
        <!-- 其他页面的内容 -->
    </main>
    <footer>
        <!-- 页脚信息 -->
    </footer>
</body>
</html>

CSS样式表 style.css 将包含用于美化页面的样式规则，但由于篇幅限制，这里不再展示。

请注意，为了保证回答的简洁性，实际的图片资源、CSS样式和其他页面的HTML代码将不会在这个示例中展示。在实际的课程设计中，你需要自行添加这些内容来完成整个网站的设计。

System

2024-08-13

所有,npm

报错解释：

这个错误通常表示在JavaScript代码中，this关键字的上下文不是URLSearchParams实例。在pnpm install的上下文中，这可能是因为某个Node.js模块或pnpm的内部代码尝试将this用作URLSearchParams对象，但实际上this的值不是预期的。

解决方法：

确认你的Node.js版本是否支持URLSearchParams。URLSearchParams是在Node.js 10.0.0版本中引入的，如果你使用的版本低于这个版本，需要升级Node.js。
如果你在使用某个特定的库或脚本，确保它们兼容你当前的Node.js版本。
检查是否有环境变量或命令行参数可能影响pnpm的行为，导致其内部代码尝试使用错误的this上下文。
如果问题依旧存在，尝试清除node_modules文件夹和pnpm-store存储，然后重新运行pnpm install。
如果以上步骤无效，可以尝试创建一个最小复制的示例，进一步调查是哪个模块或代码片段导致了这个问题，并查看是否有相关的issue或者更新。
作为最后的手段，如果你对pnpm的源代码有修改或者你认为问题出在pnpm内部，你可以考虑提交issue或者查看相关的源代码来进行调试。

System

2024-08-13

所有,npm

报错信息不完整，但从给出的部分信息可以推测是在使用npm（Node Package Manager）时尝试访问一个不存在的网址，导致出现了错误。

错误解释：

这个错误表明npm试图从一个指定的源（registry）获取数据，但是网址不正确或者访问出现问题。可能是因为网络问题、配置错误或者npm源地址已经变更。

解决方法：

检查网络连接是否正常。
确认npm源地址是否正确。可以通过运行npm config get registry来查看当前配置的源地址。
如果是因为源地址变更，可以尝试设置回官方的npm源：npm config set registry https://registry.npmjs.org/。
清除npm缓存：npm cache clean --force，然后重试。
如果以上方法都不行，可以尝试重新安装npm或Node.js。

- 阅读更多 -

jquery怎么获取select的值

System

2024-08-13

所有,jquery

使用jQuery可以使用val()方法来获取select的值。

以下是几种不同的实现方法：

使用id选择器获取select元素并使用val()方法获取其值：




var selectedValue = $("#selectId").val();

使用class选择器获取select元素并使用val()方法获取其值：




var selectedValue = $(".selectClass").val();

使用标签选择器获取select元素并使用val()方法获取其值：




var selectedValue = $("select").val();

注意：以上方法假设你已经按照合适的方式给select元素添加了id或class属性。如果存在多个匹配的元素，以上方法都只会返回第一个元素的值。如果需要获取多个select的值，可以使用each()方法进行迭代获取。

- 阅读更多 -

报错：npm ERR code EPERM

System

2024-08-13

所有,npm

解释：

npm ERR! code EPERM 表示 npm 操作时遇到了权限错误。这通常发生在尝试在没有足够权限的情况下写入文件或目录时。

解决方法：

使用管理员权限运行命令行工具（在Windows上是以管理员身份运行命令提示符或PowerShell，在Unix-like系统上是使用sudo）。
如果是因为npm的全局安装目录或缓存目录的权限问题，可以更改它们的位置到有写入权限的目录。可以通过设置npm配置来更改目录：
```
npm config set prefix /path/to/desired/directory
```
并确保该目录具有写入权限。
检查当前目录及其任何父目录的权限，确保你有足够的权限来进行npm操作。
如果是在Windows系统上，可以尝试关闭正在使用npm目录的所有程序，或者重启计算机。
如果问题依旧存在，可以尝试清除npm缓存：
```
npm cache clean --force
```
然后重试之前的操作。

在执行以上步骤时，请确保不要破坏任何系统或应用程序的权限设置，特别是如果你不是系统管理员或者对这些权限设置不熟悉的情况下。

- 阅读更多 -