Tech Blog

2024-08-19




import scrapy
 
class MySpider(scrapy.Spider):
    name = 'example.com'
    allowed_domains = ['example.com']
    start_urls = ['http://www.example.com/products']
 
    def parse(self, response):
        # 使用XPath选择所有产品链接
        for href in response.xpath('//a[@class="product-link"]/@href').getall():
            yield response.follow(href, self.parse_product)
 
        # 使用CSS选择下一页链接并发起请求
        next_page_url = response.css('a.next-page::attr(href)').get()
        if next_page_url is not None:
            yield response.follow(next_page_url, self.parse)
 
    def parse_product(self, response):
        # 使用XPath提取产品名称和价格
        name = response.xpath('//h1[@class="product-name"]/text()').get()
        price = response.xpath('//p[@class="product-price"]/text()').get()
 
        yield {
            'name': name,
            'price': price,
        }

这个简单的Scrapy爬虫示例展示了如何使用XPath和CSS选择器来提取网页中的数据。它首先解析起始URL页面，提取所有产品链接，并为每个产品链接调用parse_product方法来提取详细信息。同时，它还会检查是否有下一页，并对其进行爬取。这个例子教会开发者如何在Scrapy中使用XPath和CSS选择器来定位和提取所需的数据。

- 阅读更多 -

CSS元素显示模式的存在(块级元素，行内元素，行内块元素）

System

2024-08-19

所有,css

CSS中的元素显示模式定义了元素如何显示以及如何处理与其他元素的关系。主要的显示模式包括：

块级元素（Block-level elements）：默认宽度自动扩展到父元素的宽度，可以设置宽度、高度、外边距（margin）和内边距（padding）。典型的块级元素有 <div>, <p>, <h1> 到 <h6> 等。
行内元素（Inline elements）：宽度和高度由内容决定，不可直接设置宽度和高度，外边距（margin）和内边距（padding）水平方向有效。典型的行内元素有 <span>, <a> 等。
行内块元素（Inline-block elements）：结合了块级元素和行内元素的特点，可以在行内显示，并且可以设置宽度和高度，以及外边距和内边距。典型的行内块元素有 <img>, <input> 等。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Modes</title>
<style>
  .block {
    display: block; /* 块级元素 */
    width: 100%;
    height: 50px;
    background-color: lightblue;
    margin-bottom: 10px;
  }
 
  .inline {
    display: inline; /* 行内元素 */
    background-color: lightgreen;
    margin: 0 5px;
  }
 
  .inline-block {
    display: inline-block; /* 行内块元素 */
    width: 50px;
    height: 50px;
    background-color: orange;
    margin: 0 5px;
  }
</style>
</head>
<body>
 
<div class="block">块级元素</div>
<span class="inline">行内元素</span>
<span class="inline">行内元素</span>
<img class="inline-block" src="image.jpg" alt="行内块元素">
<input class="inline-block" type="button" value="行内块元素">
 
</body>
</html>

在这个例子中，.block 类使得 <div> 成为块级元素，并设置了其样式；.inline 类使得 <span> 成为行内元素，并设置了其样式；.inline-block 类使得 <img> 和 <input> 成为行内块元素，并设置了其样式。

- 阅读更多 -

在 uniapp 里面使用 unocss

System

2024-08-19

所有,css

在uniapp中使用unocss，首先需要安装unocss相关的npm包。

在项目根目录打开终端，安装unocss及其相关依赖：




npm install unocss --save

在main.js或App.vue中引入unocss并初始化：




import 'unocss/dist/bundle.css'
 
// 或者如果你需要按需引入
import 'unocss/dist/bundle.css'
 
// 初始化unocss
Vue.use(unocss)

在页面中使用unocss提供的样式类名：




<template>
  <view class="p-4 bg-gray-200">
    Hello UnoCSS in UniApp!
  </view>
</template>

以上步骤展示了如何在uniapp项目中引入和使用unocss。注意，unocss是一个实验性项目，可能会有变动，请根据实际情况查看官方文档。

- 阅读更多 -

input file上传相同文件无法多次触发change事件

System

2024-08-19

所有,ajax

解释：

当用户尝试上传相同的文件时，大多数浏览器会阻止文件的重复上传，因为它们会缓存文件的信息。这意味着，如果文件的信息（如文件名和大小）与以前上传的文件相匹配，浏览器将不会触发<input>元素的change事件。

解决方法：

强制用户在每次上传文件时更改文件名或文件内容。
使用一些前端技术，如JavaScript，在上传前修改文件名或文件内容。
使用一些后端技术，如在服务器端保存文件时添加版本信息或时间戳。
提供一种方式让用户强制浏览器清除缓存，例如通过清空浏览器缓存或使用无痕浏览模式。

示例代码（JavaScript 修改文件名）：




document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        // 添加时间戳以改变文件名，避免缓存
        var timestamp = new Date().getTime();
        var modifiedName = file.name + '.' + timestamp;
 
        // 创建一个新的文件对象
        var modifiedFile = new File([file], modifiedName, {
            type: file.type,
            lastModified: file.lastModified
        });
 
        // 使用新文件对象触发change事件
        var newEvent = new Event('change', { bubbles: true });
        newEvent.target = { files: [modifiedFile] };
        this.dispatchEvent(newEvent);
    }
});

注意：在实际应用中，请确保用户明白为什么需要修改文件名，并且提供适当的用户界面指导。

- 阅读更多 -

jQuery+AJAX技术（简单的用户注册功能）

System

2024-08-19

所有,ajax

以下是一个使用jQuery和AJAX实现的简单用户注册功能的示例代码：

HTML部分：




<form id="registration-form">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <button type="submit">注册</button>
</form>

JavaScript部分（使用jQuery和AJAX）：




$(document).ready(function() {
    $('#registration-form').on('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        var formData = $(this).serialize(); // 序列化表单数据
 
        $.ajax({
            type: 'POST',
            url: '/register', // 假设你的注册处理URL是 /register
            data: formData,
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    alert('注册成功！');
                    // 可以在这里添加额外的逻辑，比如重定向到登录页面
                } else {
                    alert('注册失败：' + response.message);
                }
            },
            error: function(xhr, status, error) {
                alert('注册时发生错误：' + error);
            }
        });
    });
});

后端处理（以Python Flask为例）：




from flask import Flask, request, jsonify
 
app = Flask(__name__)
 
@app.route('/register', methods=['POST'])
def register():
    username = request.form.get('username')
    password = request.form.get('password')
 
    # 这里应该添加注册逻辑，例如创建用户账户
    # 假设我们总是返回成功来简化示例
 
    response = {
        'status': 'success',
        'message': '用户注册成功！'
    }
 
    return jsonify(response)
 
if __name__ == '__main__':
    app.run(debug=True)

这个示例展示了如何使用jQuery和AJAX来发送用户数据到服务器进行处理，并在成功或出错时给予反馈。注意，实际应用中需要对用户输入进行验证，并且注册逻辑需要更复杂，包括安全性考虑，如密码散列等。

- 阅读更多 -

在组件外(.js文件)中使用pinia的方法

System

2024-08-19

所有,javascript

在组件外使用Pinia的store，你需要先导入store实例，然后使用store的useStore函数。以下是一个简单的例子：

首先，确保你已经创建了一个Pinia store，并在Vue应用中正确安装和配置了它。




// store.js
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    }
  }
})

然后，你可以在任何组件外部使用这个store：




// externalUsage.js
import { useMainStore } from './store'
 
// 获取store实例
const mainStore = useMainStore()
 
// 使用store中的action
mainStore.increment()
 
// 访问state
console.log(mainStore.counter) // 1

在这个例子中，我们在一个外部文件externalUsage.js中导入了useMainStore，并通过调用useMainStore()来获取store的实例。然后我们调用了store中定义的increment方法，并打印出counter的值。

- 阅读更多 -

改变Next.js默认端口的方法

System

2024-08-19

所有,javascript

在Next.js中，您可以通过修改next.config.js文件来更改默认端口。如果您想要改变Next.js应用的端口，可以在该文件中设置port属性。

首先，确保项目中有一个next.config.js文件。如果没有，您可以创建一个。然后，添加以下配置：




module.exports = {
  serverRuntimeConfig: {
    // 其他服务器运行时配置
  },
  publicRuntimeConfig: {
    // 其他公共运行时配置
  },
  port: 3000 // 您想要Next.js应用运行的端口号
};

在上面的例子中，Next.js应用将会在端口3000上运行。您可以将3000替换为任何您希望的端口号。

请注意，如果您在自定义端口上运行Next.js应用程序，您可能还需要确保该端口没有被其他进程使用。

- 阅读更多 -

流程图编辑框架LogicFlow-vue-ts和js

System

2024-08-19

所有,javascript

LogicFlow 是一款轻量级的流程图编辑框架，它提供了一系列的流程图交互行为，可以用于构建内部流程编辑系统、流程可视化分析等场景。

对于你的问题，如果你想要在 Vue 中使用 LogicFlow 并且你需要 TypeScript 和 JavaScript 的代码示例，可以参考以下步骤：

安装 LogicFlow 及其 Vue 组件：




npm install @logicflow/core
npm install @logicflow/extension
npm install @logicflow/vue

