Tech Blog

2024-08-16




<template>
  <div id="x6-graph-container"></div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import { Graph } from '@antv/x6';
 
export default {
  setup() {
    const container = ref(null);
    let graph = null;
 
    onMounted(() => {
      graph = new Graph({
        container: container.value,
        width: 800,
        height: 600,
        grid: true,
      });
 
      graph.addNode({
        x: 100,
        y: 40,
        width: 80,
        height: 40,
        label: 'Hello',
      });
 
      graph.addNode({
        x: 300,
        y: 100,
        width: 80,
        height: 40,
        label: 'World',
      });
 
      graph.addEdge({
        source: { x: 100, y: 40 },
        target: { x: 300, y: 100 },
      });
    });
 
    return {
      container,
    };
  },
};
</script>
 
<style>
#x6-graph-container {
  width: 100%;
  height: 100vh;
}
</style>

这个例子展示了如何在Vue组件中初始化X6的Graph对象，并添加了一个节点和一条边。它演示了如何在Vue的生命周期钩子onMounted中进行图的初始化，并且通过ref来获取DOM元素的引用。这个例子简洁明了，并且是一个很好的起点，可以帮助开发者理解如何在Vue应用中集成X6。

- 阅读更多 -

vue中websocket的使用---详解

System

2024-08-16

所有,vue.js




<template>
  <div>
    <p>WebSocket状态: {{ wsStatus }}</p>
    <button @click="connectWebSocket">连接WebSocket</button>
    <button @click="sendMessage" :disabled="wsStatus !== 'OPEN'">发送消息</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      ws: null,
      wsStatus: 'CLOSED',
    };
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://your-websocket-server');
 
      this.ws.onopen = () => {
        this.wsStatus = 'OPEN';
        console.log('WebSocket连接成功');
      };
 
      this.ws.onclose = () => {
        this.wsStatus = 'CLOSED';
        console.log('WebSocket连接已关闭');
      };
 
      this.ws.onerror = error => {
        console.error('WebSocket出错:', error);
      };
 
      this.ws.onmessage = message => {
        console.log('收到消息:', message.data);
      };
    },
    sendMessage() {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send('你的消息内容');
      }
    }
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
  }
};
</script>

这个代码示例展示了如何在Vue组件中创建和管理WebSocket连接。它包括了连接WebSocket服务器、发送消息、处理打开、关闭和错误事件以及在组件销毁前关闭WebSocket连接的逻辑。

- 阅读更多 -

MySQL——Ubuntu20使用deb安装MySQL&远程连接数据库服务器

System

2024-08-16

所有,mysql

在Ubuntu 20.04上使用deb包安装MySQL并进行远程连接的步骤如下：

下载MySQL APT Repository：




wget https://repo.mysql.com//mysql-apt-config_0.8.17-1_all.deb

安装MySQL APT Repository：




sudo dpkg -i mysql-apt-config_0.8.17-1_all.deb

安装过程中，可能会弹出对话框，选择MySQL服务器版本，并完成配置。

更新APT源：




sudo apt update

安装MySQL服务器：




sudo apt install mysql-server

安全配置MySQL：




sudo mysql_secure_installation

按照提示设置root用户密码，以及配置其他相关的安全选项。

允许远程连接：
编辑MySQL配置文件/etc/mysql/mysql.conf.d/mysqld.cnf，注释掉bind-address这一行，将其修改为：




#bind-address = 127.0.0.1

或者将其改为你服务器的实际IP地址。

重启MySQL服务：




sudo systemctl restart mysql

登录MySQL，并创建允许远程连接的用户：




mysql -u root -p

然后创建用户并授权：




CREATE USER 'username'@'%' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'username'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

确保Ubuntu 20.04防火墙允许MySQL端口（默认为3306）的入站连接：




sudo ufw allow 3306/tcp

使用远程MySQL客户端或其他工具测试连接。

注意：在实际部署中，请确保使用强密码，并仅在必要时允许远程连接，以保持数据库服务器的安全。

- 阅读更多 -

【 HTML 及浏览器】DOM 树

System

2024-08-16

所有,html

在HTML和浏览器中，DOM（Document Object Model）是文档对象模型的简称，它是一种用于HTML和XML文档的编程接口。DOM将网页或应用程序的标记转换为一个可以通过JavaScript进行访问和操作的对象模型。

DOM树是基于文档的层级结构创建的，它将每个HTML标签视为树中的一个节点。DOM树的根节点是document对象，每个节点都可以包含子节点，这些子节点可以是元素节点、文本节点、注释节点等。

以下是一个简单的HTML示例及其对应的DOM树：

HTML:




