mysql - Electron 桌面应用程序 : Using mysql data in a component with Angular2 front end

Question

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

我正在使用本地数据库 (mysql) 来保存汇总数据，例如按期间的销售、预测。我已经使用 mysql 模块成功地从数据库中提取了 javascript 文件中的信息。

**var mysql = require('mysql')
//credentials for the database
var connection = mysql.createConnection({
    host        :'localhost',
    user        :'root',
    password    :'root',
    database    :'dw' 
});
...etc**

我想在使用 TypeScript 的前端使用 Angular2。 如何将从数据库 (Javascript) 中提取的信息发送到 Typescript 中不同文件中的 Angular 组件？

这是通过渲染页面和主页之间的 IPC 执行的吗？ 对数据库的 HTTP 服务调用似乎有点过分，因为它在同一台电脑上。 我是否需要只要求对组件进行 Javascript 数据库调用？

Answer 1

更新 可以在不与主线程通信的情况下直接从组件调用数据库。 创建一个 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');
        }

希望这对您有所帮助。