标签 elasticsearch 下的文章

基于resnet的动物图像分类系统（python期末大作业）PyQt+Flask+HTML5+PyTorch+源代码+文档说明

2024-08-12

由于提供的代码已经相对完整，以下是核心函数的简化版本，展示如何使用PyTorch进行基于ResNet的动物图像分类：




import torch
import torch.nn as nn
import torch.optim as optim
from torchvision import datasets, models, transforms
 
# 定义ResNet模型
def resnet_model(num_classes, pretrained=True):
    model = models.resnet18(pretrained=pretrained)
    num_ftrs = model.fc.in_features
    model.fc = nn.Linear(num_ftrs, num_classes)
    return model
 
# 定义损失函数和优化器
criterion = nn.CrossEntropyLoss()
optimizer = optim.SGD(model.parameters(), lr=0.001, momentum=0.9)
 
# 加载数据
transform = transforms.Compose(
    [transforms.ToTensor(),
     transforms.Normalize((0.5, 0.5, 0.5), (0.5, 0.5, 0.5))])
trainset = datasets.CIFAR10(root='./data', train=True, download=True, transform=transform)
trainloader = torch.utils.data.DataLoader(trainset, batch_size=4, shuffle=True, num_workers=2)
 
testset = datasets.CIFAR10(root='./data', train=False, download=True, transform=transform)
testloader = torch.utils.data.DataLoader(testset, batch_size=4, shuffle=False, num_workers=2)
 
classes = ('plane', 'car', 'bird', 'cat', 'deer', 'dog', 'frog', 'horse', 'ship', 'truck')
 
# 训练模型
def train_model(model, criterion, optimizer, epochs=25):
    for epoch in range(epochs):
        running_loss = 0.0
        for i, data in enumerate(trainloader, 0):
            inputs, labels = data
            optimizer.zero_grad()
            outputs = model(inputs)
            loss = criterion(outputs, labels)
            loss.backward()
            optimizer.step()
            running_loss += loss.item()
            if i % 2000 == 1999:
                print('[%d, %5d] loss: %.3f' % (epoch + 1, i + 1, running_loss / 2000))
                running_loss = 0.0
 
# 测试模型
def test_model(model, testloader):
    correct = 0
    total = 0
    with torch.no_grad():
        for data in testloader:
            images, labels = data
            outputs = model(images)
            _, predicted = torch.max(outputs.data, 1)
            total += labels.size(0)
            correct += (predicted == labels).sum().item()
    print('Accuracy of the network on the 10000 test images: %d %%' % (100 * correct / total))
 
# 实例化模型
model = resnet_model(num_classes=10)
 
# 训练和测试模型
train_model(mo

- 阅读更多 -

HTML5本地存储（localStorage和sessionStorage）

System

2024-08-12

所有,html5

HTML5提供了两种在客户端存储数据的机制：localStorage和sessionStorage。

localStorage: 用于长久保存整个网页的数据，保存的数据没有时间限制。它是针对一个域名的，同源策略。
sessionStorage: 用于临时保存同一窗口(window)或标签页的数据，在关闭窗口或标签页之后数据会被清除。

以下是使用localStorage和sessionStorage的示例代码：




<!DOCTYPE html>
<html>
<body>
 
<h2>LocalStorage 示例</h2>
<p>在输入框中输入文本，然后刷新页面，文本会保持不变。</p>
<input type="text" id="myText" onchange="save()">
<button onclick="load()">载入文本</button>
<script>
function save() {
    var text = document.getElementById('myText').value;
    localStorage.setItem('myKey', text);
}
 
function load() {
    var text = localStorage.getItem('myKey');
    if (text) {
        document.getElementById('myText').value = text;
    }
}
</script>
 
<h2>SessionStorage 示例</h2>
<p>在输入框中输入文本，关闭标签页后文本会消失。</p>
<input type="text" id="sessionText" onchange="saveSession()">
<button onclick="loadSession()">载入文本</button>
<script>
function saveSession() {
    var text = document.getElementById('sessionText').value;
    sessionStorage.setItem('sessionKey', text);
}
 
function loadSession() {
    var text = sessionStorage.getItem('sessionKey');
    if (text) {
        document.getElementById('sessionText').value = text;
    }
}
</script>
 
</body>
</html>

在这个例子中，save()和load()函数用于操作localStorage，而saveSession()和loadSession()函数用于操作sessionStorage。这些操作主要通过setItem和getItem方法实现。

- 阅读更多 -

DataTables高级初始化

System

2024-08-12

所有,jquery




$(document).ready(function() {
    $('#example').DataTable({
        "processing": true, // 启用数据处理提示
        "serverSide": true, // 服务器模式
        "ajax": {
            "url": "your-data-source.php", // 数据源URL
            "type": "POST" // 请求类型
        },
        "columns": [
            { "data": "name" }, // 绑定数据源的name字段
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "start_date" },
            { "data": "salary" }
        ],
        "order": [
            [1, 'asc'] // 根据第二列升序排序
        ],
        "columnDefs": [
            {
                "targets": [0], // 第一列
                "orderable": false // 不可排序
            }
        ]
    });
});