<html>
  <head>
    <title>Example DOM Tree</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

DOM树可以表示为：




document
├── html
│   ├── head
│   │   └── title
│   │       └── "#text" (节点包含文本: "Example DOM Tree")
│   └── body
│       ├── h1
│       │   └── "#text" (节点包含文本: "Welcome to My Website")
│       └── p
│           └── "#text" (节点包含文本: "This is a paragraph.")
└── "#document-fragment"

在这个DOM树中，每个元素都是一个节点，#text代表的是元素节点之间的文本内容。#document-fragment是一个虚拟节点，表示整个文档的片段。

通过JavaScript，你可以访问和操作DOM元素，例如：




// 获取页面标题
var title = document.title;
 
// 改变段落文本
var paragraph = document.querySelector('p');
paragraph.textContent = 'Updated paragraph.';

这些基本操作展示了如何通过JavaScript与DOM交互，从而动态地修改网页内容。

- 阅读更多 -

从React Native,Flutter到小程序路由

System

2024-08-16

所有,react native

在不同的平台上实现路由功能，React Native、Flutter和小程序都有自己的方法。

React Native
在React Native中，你可以使用React Navigation库来实现路由功能。




import { createStackNavigator } from 'react-navigation';
 
const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

Flutter
在Flutter中，你可以使用MaterialApp或者CupertinoApp来构建你的应用，然后使用Navigator来实现页面的路由。




void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
      routes: {
        '/profile': (context) => ProfileScreen(),
      },
    );
  }
}

小程序
在小程序中，你可以使用<navigator>标签或者wx.navigateTo、wx.redirectTo等API来实现页面的路由。




<!-- wxml -->
<navigator url="/pages/profile/profile">
  跳转到个人资料页面
</navigator>




// js
Page({
  navigateToProfile() {
    wx.navigateTo({
      url: '/pages/profile/profile',
    });
  },
});

以上代码展示了如何在不同平台上实现路由功能。在实际应用中，你需要根据自己的需求来选择合适的路由方式，并且根据平台的API来实现相应的功能。

System

2024-08-16

所有,react native




import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import SwipeListView from 'react-native-swipe-list-view';
 
export default class App extends React.Component {
  // 定义列表数据和SwipeRow的ref
  swipeRowRefs = {};
  data = [...Array(20).keys()]; // 示例数据，生成数字数组
 
  // 删除按钮的回调函数
  deleteRow = (rowMap, rowKey) => {
    rowMap[rowKey].closeRow(); // 关闭当前行
    const newData = [...this.data];
    const index = newData.indexOf(rowKey);
    newData.splice(index, 1); // 删除数据中的对应项
    this.data = newData; // 更新数据
  };
 
  // 用于渲染每一行的函数
  renderRow = (dataObj, rowMap) => {
    const swipeRow = (
      <SwipeRow
        ref={(c) => this.swipeRowRefs[dataObj] = c}
        data={dataObj}
        leftActions={[
          {
            text: 'Delete',
            onPress: () => this.deleteRow(rowMap, dataObj),
            type: 'delete',
          },
        ]}
      >
        <Text>I am {dataObj} in a row</Text>
      </SwipeRow>
    );
    return swipeRow;
  };
 
