System 发布的文章

2024-08-23

在JavaScript中，数组是一种常用的数据结构，以下是一些常见的数组操作及其实现方式：

创建数组：




let arr = [1, 2, 3];

访问数组元素：




let first = arr[0]; // 1

更新数组元素：




arr[0] = 10; // 更新第一个元素为10

添加元素到数组：




arr.push(4); // 在数组末尾添加元素4

从数组中删除元素：




arr.pop(); // 删除数组最后一个元素

在数组中搜索元素：




let index = arr.indexOf(2); // 返回元素2在数组中的索引，如果不存在返回-1

数组元素排序：




arr.sort((a, b) => a - b); // 升序排序
arr.sort((a, b) => b - a); // 降序排序

合并数组：




let arr2 = [4, 5, 6];
let combined = arr.concat(arr2); // 合并两个数组

创建数组的拷贝：




let copy = arr.slice(); // 创建数组的浅拷贝

数组元素的遍历：




arr.forEach(element => console.log(element)); // 输出每个元素

数组的映射：




let mapped = arr.map(element => element * 2); // 将每个元素乘以2

数组的筛选：




let filtered = arr.filter(element => element > 2); // 返回所有大于2的元素

数组的化简（reduce）：




let sum = arr.reduce((total, current) => total + current, 0); // 计算数组元素的总和

这些是JavaScript数组操作的基本方法，每个方法都有相应的使用场景，可以根据实际需求灵活使用。

- 阅读更多 -

TypeScript编译选项

System

2024-08-23

所有,typescript

在TypeScript中，可以通过tsconfig.json文件来配置编译选项。以下是一些常见的编译选项及其说明和示例代码：

target: 设置编译后的JavaScript版本。




{
  "compilerOptions": {
    "target": "es5"
  }
}

module: 设置模块的类型。




{
  "compilerOptions": {
    "module": "commonjs"
  }
}

strict: 启用所有严格类型检查。




{
  "compilerOptions": {
    "strict": true
  }
}

noImplicitAny: 不允许隐式any类型。




{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

removeComments: 移除注释。




{
  "compilerOptions": {
    "removeComments": true
  }
}




{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

rootDir: 指定输入文件的目录。




{
  "compilerOptions": {
    "rootDir": "./src"
  }
}

sourceMap: 生成源映射文件。




{
  "compilerOptions": {
    "sourceMap": true
  }
}

watch: 启动监视模式。




{
  "compilerOptions": {
    "watch": true
  }
}

lib: 包含默认库的声明文件。




{
  "compilerOptions": {
    "lib": ["es6", "dom"]
  }
}

这些是一些常见的编译选项，可以在tsconfig.json文件中设置。根据项目需求，可以调整这些选项以适应不同的编译配置。

- 阅读更多 -

Ant Design Upload 自定义上传 customRequest

System

2024-08-23

所有,typescript

在Ant Design中，你可以使用customRequest属性来自定义文件上传的行为。这个属性接受一个函数，该函数会接收一个包含action、directory、data和filename的对象，以及一个onSuccess和onError的回调函数。

以下是一个使用customRequest的例子：




import React from 'react';
import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
 
function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  return isJpgOrPng || Upload.LIST_IGNORE;
}
 
function customRequest(options) {
  const { onSuccess, onError, file, onProgress } = options;
 
  const formData = new FormData();
  formData.append('file', file);
 
  // 使用你喜欢的方式上传文件，例如使用axios
  fetch('your-upload-api', {
    method: 'POST',
    body: formData,
    onUploadProgress: ({ total, loaded }) => {
      onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) });
    },
  })
    .then(() => {
      onSuccess('upload success');
    })
    .catch(() => {
      onError('upload failed');
    });
}
 
function App() {
  return (
    <Upload
      customRequest={customRequest}
      beforeUpload={beforeUpload}
      name="file"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    >
      <button style={{ border: '1px solid #d9d9d9', padding: 10 }}>
        <UploadOutlined /> Upload
      </button>
    </Upload>
  );
}
 
export default App;

在这个例子中，我们定义了一个customRequest函数，它会创建一个FormData对象，将文件附加到该对象，然后使用fetch API发送请求。你可以根据需要替换上传逻辑，例如使用axios或其他HTTP客户端。beforeUpload函数用于检查文件类型。

