System 发布的文章

2024-08-21

在Vue 3.0 + Three.js的项目中，如果您遇到光源设置不生效的问题，可能是由于以下原因造成的：

没有正确添加光源到场景中。
光源的参数设置不正确。
渲染循环中没有考虑光源的更新。

解决方法：

确保您已经创建了光源对象，并使用了正确的Three.js光源构造函数。
将光源添加到Three.js场景中。
```
scene.add(light);
```
检查光源参数设置是否正确，如光源颜色、强度、范围等。
如果是动态光源，确保在Vue的渲染循环中更新光源的状态。
```
light.intensity = 1.5; // 举例修改强度
```
如果是使用了HemisphereLight而没有效果，检查是否有其他物体遮挡了光源。

如果以上步骤仍然无法解决问题，请提供更详细的代码示例以便进一步分析。

2024-08-21

在Node.js中操作MDB文件，可以使用以下三种方法：

使用mdb-parser库解析MDB文件。
使用adodb库连接到MDB文件并执行SQL查询。
使用mdb-sql将MDB文件转换为SQLite数据库，然后使用标准的SQLite库进行操作。

以下是每种方法的示例代码：

使用mdb-parser库解析MDB文件：




const mdb = require('mdb-parser');
 
mdb.openMDB('example.mdb', function(err, data) {
    if (err) {
        console.error(err);
        return;
    }
    console.log(data); // 打印数据库内容
});

使用adodb库连接到MDB文件并执行SQL查询：




const ADODB = require('adodb');
 
ADODB.open('Provider=Microsoft.Jet.OLEDB.4.0;Data Source=example.mdb','','', function (err, conn) {
    if (err) {
        console.error(err);
        return;
    }
    conn.query('SELECT * FROM someTable', function(err, rows) {
        if (err) {
            console.error(err);
            return;
        }
        console.log(rows); // 打印查询结果
    });
    conn.close();
});

使用mdb-sql将MDB文件转换为SQLite数据库，然后使用标准的SQLite库进行操作：




const sqlite3 = require('sqlite3').verbose();
const mdbSql = require('mdb-sql');
 
mdbSql.toSqlite('example.mdb', 'example.sqlite', function(err) {
    if (err) {
        console.error(err);
        return;
    }
 
    let db = new sqlite3.Database('example.sqlite', (err) => {
        if (err) {
            console.error(err.message);
        }
    });
 
    db.all('SELECT * FROM someTable', (err, rows) => {
        if (err) {
            console.error(err.message);
        }
        console.log(rows); // 打印查询结果
    });
 
    db.close((err) => {
        if (err) {
            console.error(err.message);
        }
    });
});

注意：由于MS Access数据库文件（MDB）的格式较老并且不是开源的，因此这些库可能不是完全兼容所有MDB文件的功能。使用时请查阅相关库的文档。

vue3+ts使用vueCookies进行cookies的存取

2024-08-21

在Vue 3和TypeScript中使用vue-cookies进行Cookies的存取，首先需要安装vue-cookies-next库，因为vue-cookies已经停止维护。




npm install vue-cookies-next

然后在Vue应用中进行配置：




// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies-next'
 
const app = createApp(App)
 
app.use(VueCookies)
 
app.mount('#app')

在组件中使用：




<template>
  <div>
    <button @click="setCookie">Set Cookie</button>
    <button @click="getCookie">Get Cookie</button>
  </div>
</template>
 
<script lang="ts">
import { Vue, Options } from 'vue-class-component'
 
@Options({})
export default class CookieExample extends Vue {
  // 设置Cookie
  setCookie(): void {
    this.$cookies.set('my-cookie-name', 'my-cookie-value', '1D') // 有效期为1天
  }
 
  // 获取Cookie
  getCookie(): void {
    const cookieValue = this.$cookies.get('my-cookie-name')
    alert(`Cookie value is: ${cookieValue}`)
  }
}
</script>

在上面的例子中，我们定义了一个Vue组件，它有两个按钮，一个用于设置名为'my-cookie-name'的Cookie，另一个用于获取并弹窗显示该Cookie的值。设置Cookie时，我们指定了Cookie的值和有效期（例如，'1D'代表1天）。

TypeScript（ts）泛型说明及基本使用

2024-08-21




// 定义一个泛型函数，用于创建一个值的可观察对象
function observable<T>(initialValue: T): Observable<T> {
    // 实现细节
    return {
        value: initialValue,
        subscribe: (observer: Observer<T>) => {
            // 当值改变时通知观察者
            observer.next(this.value);
        }
    };
}
 
// 定义观察者接口
interface Observer<T> {
    next: (value: T) => void;
    error?: (error: any) => void;
    complete?: () => void;
}
 
// 定义可观察对象接口
interface Observable<T> {
    value: T;
    subscribe: (observer: Observer<T>) => Unsubscribe;
}
 
// 定义取消订阅的函数类型
type Unsubscribe = () => void;
 
// 使用泛型函数创建一个string类型的可观察对象
const stringObservable = observable<string>("Hello, World!");
 
// 创建观察者
const stringObserver = {
    next: (value: string) => console.log(value), // 当值改变时打印出来
    error: (error: any) => console.error(error), // 当出现错误时打印错误信息
    complete: () => console.log("Completed") // 当观察完成时打印完成信息
};
 
// 订阅可观察对象
const unsubscribe = stringObservable.subscribe(stringObserver);
 
// 取消订阅
unsubscribe();

这段代码定义了一个泛型函数observable，它接受一个初始值并返回一个可观察对象。同时定义了Observer和Observable接口，以及一个Unsubscribe类型，用于取消订阅操作。最后，我们创建了一个string类型的可观察对象，并定义了一个观察者来处理值的变化、错误和完成情况。

Vite 配置不同环境跨域

2024-08-21

在Vite项目中，配置不同环境的跨域可以通过修改vite.config.js文件来实现。以下是一个配置示例，其中定义了两个环境（development和production）的跨域配置：




import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// 跨域配置函数
function getProxyConfig(env) {
  if (env === 'development') {
    return {
      '/api': {
        target: 'http://dev.api.com',
        changeOrigin: true,
        // 其他可选配置...
      },
    };
  } else if (env === 'production') {
    return {
      '/api': {
        target: 'http://prod.api.com',
        changeOrigin: true,
        // 其他可选配置...
      },
    };
  }
}
 
// 获取环境变量
const env = process.env.VITE_ENV;
 
export default defineConfig({
  plugins: [react()],
  server: {
    // 使用环境变量来设置跨域
    proxy: getProxyConfig(env),
  },
});

在这个配置中，我们定义了一个getProxyConfig函数，它根据传入的环境变量来返回不同的代理配置。然后，我们通过从环境变量VITE_ENV获取当前环境，并将其传递给该函数来设置跨域配置。

确保在启动Vite开发服务器之前，正确设置了环境变量。例如，在不同的环境下可以通过以下命令来设置环境变量：




# 开发环境
VITE_ENV=development vite
 
# 生产环境
VITE_ENV=production vite

这样，你就可以根据不同的环境来配置跨域请求了。

前端常见问题以及处理方式 - - - js中的 async 函数

2024-08-21

在JavaScript中，async函数是一种特殊类型的函数，它们是异步编程的基础。async函数使得我们可以使用await关键字来写出更简洁、更可读的异步代码。

问题：如何处理async函数中的常见错误？

解决方案：

捕获异常：在async函数中，可以使用try...catch语句来捕获和处理错误。




async function asyncFunction() {
  try {
    // 可能会抛出错误的代码
    let result = await someAsyncCall();
  } catch (error) {
    // 处理错误
    console.error(error);
  }
}

返回rejected的Promise：如果你想要返回错误信息，而不是抛出异常，你可以返回一个rejected的Promise。




async function asyncFunction() {
  // 假设这个函数可能会失败
  let success = someCondition();
  if (!success) {
    return Promise.reject(new Error("Function failed"));
  }
  // 其他代码...
}

使用.catch()处理Promise中的错误：在Promise链中，你可以使用.catch()来处理错误。




