暫く、この方、プログラミングの投稿はありませなんだ。
本業の方で、Nuxt.js(Vue.jsのフレームワーク)をやることになり、
勉強がてら、３連休でもあるので、
ずっと、やってきているBOOKLOGをNuxt.js化してみることとしました。
参考にしたのは、@tomoyuki_kt さんの
Qiita【Nuxt.js】API(バックエンド)でMySQLからテーブル情報を取得しフロントエンドで表示させるアプリの作成
【前提】
・windows
・node.js, npm はインストール済
【バックエンド】 仮にホームディレクトリは、「api-nuxt-puppeteer」とする。<== 任意です。（参考にしたサイトの請売り）
・ターミナル（コマンドプロンプト）
$ mkdir api-nuxt-puppeteer <== 仮
$ cd api-nuxt-puppeteer <== 仮
$ npm init
$ npm install express
$ npm install mysql
$ mkdir api
$ cd api
・/api/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 : '（MySQLの接続ユーザー）', // 環境に合わせて変更する
password : '（〃の接続パスワード）', // 同上
database : '（〃のデータベース名）' // 同上
});
app.get('/', function (req, res) { // app.get...(expressの構文)、req=request。 res=response
res.set({ 'Access-Control-Allow-Origin': '*' }); // この記載により、※1：CORSを許可する
connection.query('select *,DATE_FORMAT(IssueDate,"%Y-%m-%d") AS GDATE from booklog', function (error, results) { // booklogテーブルから全てのカラムを取得する
if (error) throw error; // エラー処理
res.send(results); // 検索結果を返答する
});
});
app.listen(5000, function () { // port 5000をlistenする
console.log('Example app listening on port 5000!'); // console.logによりファイル実行時にコンソールに文字表示させる
});
・ターミナル（コマンドプロンプト）…server起動（停止はCTRL + C）
$ node index.js
↓ちなみに、MySQLのカラム情報は以下の通りです。
CREATE TABLE `booklog` (
`ISBN13` varchar(13) NOT NULL,
`ISBN10` varchar(10) DEFAULT NULL,
`BookName` varchar(50) NOT NULL,
`Author` varchar(25) DEFAULT NULL,
`Publisher` varchar(25) DEFAULT NULL,
`Genre` varchar(25) DEFAULT NULL,
`IssueDate` date DEFAULT NULL,
`GetDate` date DEFAULT NULL,
`ReadDate` date DEFAULT NULL,
`Ownership` tinyint(1) DEFAULT NULL,
`Purchase` int(11) DEFAULT NULL,
`Library` varchar(25) DEFAULT NULL,
`Overview` varchar(255) DEFAULT NULL,
`Impressions` text,
`State` varchar(10) DEFAULT NULL,
`CoverImg` varchar(25) DEFAULT NULL,
PRIMARY KEY (`ISBN13`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci
【フロントエンド】仮にホームディレクトリは、「nuxt-scraping-app」<== 任意です。
・ターミナル（コマンドプロンプト）
$ npx create-nuxt-app nuxt-scraping-app <== 仮
※選択肢は、ほとんど規定値かNone 但し、Axiosだけは意識して選択
create-nuxt-app v4.0.0
✨ Generating Nuxt.js project in nuxt-scraping-app
? Project name: nuxt-scraping-app
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press to select, to toggle all, to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press to select, to toggle all, to invert selection)
? What is your GitHub username? ********
? Version control system: Git
・起動確認（修正前に一旦確認しておく）
$ cd nuxt-scraping-app <== 仮
$ npm run dev
・ブラウザで表示
http://localhost:3000
・pages/index.vue を以下のように書き換える
※↓以下 < と > は、全角＜ ＞ に置換して掲載しています。
＜template＞
＜v-card class="mx-auto"＞
＜v-list-item＞
＜div class="booklog"＞
＜table＞＜thead＞
＜tr＞
＜th width= "26px"＞No.＜/th＞
＜th width="131px"＞ID＜/th＞
＜th width="361px"＞書籍名＜/th＞
＜th width="221px"＞著者＜/th＞
＜th width="151px"＞出版社＜/th＞
＜th width= "61px"＞価格＜/th＞
＜th width="151px"＞分類＜/th＞
＜th width="111px"＞発行日＜/th＞
＜/tr＞＜/thead＞
＜tbody＞
＜tr v-for="(item,i) in items" :key="items.ISBN13"＞
＜td width= "25px" class="right"＞{{ i + 1 }}＜/td＞
＜td width="130px"＞{{ item.ISBN13 }}＜/td＞
＜td width="360px"＞{{ item.BookName }}＜/td＞
＜td width="220px"＞{{ item.Author }}＜/td＞
＜td width="150px"＞{{ item.Publisher }}＜/td＞
＜td v-if="item.Purchase ＞ 0" width= "60px" class="right"＞￥{{ item.Purchase }}＜/td＞
＜td v-if="item.Purchase == 0" width= "60px"＞図書館＜/td＞
＜td width="150px"＞{{ item.Genre }}＜/td＞
＜td width="110px"＞{{ item.GDATE }}＜/td＞
＜/tr＞
＜/tbody＞＜/table＞
＜/div＞
＜/v-list-item＞
＜/v-card＞
＜/template＞
＜script＞
export default {
async asyncData({ $axios }) {
const items = await $axios.$get("http://localhost:5000");
return { items };
},
created(){
document.title = "BOOKLOG BY NUXTJS"
},
};
＜/script＞
＜style＞
table{ border-collapse:collapse; margin:0 auto; }
td,th{ padding:10px; }
td.right{ text-align: right; }
th{ color:#fff; background:#005ab3; }
table tr:nth-child(odd){ background:#e6f2ff; }
thead, tbody{ display: block; }
tbody { overflow-x: hidden; overflow-y: scroll; height: 580px; }
＜/style＞
【起動確認】
・バックエンド $ node index.js を実行した状態で
・フロントエンド
$ cd nuxt-scraping-app <== 仮
$ npm run dev
・ブラウザで表示
http://localhost:3000
手間はかかりますが、これだけの変更（ソース量）で
一覧表示まではできました。
詳細画面表示や、更新はこれからです。（今週はここまで）