请注意，你需要根据你的API端点更新action属性。在这个例子中，我使用了一个模拟的API端点https://www.mocky.io/v2/5cc8019d300000980a055e76，你应该替换为你自己的上传API。

- 阅读更多 -

Table布局 flex布局 grid布局

System

2024-08-23

所有,css3

在CSS中，有三种主要的布局方式：Table布局、Flex布局和Grid布局。

Table布局：

Table布局是通过创建一个表格来控制网页布局。表格的每一部分都可以通过行（<tr>）和列（<td>）进行控制。

HTML:




<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Flex布局：

Flex布局是一种更加灵活的布局方式，它可以使容器的子项在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

HTML:




<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:




.flex-container {
  display: flex;
}

Grid布局：

Grid布局是一种基于网格的布局系统，它将容器分割成一系列的行和列，然后通过行和列的交叉定位子项。

HTML:




<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:




.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

每种布局都有其优点和适用场景，例如，Flex布局在移动应用和响应式网页设计中非常流行，而Grid布局在创建复杂的网格布局时提供了更多的灵活性。

System

2024-08-23

所有,css3

以下是实现天空中白云飘动CSS3特效的完整示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Cloud Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .clouds-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9d7f1;
    z-index: 1;
  }
  .clouds-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAyCAYAAACoPV+aAAAgAElEQVR4Xu3UQQ2AMAhD7+v58I3f0H9/3+D19/v39/f39/vH9/f3+Dg4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBg

- 阅读更多 -

Vue2 CSS小知识点

System

2024-08-23

所有,css

在Vue2中，CSS的使用可以通过以下几种方式进行：

单文件组件中的<style>标签：可以在Vue组件的单文件中使用<style>标签来添加CSS。




<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.example {
  color: red;
}
</style>

全局CSS文件：可以在入口文件（如main.js或app.js）中导入全局CSS文件。




// main.js
import Vue from 'vue';
import App from './App.vue';
import './global.css'; // 全局CSS文件
 
new Vue({
  render: h => h(App),
}).$mount('#app');

CSS预处理器：如Sass/SCSS、Less等，需要相关预处理器支持。




<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style lang="scss">
$color: red;
 
.example {
  color: $color;
}
</style>

CSS Modules：在单文件组件中使用CSS Modules，可以使样式局部作用于组件。




<template>
  <div :class="style.example">Hello, World!</div>
</template>
 
<script>
import style from './style.module.css';
 
export default {
  data() {
    return {
      style,
    };
  },
};
</script>

使用CSS-in-JS库，如styled-components。




import styled from 'styled-components';
 
const StyledDiv = styled.div`
  color: red;
`;
 
export default {
  render() {
    return <StyledDiv>Hello, World!</StyledDiv>;
  },
};

以上是在Vue2中使用CSS的一些方法，具体使用哪种取决于项目需求和开发者偏好。

- 阅读更多 -

CSS基础：width，height尺寸属性详解

System

2024-08-23

所有,css

在CSS中，width和height属性用于设置元素的宽度和高度。这两个属性可以为元素内容设置固定的尺寸，也可以使用百分比、vh单位（视口高度的百分比）等相对单位来设置。

width属性用于设置元素的宽度。
height属性用于设置元素的高度。

CSS代码示例：




/* 设置元素宽度为200像素 */
div {
  width: 200px;
}
 
/* 设置元素高度为150像素 */
div {
  height: 150px;
}
 
/* 设置元素宽度为父元素的50% */
div {
  width: 50%;
}
 
/* 设置元素高度为视口高度的25% */
div {
  height: 25vh;
}

在实际应用中，width和height通常与其他属性（如box-sizing）一起使用，以确保元素的实际尺寸按预期计算。box-sizing属性默认值为content-box，这意味着元素的实际尺寸只包括内容区域，而设置为border-box时，边框和内边距被包含在元素的宽度和高度内。

- 阅读更多 -

多个 ajax 请求顺序一次执行

System

2024-08-23

所有,ajax

要顺序执行多个AJAX请求，可以使用Promise对象和then链。以下是一个使用jQuery的例子：




function makeRequest(url) {
  return $.ajax({
    url: url,
    type: 'GET'
  });
}
 
// 创建请求数组
var requests = [
  makeRequest('url1.php'),
  makeRequest('url2.php'),
  makeRequest('url3.php')
];
 