  render() {
    return (
      <View style={styles.container}>
        <SwipeListView
          data={this.data}
          renderRow={this.renderRow}
          disableRightSwipe
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

这段代码展示了如何使用react-native-swipe-list-view库来创建一个可以滑动列出操作按钮的列表。每一行都可以被滑动并显示删除按钮，点击删除按钮会执行删除行的操作并更新数据。

- 阅读更多 -

【React-Native】自定义Vant--Drawer(抽屉)动画组件

System

2024-08-16

所有,react native




import React, { useRef, useEffect } from 'react';
import { Animated, View, StyleSheet, Dimensions, Platform } from 'react-native';
import { useMount, useUnmount } from 'react-native-hooks';
import { noop } from '../../utils';
 
const { width: deviceWidth } = Dimensions.get('window');
 
export default ({
  visible = false,
  position = 'left',
  drawerStyle,
  drawerContent,
  onClose = noop,
}) => {
  const drawerAnimatedValue = useRef(new Animated.Value(0)).current;
  const isRight = position === 'right';
  const offsetValue = isRight ? deviceWidth : -deviceWidth;
 
  const openDrawer = () => {
    Animated.spring(drawerAnimatedValue, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };
 
  const closeDrawer = () => {
    Animated.spring(drawerAnimatedValue, {
      toValue: 0,
      useNativeDriver: true,
    }).start(() => onClose());
  };
 
  useMount(() => {
    if (visible) {
      openDrawer();
    }
  });
 
  useUnmount(() => {
    closeDrawer();
  });
 
  const translateX = drawerAnimatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [offsetValue, 0],
  });
 
  const transform = [{ translateX }];
  if (Platform.OS === 'android') {
    transform.push({ scale: drawerAnimatedValue });
  }
 
  return (
    <Animated.View style={[styles.drawer, drawerStyle, { transform }]}>
      {drawerContent()}
    </Animated.View>
  );
};
 
const styles = StyleSheet.create({
  drawer: {
    width: deviceWidth,
    position: 'absolute',
    top: 0,
    backgroundColor: 'white',
  },
});

这段代码实现了一个简单的Vant--Drawer组件，它使用React Native的Animated API来实现动画效果。代码中定义了openDrawer和closeDrawer函数来控制抽屉的打开和关闭，并使用了useMount和useUnmount钩子来处理组件挂载和卸载时的逻辑。此外，代码还处理了平台特有的样式差异，确保抽屉在Android和iOS上的表现一致。

- 阅读更多 -

React Native - webview 内外通信

System

2024-08-16

所有,react native

在React Native中，WebView组件可以用来加载网页。为了实现WebView与React Native间的内外通信，可以使用WebView的onMessage属性来接收来自网页的消息，以及使用postMessage方法来向网页发送消息。

以下是一个简单的例子：




import React, { useRef } from 'react';
import { View, WebView } from 'react-native';
 
const MyWebView = () => {
  const webview = useRef(null);
 
  const handleMessage = (event) => {
    const { nativeEvent } = event;
    console.log('Received message from webview:', nativeEvent.data);
  };
 
  const sendMessageToWebView = () => {
    webview.current.postMessage('Hello from React Native!');
  };
 
  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webview}
        source={{ uri: 'https://yourwebsite.com' }}
        onMessage={handleMessage}
      />
      <Button title="Send Message" onPress={sendMessageToWebView} />
    </View>
  );
};
 
export default MyWebView;

在网页中，可以使用window.postMessage方法向React Native发送消息，并且在React Native中通过onMessage属性接收消息。

确保网页代码中正确地使用了postMessage方法，并且在React Native中正确处理了onMessage事件。这样，你就可以在React Native和WebView之间实现双向通信了。

- 阅读更多 -

React Native运行后报错

System

2024-08-16

所有,react native

为了提供一个精确的解决方案，我需要更多的上下文信息，例如具体的错误信息、React Native项目的配置以及您正在使用的操作系统。然而，我可以提供一些常见的React Native错误处理策略：

检查日志：查看错误信息的完整堆栈跟踪，它通常会指出问题的原因。
更新依赖：确保React Native及其所有依赖项（如Node.js、npm/yarn）都是最新版本。
重新安装依赖：删除node_modules文件夹和package-lock.json或yarn.lock文件，然后重新运行npm install或yarn。
清除缓存：对于iOS，可以使用xcodebuild -project [项目名].xcodeproj -scheme [scheme名] clean。对于Android，可以使用./gradlew clean。
模拟器/设备检查：如果是iOS，确保Xcode和模拟器是最新的，并且设备已正确连接。对于Android，确保Android Studio是最新的，设备已连接，并且ADB正在运行。
网络问题：检查是否有任何网络问题，如代理设置或网络连接问题，这可能会影响包管理器和依赖下载。
重新启动开发服务器：有时，重新启动Metro Bundler（运行npm start或yarn start）可以解决问题。
项目配置检查：检查app.json或index.js中的配置是否正确，没有错误或遗漏的必要配置项。

如果您能提供具体的错误信息，我可以提供更加针对性的帮助。

System

2024-08-16

所有,react native




import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
 
class MyApp extends Component {
  componentDidMount() {
    // 延迟300毫秒后隐藏启动屏幕
    setTimeout(() => {
      SplashScreen.hide();
    }, 300);
  }
 
  render() {
    // 渲染你的应用主界面
    return (
      <View>
        <Text>Hello, World!</Text>
      </View>
    );
  }
}
 
// 注册应用启动时的启动屏幕
SplashScreen.preventAutoHide();
 
// 注册应用的根组件
AppRegistry.registerComponent('MyApp', () => MyApp);

这段代码展示了如何在React Native应用中使用react-native-splash-screen库来实现一个启动页。在componentDidMount生命周期方法中，我们使用setTimeout来延迟隐藏启动屏幕，以此模拟一个启动页存在的场景。这是一个简单的例子，实际应用中可能需要更复杂的逻辑来处理启动页的显示和隐藏。

- 阅读更多 -