質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

1234閲覧

TypeScriptを使ったMySQLからのデータ取得

kazumasaxx

総合スコア0

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2020/11/11 01:11

よろしくお願いいたします。

前提・実現したいこと

mysqlのデータをWEB画面に表示したい(TypeScriptを使ってやりたい)

発生している問題・エラーメッセージ

MySQLへのconnectionを実行するとWEB画面が真っ白になる

エラーメッセージは出ていません。

該当のソースコード

test.component.ts import { Component, OnInit } from '@angular/core'; import * as sqlqery from './sql'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { message: string; Datas: MySQLData[]; constructor() { this.message = 'This is a sample of Angular application.'; this.Datas = []; let mycon = sqlqery.connection(); this.message = mycon.messagestatus; mycon.connect(); mycon.query('SELECT * from new_table LIMIT 2;', (err, rows, fields) => { if (err) throw err; //固定データが表示されるようにテスト用 var tmp = new MySQLData(); tmp.id = 12; tmp.LabelName = 'rows1'; tmp.OffsetAddress = 7777; this.Datas.push(tmp); }); mycon.end(); } ngOnInit(): void { this.Datas = this.getData(); } getData(): MySQLData[] { return this.Datas; } } export class MySQLData { id: number; LabelName: string; OffsetAddress: number; }
sql.ts let messagestatus: string; export function connection() { const mysql = require('mysql'); const connection = mysql.createConnection({ host: '192.17.200.20', user: 'root', password: 'pass', database: 'Data', multipleStatements: true }); console.log("Connect!!"); messagestatus = "Connect!!"; return connection; } let mycon = connection(); mycon.connect(); mycon.query('SELECT * from new_table LIMIT 2;', (err, rows, fields) => { if (err) throw err; console.log(rows); }); mycon.end();

試したこと

【単体でDBからデータを取得】
コマンドで下記を実行
tsc src/app/test/sql.ts
node src/app/test/sql.js

コンソール上でデータが取得できることを確認

しかし、下記のコマンドでブラウザで見ようとすると見れない
ng serve --host 0.0.0.0 --port 8000

補足情報(FW/ツールのバージョンなど)

Anglularのプロジェクトの作り方などは、http://www.tohoho-web.com/ex/angular.html#edit-html-cssを参考にしています。

packagejson

1{ 2 "name": "test-mysql", 3 "version": "0.0.0", 4 "scripts": { 5 "ng": "ng", 6 "start": "ng serve", 7 "build": "ng build", 8 "test": "ng test", 9 "lint": "ng lint", 10 "e2e": "ng e2e" 11 }, 12 "private": true, 13 "dependencies": { 14 "@angular/animations": "~10.2.0", 15 "@angular/common": "~10.2.0", 16 "@angular/compiler": "~10.2.0", 17 "@angular/core": "~10.2.0", 18 "@angular/forms": "~10.2.0", 19 "@angular/platform-browser": "~10.2.0", 20 "@angular/platform-browser-dynamic": "~10.2.0", 21 "@angular/router": "~10.2.0", 22 "@types/mysql": "^2.15.15", 23 "mysql2": "^2.2.5", 24 "promise-mysql": "^4.1.3", 25 "rxjs": "~6.6.0", 26 "tslib": "^2.0.0", 27 "zone.js": "~0.10.2" 28 }, 29 "devDependencies": { 30 "@angular-devkit/build-angular": "~0.1002.0", 31 "@angular/cli": "~10.2.0", 32 "@angular/compiler-cli": "~10.2.0", 33 "@types/jasmine": "~3.5.0", 34 "@types/jasminewd2": "~2.0.3", 35 "@types/node": "^12.19.4", 36 "codelyzer": "^6.0.0", 37 "jasmine-core": "~3.6.0", 38 "jasmine-spec-reporter": "~5.0.0", 39 "karma": "~5.0.0", 40 "karma-chrome-launcher": "~3.1.0", 41 "karma-coverage-istanbul-reporter": "~3.0.2", 42 "karma-jasmine": "~4.0.0", 43 "karma-jasmine-html-reporter": "^1.5.0", 44 "protractor": "~7.0.0", 45 "ts-node": "~8.3.0", 46 "tslint": "~6.1.0", 47 "typescript": "~4.0.2" 48 }, 49 "browser": { 50 "crypto": false, 51 "http": false, 52 "https": false, 53 "net": false, 54 "path": false, 55 "stream": false, 56 "tls": false, 57 "fs": false, 58 "timers": false 59 } 60}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazumasaxx

2020/11/12 06:29

勉強不足ですみません。 DBからのデータは、restapiを用意して取得するという認識で合っていますか?
退会済みユーザー

退会済みユーザー

2020/11/12 07:58 編集

DBと実際に通信を行うWebサーバを用意して何らかのWebAPIを公開し、ブラウザからはWebAPI経由でDBとやり取りすることになると思います。
kazumasaxx

2020/11/16 00:18

遅くなり申し訳ございません。 APIを作成して、JSON形式で値が返ってきている状態にできました。 しかし、typescript上ではデータが取得できない?状態になっております。 どこが間違っているか教えていただけますでしょうか。 以下、test.component.ts constructor( private http: HttpClient ) { this.message = 'This is a sample of Angular application.'; this.Datas = []; let results = this.http.get<MySQLData[]>(`${this.url}/api/free?sql=select * from new_table `) .pipe( catchError(this.handleError('getfree', [])) ); results.forEach(element => { var tmp = new MySQLData(); tmp.id = element[0].OffsetAddress; this.Datas.push(tmp); });
退会済みユーザー

退会済みユーザー

2020/11/16 00:50

コードは読んでいませんが、TypeScript api クライアント あたりでググれば幸せになるのではないでしょうか。
kazumasaxx

2020/11/16 01:17

目的は、this.Datasの中に下のようなデータを入れたいです。 var tmp = new MySQLData(); tmp.id = 11; tmp.LabelName = 'rows'; tmp.OffsetAddress = 1110; this.Datas.push(tmp);
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問