スポンサーリンク

WindowsでExpress4(JavascriptのWEBフレームワーク)（６）PostgreSQL

前回

http://twosquirrel.mints.ne.jp/?p=10374

に引き続き、

Node.js/ExpressでPostgreSQLを使おう
http://libro.tuyano.com/index3?id=1194003

をやってみる。

（環境）
Windows8.1
node.js v6.3.1
Express 4.13.4
Visual Studio Code
templateはejs
C:/js/helloexpress フォルダに作成
PostgreSQL 9.6

（１）PostgreSQLの用意

https://www.postgresql.org/download/windows/

から、Version9.6.0のWindows用インストーラー(64bit)をダウンロードしてインストール

postgresql-9.6.0-1-windows-x64.exe

137MB、ダウンロードになかなか時間がかかる。

image

Postg

image

image

image

とりあえず、パスワードは、悩んだら hoge にしておく。（本番では絶対に変更！）

image

image

image

インストールにはなかなか時間がかかる

image

image

環境変数Pathの設定

image

C:\Program Files\PostgreSQL\9.6\bin

を、環境変数Pathに追加する。

imageimage

image

imageimage

  念のため、ユーザーの環境変数と、システムの環境変数の両方にPathを入れておいた。

;C:\Program Files\PostgreSQL\9.6\bin; 

（２）helloexpress　アプリケーションの作成

c:/js/ に移動してから、

express -e helloexpress
cd helloexpress
image

npm install

image

npm install pg

image

（３）データベースの準備

C:\Program Files\PostgreSQL\9.6\pgAdmin 4\bin　フォルダの中の、pgAdmin4.exe を開く。

image

起動にやや時間がかかる。

imageimage

imageimage

インストール時に指定したパスワード（今回は、 hoge ）を入力.

なんかカッコイイ！でも使い方わからない！

image

端末で、

psql postgres

環境変数Pathのために、Visual Studio Codeを再起動

image

うまくいかない。。。

（参考）【Windows】PostgreSQL入門知識とインストール手順
  2016/07/27 
https://blog.codecamp.jp/postgresql-install

上記に従い、image の、imageを開いて、

59行目の、listen_addresses = '*’　の前に、 # を付加してコメントアウト
58行目に、listen_addresses = ‘localhost’　を追加　して、保存。

image

SQL Shell(psql) を開く。

image

言われるがまま入力し、そのあと、以下を入力

create table mydata(
id serial primary key,
name char(50),
mail char(100),
memo char(255)
);

image

（４）c:/js/helloexpress/app.js　を変更

[sourcecode language='javascript'  padlinenumbers='true']
var add = require('./routes/add');
var create = require('./routes/create');
[/sourcecode]

image

（下記は、最初、間違えて入力していたので、訂正した。）

[sourcecode language='javascript' ]
app.use('/add', add);
app.use('/create', create);
[/sourcecode]

image

（５）routes/index.js の変更

http://libro.tuyano.com/index3?id=1194003&page=5

をコピペ。

image

今回は、パスワードを hoge に設定しているので、以下のようになる。

image

views/index.ejs の変更

image

（６）初期データの投入

C:\Program Files\PostgreSQL\9.6\pgAdmin 4\bin\pgAdmin4.exe を開く。

image

Servers > PostgreSQL9.6 > Databases > postgres > Schemas > public > Tables > mydata

で、Data Output 画面を出して、サンプルデータを入力して、「保存」をクリック。

image

node.\bin\www

しても、エラー。

image

次も、http://libro.tuyano.com/index3?id=1194003&page=6　の通りに。

（７）routes/add.js の作成

image

views/add.ejs の作成

image

routes/create.js の作成

image

node .\bin\www　しても、以下のようなエラー。

image

user じゃなくて、use　だった。。。

(訂正前)
image

(訂正後)
image

再度、node .\bin\www

image

ブラウザで、 localhost:3000

image

なぜか最初の一文字しか表示されない、、、なぜだろう、、、

add の方も、うまくいかず。。。原因不明、、、

image

（８）翌日、もう一度、見てみる。

C:\Program Files\PostgreSQL\9.6\bin\psql.exe をダブルクリック。 コマンドプロンプトが出てくるので、パスワードを入力してEnterすると、すぐにコマンドプロンプトが閉じる。

C:\Program Files\PostgreSQL\9.6\pgAdmin 4\bin\pgAdmin4.exe を開く

Servers > PostgreSQL9.6 > Databases > postgres > Schemas > public > Tables > mydata　を右クリックして、View Data > View All Rows をすると、

なんと、データがすべて一文字ずつになってしまっていた。（原因不明）

image

pgAmind4 で、再度文字を taro@yamada などと入力して、一度、pgAmin4を閉じ、再度開くと、やっぱり上の画面のように一文字ずつになってしまっていた。ちなみに、pgAdminのバージョンは1.0であった。pgAmin4の問題なのだろうか？

image

なんだかよく分からないが、とりえあえず、

●C:\Program Files\PostgreSQL\9.6\bin\psql.exe 　を起動
●端末で、 node .\bin\www

image

image

image

image

やったー！できた！

（９）Bitbucketに登録

https://bitbucket.org/　にログインして、Dashboard　画面で、リポジトリ　＞　リポジトリの作成

imageimage

git init
git add .
git commit -m “initialize repository”
git remote add origin git@bitbucket.org:xxxxxxxxxxxxx/helloexpress.git
git push -u origin –all
(パスワードを入力)

image

image

2回目以降は、

git add .
git commit -m “xxxxxxxxxxx”
git push -u origin –all

この続きが、、、http://libro.tuyano.com/index2?id=1115003　にないので、今回はここまで。本当はupdate, delete が欲しかったけど、、、

スポンサーリンク

Javascript

Posted by twosquirrel