はじめに Nuxtjs＋Expressで構築したシステムでP DFの作成及びダウンロードする機能の実装をする必要があり、技術的に調査した結果を下記にまとめました。 NodejsでPDFを生成できるライブラリ NodejsでPDFを生成できるライブラリをいくつかピックアップして…

インストール $ npm install --save jsonwebtoken $ npm install --save @types/jsonwebtoken コード import * as jwt from 'jsonwebtoken' interface jwtPayload { email: string; name: string; } const jwtPayload: jwtPayload = { email: 'yamada.tarou@…

docker-comsepose ファイルを作成する version: '3' services: express: image: node:14.15.1-alpine container_name: express ports: - '3000:3000' volumes: - ./express:/opt/express/ tty: true docker-build docker-compose build 初期化 npm initコマ…

はじめに express版のlaravel admin またはrails adminのようなソースを見つけたので動かしてみる github.com docker-compose.yaml nodeのイメージをpullするだけのdocker-composeファイルを作成する version: '3' services: app: image: node:14.16.0-alpin…

はじめに 久しぶりにバーコード読み込み機能を動作させたらエラーが何件が発生した px-wing.hatenablog.com １件目は下記のエラー index.js:1 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DO</tfoot></thead></tbody></table></tr>…

はじめに 駅JPのデータを利用して駅検索機能を作成する バックエンド側でMySQLに登録されている駅JPのデータをjsonで返す フロント側でバックエンド側のURLへアクセスしてjson形式でデータを取得してreact-selectで実装する 過去の記事をベースに実装 px-win…

はじめに 駅JPデータを利用して何か作成できないか試行錯誤している中で駅JPのデータをJOSN形式で返すAPIを作成する 前回までの調査の内容 px-wing.hatenablog.com px-wing.hatenablog.com sequelizeのassociationの設定 企業情報取得 'use strict'; module.…

はじめに 前回で駅JPのテーブル定義を作成したので、今回は駅JPから提供されているマスタデータを一括登録するところまで。 px-wing.hatenablog.com サンプルコード 下記のコードはCSVファイルを１件つづ読み込んで１件ごと登録している const fs = require(…

はじめに 駅JPというサイトのデータを利用して駅検索または地図上にプロッドする機能を実装してみる www.ekidata.jp 利用規約などにも利用可能と記載がある。 駅JPさんが提供しているデータ構造はこちら 下記の仕様書から転記しております。 ekidata.jp ロー…

はじめに 以前、フロント側でバーコードスキャンを実装したので、読み込んだ時にYahooAPIを利用してバーコード検索して読み込んだ結果を表示する px-wing.hatenablog.com 実装内容 Backend側はexpressを利用してAPIをコールして結果をフロントに返す スキャ…

はじめに yahoo api を利用したいと思い実際にAPIを利用しようとしたときにJSONP形式でデータを返す記述があり最初は見間違いだとおもったら、そのような形式があることを知りました。 JSONP とは scriptタグを使用してクロスドメインなデータを取得する仕組…

はじめに 下記のサンプルのようにログイン済みのユーザーのみ閲覧できるページを実装したかった。 reacttraining.com 理想は下記のように実装したかった。 import React from "react"; import { BrowserRouter as Router, Switch, Route, Link, Redirect, us…

はじめに 前回、会員登録フォーム用のテーブルを作成したので、そのテーブルに対してデータを登録する処理をexpress側で実装する px-wing.hatenablog.com コード POSTされたデータをもとにアクセストークンを作成する。有効時間は1時間 トークン作成後、ユー…

はじめに 会員登録処理を実装したところ、登録日が日本日付にならなあったので色々と調整してみた px-wing.hatenablog.com 最初にOSの時間を調整してみてダメで、結局はsequelizeの設定ファイルを修正したら日本時間になりました。 Alpine Dockerfileに下記…

はじめに 前回に会員登録フォームをreactで作成したので、この情報をサーバーに保存する バックエンドはexpressを利用してDBはMySQLを利用する expressからSequelize ORMを利用する px-wing.hatenablog.com px-wing.hatenablog.com 会員登録の画面イメージ …

はじめに neo4j環境を構築できたので、expressからneo4jにアクセスしたいとおもい、その方法を調査していきたいと思います。 px-wing.hatenablog.com expressのサイトを見るとapocを利用している例があったのでapocで試してみます。 https://expressjs.com/j…

docker-compose.yaml 下記の設定で注意して頂きたいのはNEO4J_AUTHの値はログインするためのアカウントとパスワードとなります。 下記のサンプルの場合、アカウントが「neo4j」で、パスワードは「test」となります。 neo4j: image: neo4j:4.0 volumes: - ./d…

cypherとは グラフデータを操作するために構築されています。 パターンを使用してグラフデータを記述する 使い慣れたSQLのような句 宣言的、それを見つける方法ではなく、何を見つけるかを説明する ノードの作成 最初はCypherを使用して小さなソーシャルグラ…

docker-compose.yaml の設定 dockerhubの公式アカウントで記載されている利用方法をもとにdocker-compse用に記述してみました。 version: '3' services: neo4j: image: neo4j ports: - 7474:7474 - 7687:7687 volumes: - ./neo4j/data:/data docker-compose…

インストール npm install socket.io express側の設定 soke関連の記述 const express = require('express') const socketio = require( 'socket.io' ) const app = express() const server = app.listen(3000, () => console.log('Example app listening on …

必要なpackageをインストール npm install mysql2 npm install --save-dev sequelize-cli sequelizeの初期化 npx sequelize init 下記の２つのファイルが作成される config/config.json { "development": { "username": "root", "password": null, "database…

今回利用するライブラリは下記の３つとなります npm install jsonwebtoken npm install bcrypt npm install config パスワード暗号方法 const bcrypt = require('bcrypt'); const saltRounds = 10; // フォーム画面で入力されたパスワード const myPlaintext…

passport 公式ドキュメント インストールと前準備 ID、パスワードをセッションに格納してログイン認証する npm install passport npm install passport-local npm install --save express-session ログイン認証を一時的に試したくフォームを作るためにtempla…

morgan expressにはmorganというログのライブラリーが標準で用意されています。 実装例 lib/morgan.jsファイルを作成する const morgan = require('morgan'); const fs = require('fs') const path = require('path') morgan.accessLogStream = fs.createWri…

auth0認証とは この記事を読んだ方がわかりやすい auth0のサービス Auth0: Identity is Complex. Deal with it. auth0概要（フリープラン） 無料で始めて、AUTH0で時間を節約しましょう！ 7,000の無料アクティブユーザーと無制限のログイン パスワードなし W…