// 使用Promise.then链顺序执行请求
requests[0]
  .then(function(response) {
    console.log('请求1成功:', response);
    return requests[1];
  })
  .then(function(response) {
    console.log('请求2成功:', response);
    return requests[2];
  })
  .then(function(response) {
    console.log('请求3成功:', response);
  })
  .catch(function(error) {
    console.error('请求出错:', error);
  });

在这个例子中，makeRequest函数创建了一个新的AJAX请求，返回一个Promise对象。然后我们创建了一个请求数组，并使用第一个请求的then方法开始链式调用，每个then块都会在前一个请求成功完成后发起下一个请求。如果任何请求失败，catch块将被触发。

- 阅读更多 -

【精讲】vue框架 axios请求（内含模拟数据交互部分）入门

System

2024-08-23

所有,ajax




<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('There was an error fetching the users: ', error);
        });
    }
  }
};
</script>

这段代码展示了如何在Vue组件中使用axios来发送HTTP GET请求，获取用户数据，并将其渲染到列表中。同时，它还展示了如何在Vue生命周期的created钩子中调用该方法，以在组件创建时获取数据。

- 阅读更多 -

docker-compose部署emqx集群配置带mysql授权认证

System

2024-08-23

所有,中间件

要使用docker-compose部署EMQX集群并配置MySQL作为授权认证，你需要创建一个docker-compose.yml文件，并配置EMQX的相关配置。以下是一个基本的例子：




version: '3'
services:
  emqx1:
    image: emqx/emqx:latest
    container_name: emqx1
    ports:
      - "1883:1883"
      - "8083:8083"
      - "8084:8084"
      - "18083:18083"
    environment:
      - EMQX_NODE_NAME=emqx1@emqx-cluster
      - EMQX_CLUSTER__DISCOVERY=emqx-cluster@1
      - EMQX_CLUSTER__STATIC_SEEDS=emqx1@emqx1:4369,emqx2@emqx2:4369
      - EMQX_CLUSTER__LISTEN_ON=0.0.0.0:4369
      - EMQX_CLUSTER__KERNEL=on
      - EMQX_AUTH__USER__SQL_AUTH__SERVER=mysql://username:password@mysql-server:3306/emqx_auth
      - EMQX_AUTH__USER__SQL_AUTH__QUERY=select password from mqtt_user where username = '%u'
    networks:
      - emqx-net
 
  emqx2:
    image: emqx/emqx:latest
    container_name: emqx2
    ports:
      - "1884:1883"
    environment:
      - EMQX_NODE_NAME=emqx2@emqx-cluster
      - EMQX_CLUSTER__DISCOVERY=emqx-cluster@1
      - EMQX_CLUSTER__STATIC_SEEDS=emqx1@emqx1:4369,emqx2@emqx2:4369
      - EMQX_CLUSTER__LISTEN_ON=0.0.0.0:4369
      - EMQX_CLUSTER__KERNEL=on
      - EMQX_AUTH__USER__SQL_AUTH__SERVER=mysql://username:password@mysql-server:3306/emqx_auth
      - EMQX_AUTH__USER__SQL_AUTH__QUERY=select password from mqtt_user where username = '%u'
    networks:
      - emqx-net
 
  mysql-server:
    image: mysql:5.7
    container_name: mysql-server
    environment:
      - MYSQL_ROOT_PASSWORD=root_password
      - MYSQL_DATABASE=emqx_auth
      - MYSQL_USER=username
      - MYSQL_PASSWORD=password
    volumes:
      - ./emqx_auth.sql:/docker-entrypoint-initdb.d/emqx_auth.sql
    networks:
      - emqx-net
 
networks:
  emqx-net:
    driver: bridge

确保你有一个emqx_auth.sql文件，它包含了MySQL数据库的初始化脚本，用于创建mqtt_user表等。

注意事项：

确保将username、password和root_password替换为你的MySQL凭据。
确保你的MySQL用户有权限访问数据库和执行查询。
确保你的EMQX节点名称、发现机制和静态种子配置正确。
确保你的MySQL服务和EMQX实例在同一个网络中，以便它们可以通信。

这个配置是一个基本的例子，根据你的实际需求，你可能需要调整配置，例如端口

- 阅读更多 -