在 Vue 项目中引入并使用 LogicFlow：




// Vue 组件中 TypeScript 示例
<template>
  <div id="logic-flow-div" style="width: 100%; height: 600px;"></div>
</template>
 
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import LogicFlow from '@logicflow/core';
import { Mutation } from '@logicflow/extension';
 
@Component
export default class LogicFlowComponent extends Vue {
  mounted() {
    const lf = new LogicFlow({
      container: document.querySelector('#logic-flow-div'),
      width: 1000,
      height: 600,
      grid: {
        size: 10,
        visible: true,
      },
      background: {
        color: '#f7f9ff',
      },
    });
 
    // 使用 Mutation 插件
    lf.use(Mutation);
 
    // 添加节点和边
    lf.render({
      nodes: [
        {
          id: 'node1',
          type: 'rect',
          x: 100,
          y: 100,
          text: {
            value: 'Hello',
          },
        },
        // ... 其他节点
      ],
      edges: [
        {
          id: 'edge1',
          type: 'polyline',
          sourceNodeId: 'node1',
          targetNodeId: 'node2',
        },
        // ... 其他边
      ],
    });
  }
}
</script>




// Vue 组件中 JavaScript 示例
<template>
  <div id="logic-flow-div" style="width: 100%; height: 600px;"></div>
</template>
 
<script>
import LogicFlow from '@logicflow/core';
import { Mutation } from '@logicflow/extension';
 
export default {
  mounted() {
    const lf = new LogicFlow({
      container: document.querySelector('#logic-flow-div'),
      width: 1000,
      height: 600,
      grid: {
        size: 10,
        visible: true,
      },
      background: {
        color: '#f7f9ff',
      },
    });
 
    lf.use(Mutation);
 
    lf.render({
      nodes: [
        {
          id: 'node1',

- 阅读更多 -

vue 数据类型转换

System

2024-08-19

所有,vue.js

在Vue中，数据类型转换通常是通过计算属性(computed properties)或者方法(methods)来实现的。以下是一个简单的例子，演示如何在Vue组件中进行数据类型转换。




<template>
  <div>
    <p>原始字符串: {{ originalString }}</p>
    <p>转换为大写: {{ upperCaseString }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      originalString: 'hello world',
    };
  },
  computed: {
    // 使用计算属性来实现数据转换
    upperCaseString() {
      return this.originalString.toUpperCase();
    },
  },
  // 如果需要在方法中转换，可以这样做
  methods: {
    convertToUpperCase() {
      return this.originalString.toUpperCase();
    }
  }
};
</script>

在这个例子中，我们有一个名为originalString的数据属性，它包含一个初始字符串。通过计算属性upperCaseString，我们将这个字符串转换为全大写，并在模板中展示。这个转换是响应式的，因为如果originalString变化，upperCaseString也会自动更新。

另外，如果你需要在方法中进行转换，可以使用this.convertToUpperCase()。这两种方式都可以实现数据转换，但计算属性更适合于响应式数据转换，而方法更适合于非响应式的转换操作。

System

2024-08-19

所有,vue.js

在Vue.js中，使用Element UI的el-select组件可以实现可搜索的下拉选择器，并自定义标签和下拉选项的内容。值的变化可以通过@change事件监听，而键盘回车可以通过@keyup.enter事件监听。

以下是一个简单的例子：




<template>
  <el-select
    v-model="selectedValue"
    filterable
    allow-create
    default-first-option
    @change="handleChange"
    @keyup.enter.native="handleEnter"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="customLabel(item)"
      :value="item.value"
    >
      <span style="float: left">{{ customLabel(item) }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: 'Option 1', description: 'Description 1' },
        { value: 'option2', label: 'Option 2', description: 'Description 2' },
        // ...更多选项
      ]
    };
  },
  methods: {
    customLabel(item) {
      // 自定义显示的标签内容
      return `${item.label} (${item.description})`;
    },
    handleChange(value) {
      // 值变化时的处理函数
      console.log('Selected value changed:', value);
    },
    handleEnter() {
      // 键盘回车时的处理函数
      console.log('Enter pressed');
    }
  }
};
</script>

在这个例子中，el-select组件的v-model绑定了selectedValue变量，这样可以实时获取和更新选中的值。filterable属性使其可搜索，allow-create属性允许用户创建新的选项，default-first-option属性使得在搜索结果中第一个选项被默认选中。

el-option组件通过v-for创建了一个个选项，customLabel方法用于自定义每个选项的显示内容。

@change事件用于监听值的变化，而@keyup.enter.native事件用于监听键盘回车操作。这些事件分别绑定到了handleChange和handleEnter方法，在这些方法中可以执行相应的逻辑处理。

- 阅读更多 -