分类前端技术下的文章

2024-08-14




.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
 
.item {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

这段代码定义了一个容器 .container，它使用了 CSS Grid 布局。grid-template-columns 属性设置了列的数量和大小，使用 repeat(auto-fit, minmax(150px, 1fr)) 自动填充列，每列的最小宽度为 150px，并且会占据剩余空间的一部分。gap 属性在网格项之间添加了间隙。.item 类定义了网格项的样式，包括背景色、边框和内边距。这个布局方法使得容器内的项可以响应屏幕大小的变化，方便实现响应式设计。

- 阅读更多 -

JS 数组过滤元素的方法（ 2 种）

System

2024-08-14

所有,javascript

在JavaScript中，有两种常见的方法可以用于过滤数组中的元素：

使用 filter() 方法：

filter() 方法会创建一个新数组，该数组包含通过所提供函数实现的测试的所有元素。




let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4, 6]

使用 for 循环和 push() 方法：

你也可以使用 for 循环和 push() 方法来过滤数组中的元素，将满足条件的元素添加到新数组中。




let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = [];
for (let number of numbers) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
}
console.log(evenNumbers); // 输出: [2, 4, 6]

这两种方法都可以过滤出数组中的偶数。第一种方法更简洁，第二种方法更直观。选择哪种方法取决于个人喜好和具体情况。

- 阅读更多 -

vue中内嵌iframe的src更新页面未刷新问题的解决方法

System

2024-08-14

所有,vue.js




<template>
  <div>
    <iframe
      :src="iframeUrl"
      width="100%"
      height="600"
      frameborder="0"
      id="myIframe"
      @load="iframeLoaded"
    ></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      iframeUrl: 'http://example.com'
    };
  },
  methods: {
    iframeLoaded() {
      // 当iframe加载完成后，我们可以在这里执行一些操作
      console.log('Iframe has loaded');
    },
    updateIframeUrl(newUrl) {
      this.iframeUrl = newUrl;
      const iframe = document.getElementById('myIframe');
      // 使用内容可见性API检查iframe是否已经加载
      if (iframe.contentWindow && iframe.contentWindow.document.readyState === 'complete') {
        // 如果已加载，直接更新src属性
        iframe.src = newUrl;
      } else {
        // 如果未加载，设置定时器在一段时间后再次尝试更新src
        setTimeout(() => {
          this.updateIframeUrl(newUrl);
        }, 500);
      }
    }
  },
  // 假设你有一个方法来触发iframe的更新
  // 例如，当你从下拉菜单或其他交互中选择一个新的URL时
  watch: {
    someDataFromParent() {
      const newUrl = this.generateNewIframeUrl();
      this.updateIframeUrl(newUrl);
    }
  }
};
</script>

这个代码示例展示了如何在Vue组件中更新内嵌iframe的src属性，并确保页面刷新。它使用了contentWindow.document.readyState来检查iframe是否已经加载，如果没有加载，它会设置一个定时器并在iframe准备好时更新src。

- 阅读更多 -

vue中二次封装axios以及api统一管理

System

2024-08-14

所有,ajax




import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 可以在这里对响应数据进行处理
    return response.data;
  },
  error => {
    // 响应错误处理
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);
 
// 导出API
export default {
  get(url, params) {
    return service.get(url, {
      params: params
    });
  },
  post(url, data) {
    return service.post(url, data);
  },
  put(url, data) {
    return service.put(url, data);
  },
  delete(url, params) {
    return service.delete(url, {
      params: params
    });
  }
};

这个代码示例展示了如何在Vue项目中二次封装axios，并提供了简单的API统一管理。代码中创建了axios实例，并分别配置了请求拦截器和响应拦截器，最后导出了基本的GET、POST、PUT和DELETE方法供其他组件使用。这样的封装可以减少重复代码，提高代码的可维护性和可读性。

- 阅读更多 -

《HTML简单入门》

System

2024-08-14

所有,html5

HTML是用于创建网页的标准标记语言。下面是一个简单的HTML页面示例：




<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问我的主页</a>
</body>
</html>

这个示例包含了一些基本的HTML元素：

<!DOCTYPE html> 声明这是一个HTML5文档。
<html> 元素是这个文档的根元素。
<head> 元素包含了此网页的标题和其他元数据。
<title> 元素定义了网页的标题，显示在浏览器的标题栏上。
<body> 元素包含了可见的页面内容。
<h1> 元素定义了一个大标题。
<p> 元素定义了一个段落。
<a> 元素定义了一个超链接，href属性指定了链接的目标地址。

- 阅读更多 -

使用yum安装Node.js并配置编程环境

System

2024-08-14

所有,nodejs




# 1. 添加NodeSource的Node.js库
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
 
# 2. 使用yum安装Node.js
sudo yum install -y nodejs
 
# 3. 确认Node.js和npm已经安装成功
node -v
npm -v
 
# 4. 设置npm的默认前端工具（可选）
npm config set prefix /usr/local
 
# 5. 更新系统的环境变量配置
source /etc/profile.d/npm.sh
 
# 6. 验证环境配置成功
echo $NPM_CONFIG_PREFIX

这段代码首先通过curl命令添加Node.js的官方库，然后使用yum安装Node.js。之后，它检查Node.js和npm的安装情况，并设置npm的全局安装前缀。最后，更新环境变量配置以便系统识别新的路径。这样就完成了Node.js的安装和基本配置。

- 阅读更多 -

探索Vue.js中的文件夹上传解决方案：vue-simple-uploader

