Question

我是Electron的新手，是我第一次尝试创建应用。这是一款桌面应用。该应用程序的一个页面仅显示客户使用标准数据库查询的当前预测。

我使用本地数据库（mysql）来按期保存销售，预测等摘要数据。我已经使用mysql模块在javascript文件中成功地从数据库中提取了信息。

    for (int row = 0; row < image_entry.rows(); ++row)
    {
        short[] ptr_entry = image_entry.<short>ptr(row);
        uchar[] ptr_compressed = image_compressed.<uchar>ptr(row);
        uchar[] ptr_output = image_output.<uchar>ptr(row);

        for (int col = 0; col < image_entry.cols(); col++)
        {
            // Calculation of the absolute difference in each color channel, multiplied by the scale
            ptr_output[0] = Math.abs(ptr_entry[0] - ptr_compressed[0]) * scale;
            ptr_output[1] = Math.abs(ptr_entry[1] - ptr_compressed[1]) * scale;
            ptr_output[2] = Math.abs(ptr_entry[2] - ptr_compressed[2]) * scale;

            ptr_entry += 3;
            ptr_compressed += 3;
            ptr_output += 3;
        }
    }

我想在使用TypeScript的前端使用Angular2。如何将从数据库（Javascript）获取的信息发送到Typescript中的Angular组件并且位于不同的文件中？

这是通过IPC在渲染页面和主页面之间执行的吗？对DB的HTTP服务调用看起来有点矫枉过正，因为它在同一台PC上。我是否只需要将Javascript DB调用放入组件中？

Answer 1

您不一定需要在javascript中编写MySQL客户端代码。您可以使用类型声明：https://www.npmjs.com/package/@types/mysql

如果你真的想使用javascript，那么你需要编写一组最小的类型声明。足以使打字稿编译器相信您使用的功能确实存在。在编写打字稿代码之后，不需要任何IPC，在运行时它将最终在调用其他javascript函数的javascript函数中结束。

关键是你必须使打字稿编译器相信MySQL库存在。要实现它，您可以安装上面链接的包中的输入，或者自己写一个最小的声明。

Answer 2

<强>更新可以直接从组件调用db而无需与主线程通信。创建DB服务：

import {Injectable} from '@angular/core';
const mysql = (<any>window).require('mysql');

@Injectable()
export class DBService {
    connection: any;

    constructor() {
        this.connection = mysql.createConnection({
            host: 'localhost',
            user: 'username',
            password: 'password',
            database: 'db_name'
        });
        this.connection.connect((err) => {
           if (err) {
             console.log('error connecting', err);
           }
        });
    }

    query(sql: string) {
        this.connection.query(sql, function(err, results, fields) {
            console.log('err', err);
            console.log('results', results);
            console.log('fields', fields);
        });
    }
}

然后，在你的任何Angular 2+组件中：

import {Component, OnInit} from '@angular/core';
import {DBService} from './services/db.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private db: DBService) {}
  ngOnInit() {}
  getProducts() {
      this.db.query('SELECT * FROM product');
  }
}

旧答案

这是我目前使用Angular 2 +连接到mysql的解决方法。

在main.js：

const {app, BrowserWindow, ipcMain} = require('electron')

const mysql = require('mysql')
const connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'username',
    password : 'password',
    database: 'your_database'
});
connection.connect(function(err) {
    if (err) {
        console.log('connect', err);
    }
});

ipcMain.on('query', function(e, sql) {
    console.log('query received', sql);
    connection.query(sql, function(err, rows, fields) {
        if(err){
            console.log('error executing', err);
            return false;
        }
        console.log('success', rows);
    });
});

创建DB服务（app / services / db.service.ts）

import { Injectable } from '@angular/core';
const electron = (<any>window).require('electron');

@Injectable()
export class DBService {

  constructor() { }

  query(sql: string) {
      electron.ipcRenderer.send('query', sql);
  }
}

（不要忘记将其添加到app.modules.ts）

import {DBService} from './services/db.service';
...
providers: [DBService]

然后，在Angular2 +应用程序的任何组件中，您都可以使用它：

        import {DBService} from './services/db.service';
        ...
        constructor(private db: DBService) {}
        getProducts() {
           this.db.query('SELECT * FROM product');
        }

希望这有帮助。

Electron Desktop App：在具有Angular2前端的组件中使用mysql数据

2 个答案: