Nuxt.jsでMySQLを扱う方法(事前準備[失敗編])

　例によって中途半端に調べたのでまとめておく。Nuxt.jsでmicroCMSを前回は触ってみたが、あれは今回ばっさりカットしてやり直すことにした。例によって最後まで見て。

前提環境
やったこと
すまぬ。
DBとテーブルを用意
まって
呼び出し側の用意
ちょっと諦めて勉強フェーズに移る
参考文献

前提環境

基本的にはこの記事と同じ

やったこと

よくみるQiitaにかいてあったので、これ参照してやってみることにする。まずはmysqlを使えるようにする。

SHELL:

myProject$ npm install mysql
added 3 packages, and audited 1594 packages in 3s

189 packages are looking for funding
  run `npm fund` for details

コレ入ったのかな…?とりあえずpackage.json見て確認です。

package.json:

...>8...
"dependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/axios": "^5.13.1",
    "core-js": "^3.9.1",
    "mysql": "^2.18.1",
    "nuxt": "^2.15.3"
  },
...>8...

入ってるっぽいですね。でもどうやら、このほかにexpressというものを入れているようなので検索。ここのがいい感じに書いてそうだったのでやり方拝借。

SHELL:

myProject$ npm install express
added 23 packages, and audited 1617 packages in 4s

確認します。

package.json:

"dependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/axios": "^5.13.1",
    "core-js": "^3.9.1",
    "express": "^4.17.1",
    "mysql": "^2.18.1",
    "nuxt": "^2.15.3"
  },

入ったっぽいですね（二度目）

すまぬ。

結局のところ、お名前VPSにあるDBを直接呼び出すのができなかったので、macOS上にMySQLを用意して、そこのを呼び出してテストすることにする。

インストールについてはここの記事（https://qiita.com/hkusu/items/cda3e8461e7a46ecf25d）を参照してほしい。

DBとテーブルを用意

…は、このコードそのままになるかな……

SHELL:

// データベースの作成
mysql> CREATE DATABASE my_project_a DEFAULT CHARACTER SET utf8;
mysql> USE my_project_a;

// テーブルの作成
mysql> CREATE TABLE  facilities (
  id int auto_increment,
  name text,
  address text,
  tel text,
  delete_at datetime,
  PRIMARY KEY (id)
  );

// データの追加
mysql> INSERT INTO facilities (name) VALUES
  ('value1'),
  ('value2'),
  ('value3')
  );

//　ユーザの追加と反映
mysql> CREATE USER 'myProA'@'localhost' identified by '******';
mysql> GRANT ALL ON my_project_a.* TO 'myProA'@'localhost';
mysql> FLUSH PRIVILEGES;

準備ができました。

まって

まじでフロントエンドとバックエンドの区別ついてなくて何やってるか本格的にわけわかんなくなってきたのでやり直しです。
まずはバックエンド。ここみました。https://sbfl.net/blog/2018/08/25/nodejs-express-webapi/

呼び出し側の用意

こんな感じで接続用のjsを書いておいておきます。（99%コピペ）

apis/index.js:

const express = require('express'); //expressを利用することを定義
const app = express(); //expressをappと定義

const mysql = require('mysql'); //今回はMySQLを利用する
const connection = mysql.createConnection({　// 以下、各自のMySQLへの接続情報を書く
  host: 'localhost',
  user: 'root',
  password: '******',
  database: 'db_development'
});

app.get('/', function (req, res) {　// app.get...(expressの構文)、req=request。 res=response
  res.set({ 'Access-Control-Allow-Origin': '*' }); // この記載により、※1：CORSを許可する
  connection.query('select * from scrapings', function (error, results) { // scrapingsテーブルから全てのカラムを取得する
    if (error) throw error; // エラー処理
    res.send(results[0]); // results[0]により、一番目のデータを返答する
  });
});

app.listen(5000, function () { // port 5000をlistenする
  console.log('Example app listening on port 5000!'); // console.logによりファイル実行時にコンソールに文字表示させる
});