System

2024-08-14

所有,vue.js




<template>
  <div id="app">
    <file-upload
      ref="upload"
      v-bind:post-action="postAction"
      v-bind:put-action="putAction"
      v-bind:headers="headers"
    ></file-upload>
    <button v-on:click="submitFiles">上传</button>
  </div>
</template>
 
<script>
import FileUpload from './components/FileUpload.vue'
 
export default {
  name: 'app',
  components: {
    FileUpload
  },
  data() {
    return {
      postAction: '/upload/endpoint', // 上传文件的API端点
      putAction: '/upload/endpoint', // 如果需要断点续传，这里是更新已上传文件状态的API端点
      headers: { // 可以添加额外的请求头
        Authorization: 'Bearer ' + localStorage.getItem('token')
      }
    }
  },
  methods: {
    submitFiles() {
      this.$refs.upload.submit();
    }
  }
}
</script>

这个代码实例展示了如何在Vue应用中使用vue-simple-uploader组件来上传文件。它定义了一个FileUpload组件，并通过ref属性为其设置了一个引用，以便在父组件中触发文件上传。同时，它展示了如何绑定上传动作postAction和putAction，以及如何添加请求头headers。最后，它提供了一个按钮，当点击时，会触发文件上传。

- 阅读更多 -

React中提示XXX不能用作JSX组件

System

2024-08-14

所有,typescript

报错解释：

在React中，如果尝试将一个变量作为JSX组件使用，但这个变量并不是一个有效的React组件，就可能会出现“XXX不能用作JSX组件”的错误。这通常发生在以下几种情况：

变量XXX未定义或导入。
变量XXX不是一个有效的React组件，它可能是一个普通的JavaScript对象或者函数，而不是一个正确的React组件。
如果是使用了错误的大小写，例如，小写的xxx，而不是首字母大写的Xxx，JSX会将其视为普通的HTML标签而不是自定义组件。

解决方法：

确保组件已经正确导入到文件中。
如果是自定义组件，请确保它是以大写字母开头的React组件。
如果是导入的第三方库中的组件，请检查该组件是否是默认导出或命名导出。
如果是使用高阶组件或装饰器包装的组件，请确保它们返回有效的React组件。

示例：




import React from 'react';
import { SomeComponent } from 'some-library';
 
function MyComponent() {
  return (
    <div>
      <SomeComponent /> {/* 正确使用方式 */}
    </div>
  );
}

如果SomeComponent没有按照上述方式正确导入或使用，就会遇到报错。

- 阅读更多 -

本地存储 jQuery入门

System

2024-08-14

所有,jquery

在本地存储中使用jQuery可以通过几种方法来实现。以下是一个简单的例子，展示了如何使用jQuery来设置和获取本地存储数据。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LocalStorage jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // 设置本地存储数据
            $('#set-storage').click(function(){
                var key = 'myKey';
                var value = 'myValue';
                localStorage.setItem(key, value);
            });
 
            // 获取本地存储数据
            $('#get-storage').click(function(){
                var key = 'myKey';
                var value = localStorage.getItem(key);
                alert('The value of ' + key + ' is ' + value);
            });
 
            // 清除本地存储数据
            $('#clear-storage').click(function(){
                localStorage.clear();
                alert('Local storage is cleared.');
            });
        });
    </script>
</head>
<body>
 
    <button id="set-storage">Set Item in LocalStorage</button>
    <button id="get-storage">Get Item from LocalStorage</button>
    <button id="clear-storage">Clear LocalStorage</button>
 
</body>
</html>

在这个例子中，我们使用jQuery的$(document).ready()函数来确保在DOM完全加载后才绑定事件处理器。当用户点击相应的按钮时，会执行相应的操作：

点击“Set Item in LocalStorage”按钮会触发一个事件，该事件使用jQuery设置一个键值对到本地存储。
点击“Get Item from LocalStorage”按钮会触发一个事件，该事件使用jQuery从本地存储中获取一个值并通过弹窗显示出来。
点击“Clear LocalStorage”按钮会触发一个事件，该事件使用jQuery清除本地存储中的所有数据。

- 阅读更多 -

基于Promise手动封装ajax

System

2024-08-14

所有,ajax




// 创建一个Ajax函数，用于发送HTTP请求
function ajax(url, method = 'GET', data = null) {
  // 返回一个Promise
  return new Promise((resolve, reject) => {
    // 创建一个新的XHR对象
    const xhr = new XMLHttpRequest();
 
    // 配置XHR对象
    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) {
        // 请求成功
        try {
          // 解析返回的数据，可能是JSON格式
          const response = JSON.parse(xhr.responseText);
          resolve(response);
        } catch (e) {
          // 如果不是JSON格式，直接返回文本
          resolve(xhr.responseText);
        }
      } else {
        // 请求失败
        reject(new Error(xhr.statusText));
      }
    };
 
    // 监听请求错误
    xhr.onerror = function() {
      reject(new Error("Network Error"));
    };
  });
}
 
// 使用示例
ajax('https://api.example.com/data', 'GET').then(response => {
  console.log(response); // 处理响应数据
}).catch(error => {
  console.error(error); // 处理错误
});

这段代码定义了一个ajax函数，它接受一个URL、HTTP方法和数据作为参数，并返回一个Promise。通过监听XHR对象的onload和onerror事件，我们可以在请求成功或失败时分别调用resolve或reject。这是一个简单的Ajax请求封装，适用于学习和小型项目。

- 阅读更多 -