这段代码展示了如何初始化DataTables插件，以服务器模式工作，通过POST请求从your-data-source.php获取数据，并设置了列的排序和不可排序的列。这是一个更为复杂和实际的初始化示例，适用于需要处理大量数据的情况。

- 阅读更多 -

使用Typescript改造React项目

System

2024-08-12

所有,typescript

要在React项目中使用TypeScript，您需要按照以下步骤操作：

确保你有一个React项目。如果没有，可以使用create-react-app创建一个新的项目，并且确保你使用的是16.8或更高版本。

安装TypeScript。在项目根目录下运行：




npm install --save typescript @types/node @types/react @types/react-dom @types/jest

创建一个tsconfig.json文件，该文件指定了TypeScript编译选项。可以通过运行tsc --init来生成一个默认的配置文件。
将项目的入口文件从.jsx或.js扩展名更改为.tsx。例如，如果你的入口文件是src/index.js，将其重命名为src/index.tsx。

修改package.json中的脚本部分，添加TypeScript的编译命令。例如：




"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "tsc": "tsc"
}

运行TypeScript编译器来检查代码的正确性并生成相应的.js和.d.ts文件：
```
npm run tsc
```
如果需要，继续调整编译后的代码，直至所有TypeScript错误都被解决。

以下是一个简单的tsconfig.json配置文件示例：




{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [
    "src"
  ]
}

这个配置文件指定TypeScript编译器将会处理src目录下的所有文件，并且设置了一些编译选项，如模块解析策略和类型检查严格程度。

- 阅读更多 -

TypeScript常用知识点及其最佳实践总结

System

2024-08-12

所有,typescript




// 定义一个简单的TypeScript接口
interface Person {
  name: string;
  age: number;
}
 
// 实现接口
const person: Person = {
  name: 'Alice',
  age: 30
};
 
// 使用泛型定义一个函数，该函数可以处理不同类型的数据
function identity<T>(arg: T): T {
  return arg;
}
 
// 使用泛型定义一个类，用于存储不同类型的数据
class Box<T> {
  private value: T;
 
  constructor(value: T) {
    this.value = value;
  }
 
  public getValue(): T {
    return this.value;
  }
}
 
// 使用泛型类创建一个String类型的Box实例
const stringBox = new Box<string>('Hello World');
 
// 使用泛型类创建一个Number类型的Box实例
const numberBox = new Box<number>(42);
 
// 使用类型别名定义一个新的类型
type StringOrNumber = string | number;
 
// 使用类型断言确保类型安全
const someValue: any = 'This is a string';
const stringValue = (<string>someValue).toUpperCase();
 
// 使用类型保护来检查类型并执行不同的操作
function isNumber(x: StringOrNumber): x is number {
  return typeof x === 'number';
}
 
const a: StringOrNumber = 123;
if (isNumber(a)) {
  console.log(a + 1);  // 在类型保护之后，a被识别为number
} else {
  console.log(a.toUpperCase());  // 在类型保护之后，a被识别为string
}

这段代码展示了TypeScript中的一些基本概念，包括接口、泛型、泛型类、类型别名、类型断言和类型保护。每一个概念都是TypeScript语言的核心特性，并且在实际开发中都有广泛的应用。通过学习这些最佳实践，开发者可以编写更加清晰、类型安全的代码。

- 阅读更多 -

[TypeScript]Vue/React子组件实例暴露方法

System

2024-08-12

所有,typescript




import Vue from 'vue';
 
// 定义Vue子组件
const MyVueComponent = Vue.extend({
  methods: {
    publicMethod() {
      console.log('Vue子组件的公开方法');
    }
  }
});
 
// 创建Vue子组件实例
const vueComponentInstance = new MyVueComponent({
  propsData: {}
});
 
// 通过$expose暴露方法
vueComponentInstance.$expose({
  publicMethod: vueComponentInstance.publicMethod
});
 
// 定义React子组件
function MyReactComponent() {
  const publicMethod = () => {
    console.log('React子组件的公开方法');
  };
 
  // 通过React的useImperativeHandle来暴露方法
  useImperativeHandle(ref, () => ({
    publicMethod
  }));
 
  return <div>React子组件内容</div>;
}
 
// 使用React.forwardRef来获取对子组件实例的引用
const MyForwardedReactComponent = React.forwardRef(MyReactComponent);
 
// 创建React子组件实例，并通过ref获取其实例
const reactComponentRef = React.createRef();
ReactDOM.render(<MyForwardedReactComponent ref={reactComponentRef} />, document.getElementById('app'));
 
// 通过ref调用公开方法
reactComponentRef.current.publicMethod();

这个代码示例展示了如何在Vue和React中创建子组件实例，并通过特定的方法暴露其方法，以便父组件可以调用。在Vue中，可以通过$expose方法来实现这一点。在React中，可以使用forwardRef和useImperativeHandle来暴露引用，这样父组件就可以通过ref调用子组件的方法。