asyncFunction()
  .then(result => {
    // 使用结果
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

确保在async函数中合理处理错误，这样可以避免未捕获的异常，并保持代码的健壮性。

2024-08-21

报错信息提示需要设置"type"来加载ES模块。这通常发生在尝试直接运行一个使用ES模块语法编写的TypeScript文件时，因为Node.js默认不识别ES模块的导入和导出语法。

解决方法：

确保你的项目中有一个tsconfig.json文件，并且其中的compilerOptions部分包含"module": "commonjs"。这样编译后的JavaScript代码将使用CommonJS模块语法，Node.js能够理解。
如果你想使用ES模块语法，确保你的Node.js版本支持这种语法（Node.js v13.2.0+），并且在tsconfig.json中设置"module": "esnext"。
如果你正在使用pm2来运行你的应用，并且你希望使用ts-node来直接运行TypeScript文件，你可以在pm2的配置文件中指定要运行的脚本为ts-node命令，例如：
```
{
  "name": "your-app",
  "script": "ts-node",
  "args": "./src/index.ts"
}
```
确保你已经安装了ts-node依赖，并且在你的环境中设置了适当的NODE_ENV，例如production或development，以便TypeScript编译器按照你的配置编译代码。
如果你不想使用ts-node，你可以使用tsc来先编译你的TypeScript代码，然后用pm2启动编译后的JavaScript代码。

确保在每次更改了tsconfig.json后重新编译你的项目，以使配置生效。

ReactNative 工程使用Svg

2024-08-21

在React Native项目中使用SVG图像，你可以使用react-native-svg库。以下是如何安装和使用react-native-svg的步骤：

安装react-native-svg库：




npm install react-native-svg

链接原生模块（如果你使用的是React Native 0.60及以上版本，则自动链接）：




react-native link react-native-svg

在你的React Native项目中导入并使用Svg组件：




import React from 'react';
import { View } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';
 
const MyComponent = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Svg height="100" width="100">
      <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
    </Svg>
  </View>
);
 
export default MyComponent;

在这个例子中，我们创建了一个Svg组件，并在其中放置了一个Circle形状。这个Circle将显示为一个蓝色的边框和绿色的填充色。这只是一个简单的示例，react-native-svg支持更多的形状和属性。

TypeScript 基础知识之对象、数组

2024-08-21




// 定义一个简单的对象
const person: {
    name: string;
    age: number;
} = {
    name: 'Alice',
    age: 25
};
 
// 访问对象属性
console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: 25
 
// 定义一个数组，数组中的元素都是对象
const people: {
    name: string;
    age: number;
}[] = [
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 22 }
];
 
// 遍历数组访问对象属性
people.forEach(p => {
    console.log(p.name);
    console.log(p.age);
});
 
// 定义一个数组，数组中的元素类型不固定
const things = [
    'shoes',
    42,
    { item: 'hat' }
];
 
// 遍历访问数组中的元素
things.forEach(t => {
    console.log(t);
});

这个代码实例展示了如何在TypeScript中定义和使用对象、数组以及如何遍历访问它们的属性和元素。对于初学者来说，这是一个很好的基础练习。

javascript运行时动态生成类

2024-08-21

在JavaScript中，可以使用函数来模拟类的定义，然后通过调用该函数来创建新的类实例。以下是一个简单的例子：




// 定义一个函数来模拟类的定义
function defineClass(name, methods) {
    function Class() {
        if (this instanceof Class) {
            // 如果使用new关键字，则执行构造函数逻辑
            for (let method in methods) {
                if (methods.hasOwnProperty(method)) {
                    this[method] = methods[method];
                }
            }
        } else {
            // 如果不使用new关键字，抛出错误
            throw new Error('Class constructor ' + name + ' must be called with new');
        }
    }
 
    // 添加类方法
    for (let method in methods) {
        if (methods.hasOwnProperty(method)) {
            Class.prototype[method] = methods[method];
        }
    }
 
    // 返回定义的类
    return Class;
}
 
// 使用defineClass函数动态创建一个新的类
var MyClass = defineClass('MyClass', {
    greet: function() {
        console.log('Hello, ' + this.name);
    }
});
 
// 创建类的实例
var myInstance = new MyClass();
myInstance.name = 'World';
myInstance.greet(); // 输出: Hello, World

在这个例子中，defineClass函数接受类名和一个包含方法的对象作为参数。这个函数返回一个构造函数，可以用来创建该类的新实例。通过这种方式，可以在运行时动态创建类，这在某些情况下可能提供了更大的灵活性。