- 阅读更多 -

TypeScript详解十六：类型声明（declare）

System

2024-08-12

所有,typescript

在TypeScript中，使用declare关键字来声明变量，这些变量可以用于声明某个类型，但是并不提供实现。这通常用于类型声明文件（.d.ts），以及在.ts文件中，当你想引入全局变量或者模块，但不想在当前文件中提供实现时。

以下是一些使用declare的例子：

声明全局变量：




declare var jQuery: any;

声明全局函数：




declare function jQuery(selector: string): any;

声明全局接口：




declare interface JQuery {
    // ...
}

声明模块：




declare module "my-module" {
    // ...
}

声明namespace（命名空间）：




declare namespace MyNamespace {
    // ...
}

声明类型别名：




declare type MyTypeAlias = {
    // ...
};

使用declare声明一个类：




declare class MyClass {
    // ...
}

使用declare声明枚举：




declare enum MyEnum {
    // ...
}

请注意，declare关键字并不会为变量或类型创建存储空间。它仅仅表示变量或类型的声明，而不是定义。在实际编译为JavaScript时，这些声明通常会被删除。

- 阅读更多 -

选择 TypeScript 还是 JavaScript？权衡

System

2024-08-12

所有,typescript

选择 TypeScript 还是 JavaScript 取决于具体的项目需求和个人偏好。以下是选择 TypeScript 或 JavaScript 的一些关键考虑因素：

类型检查 - TypeScript 提供了类型检查，这有助于在编码时发现错误。对于大型项目或者需要多人合作的项目，这特别有帮助。
可维护性 - 类型声明可以提高代码的可读性和可维护性。类型注释使得理解代码更加直观，甚至在没有文档的情况下也能理解代码意图。
工具支持 - 现代的 IDE 和构建工具（如 Webpack, Babel）对 TypeScript 提供了很好的支持。
学习曲线 - TypeScript 有一定的学习曲线，需要理解类型系统和类型约束，但是一旦学会，可以带来很大的生产力提升。
生态系统 - 随着时间的推移，TypeScript 在开发者中的接受度和生态系统的支持力度正在增长。
团队偏好 - 查看团队成员的偏好，确保大多数人能从 TypeScript 获得好处。
初始成本 - 如果你的项目需要从零开始，并且时间紧迫，可能会考虑 JavaScript 作为一个更快的起点。
长期成本 - 随着项目的发展，可能需要更多的时间来维护类型注释，但这可能会在未来节省更多时间。

选择 TypeScript 还是 JavaScript 应该基于项目的具体需求和团队的技术偏好。如果你是 JavaScript 用户，你可能想要保持简洁，直到你发现类型系统带来的好处。如果你是类型系统爱好者，那么 TypeScript 可能是更好的选择。

System

2024-08-12

所有,typescript

在TypeScript中，我们可以使用以下基本类型来定义变量：

string - 用于表示文本数据。
number - 用于表示数值数据。
boolean - 用于表示布尔数据，它只有两个值：true 或 false。
void - 用于表示没有任何数据，通常用作函数的返回类型，当函数不返回任何值时可以使用。
null - 表示空值。
undefined - 表示未定义的值。

下面是每种类型的示例代码：




// string 类型
let name: string = "John Doe";
 
// number 类型
let age: number = 30;
 
// boolean 类型
let isEmployed: boolean = true;
 
// void 类型
function sayHello(): void {
    console.log("Hello!");
}
 
// null 类型
let value1: null = null;
 
// undefined 类型
let value2: undefined = undefined;

在TypeScript中，你可以通过类型注解来指定变量的类型。当你尝试为变量赋予不同类型的值时，TypeScript会在编译时报错。

System

2024-08-12

所有,javascript

报错解释：

这个错误表明在main.js文件的第46行代码中尝试访问一个名为router的变量或对象，但是在访问它之前它没有被正确初始化。这通常发生在JavaScript代码中尝试访问一个变量，但是在访问代码之前，该变量的声明或定义还没有执行。

解决方法：

确保router对象在第46行代码执行之前已经被初始化。如果router是由一个模块导入的，确保导入语句在使用router之前执行。
检查代码中的导入语句和变量声明，确保它们按正确的顺序出现，并且在你尝试使用router之前已经执行。
如果router是在某个异步过程中初始化的（例如，从服务器加载配置或路由表），确保在使用router之前，异步初始化过程已经完成。

示例代码修正：




// 假设 router 是 Vue Router 实例
import VueRouter from 'vue-router';
 
// 确保 Vue 和 VueRouter 已经加载
Vue.use(VueRouter);
 
// 初始化 router 实例
const router = new VueRouter({
  // ... 路由配置
});
 
// 现在可以安全地使用 router
new Vue({
  router,
  // ...
}).$mount('#app');

确保在创建Vue实例之前初始化router对象，并且在Vue实例中正确引用它。

- 阅读更多 -