knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

React.js +node/express の設定編 #React.js #javascript #node.js

index:

概要:

React.js+ express で、DBアプリの作成となりますが。
初期設定的な、内容となります。

・今回は、webpack等使用せずに。
 バックエンドはexpress で、
 db以外サービスは、expressのみ立ち上げて
 シンプルな構成としています。

環境

node.js 10.16.0
express : 4.16.1

React
react-dom

参考の設定

github.com

React 追加

https://github.com/kuc-arc-f/app6_react1/blob/master/views/layout.ejs

・ejs親テンプレに、べた書きです

	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

Hello world 的な画面

https://github.com/kuc-arc-f/app6_react1/blob/master/views/tasks/test3.ejs

class HelloMessage extends React.Component {
    render() {
        return (
            <div>
                <h1>AAA</h1>
                <p>Hello World, 123bbb</p>
            </div>
        );
    }
}
ReactDOM.render(<HelloMessage />, document.getElementById('app'));

・prop使用した例

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor-Fuga" />,
  document.getElementById('app')
);

機械学習の予測結果をmongoDBに保存して、chart.jsでグラフ表示する。

index:

概要:

前のVue.js + express  関連になりますが、
機械学習の予測結果をmongoDBに登録し
chart.js でグラフ描画の追加となります。

・入力データは、前のVue.jsの測定値を
 学習させて、予測値を出力、表示します。

環境

node.js 10.16.0
express : 4.16.1

python 3.6
pymongo 2.5
mongoDB 2.4.14
numpy
pandas
sklearn

画面

f:id:knaka0209:20190825121010p:plain

参考のコード

・ ML
github.com

・node/express
github.com

学習処理

・回帰モデルで、予測結果を
 pymongo で、 mongoDB に保存

https://github.com/kuc-arc-f/predict_mongo1/blob/master/pred_update.py

import pandas as pd
import numpy as np
from sklearn import linear_model
import matplotlib.pyplot as plt
import time
import datetime as dt
from db_mongo_func import dbMongoFunc
from com_measure_func import ComMeasureFunc

#
def conv_tm2float(nDim ):
	ret=[]
	for item in nDim:
		ret.append(item.total_seconds())
	return ret

###########################
# main
###########################
db = dbMongoFunc()
d= db.get_measureDat()
#print(d)
f = ComMeasureFunc()
arr_X = f.conver_xAxis(d)
arr_Y = f.conver_hnum(d)
#print(arr_Y )
arr = {'time': arr_X
        ,'hnum': arr_Y
}
rdDim = pd.DataFrame(arr )
#print(rdDim.head(10 ) )

rdDim.info()
#rdDim.describe()
#quit()

# Y
Y = rdDim["hnum"]
Y = np.array(Y, dtype = np.float32).reshape(len(Y) ,1)
# X
#xDim =np.arange(len(Y ))
xAxis= np.array(rdDim['time']).reshape(len(rdDim['time'] ) ,1)

min = rdDim['time'].min()
rdDim['diff'] = rdDim['time'] -min
#print(rdDim['diff'][0])
diff = conv_tm2float(rdDim['diff'] )
#print(diff )
xDim =np.array(diff )
print(xDim)
#quit()

X = np.array(xDim, dtype = np.float32).reshape(len(xDim ) ,1)
#quit()

print ("start...")
start_time = time.time()

# 予測モデルを作成
clf = linear_model.LinearRegression()
clf.fit(X, Y)

# 回帰係数
print(clf.coef_)
# 切片 (誤差)
print(clf.intercept_)
# 決定係数
print(clf.score(X, Y))

#predict
pred = clf.predict(X)

interval = int(time.time() - start_time)
print ("実行時間: {}sec".format(interval) )
#quit()

#db
#print(xAxis.shape , pred.shape)
db = dbMongoFunc()
db.insert_pred(arr_X, Y, pred)

mongoDBに pymongoから接続 #mongoDB

index:

概要:

mongodbに、python pymongoからの接続等になります。

Linux環境のmongoDB 2.X が古く、pymongo 2.5
となり、最新のmongoDB 4以上では、実行できないと想定されますので。。
参考程度と、なります。

環境

mongo DB 2.4.14
pymongo 2.5
python 3.6

参考のコード

github.com

install

pip install pymongo

検索

・MongoClient で、host, port指定 、接続
・find() で、検索
https://github.com/kuc-arc-f/mongo_sample1/blob/master/find.py

import pymongo
from datetime import datetime

#client = pymongo.MongoClient(host='localhost', port=27017)
client = pymongo.MongoClient(host='192.168.10.104', port=27017)

# use database;
db = client.db2

# find
items = db.post.find()
for post in items:
    print(post )

・追加

post = {
    'title': 't12',
    'content': 'c12',
    'up_date': datetime.now()
}
result1 = db.post.save(post)

・削除
全、文書消す場合。

db = client.db2
db.post.drop()

参考のページ

knaka0209.hatenablog.com

mongoDBに CSVアップロード機能を追加

index:

概要:

mongodbに、node.js でCSVファイルから
アップロード機能を追加する内容となります

・前回の、express 版のchart.js グラフ機能
 に追加しています。
コマンドラインから、実行する形です。

概要

mongo DB 2.4.14
node.js 10.16.0
mongo shell (mongo)

参考のコード

github.com

CSV ファイルの読み書き

・読みこみ
https://github.com/kuc-arc-f/app4_csv/blob/master/csv_import.js

readline 使用しました。
日付書式は、 javascript date型に変換しています。

    var rs = fs.createReadStream( input_file );
    var readline = require('readline');   
    var rl = readline.createInterface(rs, {});
   
    var items = []
    var i = 0;
    rl.on('line', function(line) {
        if(i > 0){
            if(line.length > 0){
               col = line.split(",")
//console.log( col.length );
                if(col.length >= 3){
                    items.push( col )
                }
            }
        }
        i += 1;
    })    
    .on('close', function() {
//        console.log( items );
        proc_arr_check(items)
    });

CSV出力
https://github.com/kuc-arc-f/app4_csv/blob/master/csv_output.js
writeFileSync を使用

    var db = monk(db_setting);
    var collection = db.get('mdats');
    var fnm = "dat/outout.csv";
    //
    var text = "date,H,L,\n";
    collection.find({}, {sort: { mdate: 1}} ,function(e,docs){
        docs.forEach( function (item) {
//console.log( item );
            var date = utl.convert_date2str(item.mdate)
            var hnum = item.hnum
            var lnum = item.lnum
            text += date +"," + hnum +"," + lnum + "\n"
        });
        db.close()
        try {
            fs.writeFileSync(fnm , text);
            console.log('write end');
        }catch(e){
            console.log(e);
        }
    });

前回の、測定値グラフに反映

f:id:knaka0209:20190817143608p:plain

一括アップロードで、楽になりました

参考のページ

knaka0209.hatenablog.com

chart.js グラフの追加、Vue.js +express +mongoDB版

index:

概要:

前のVue.js + express  関連になりますが、
chart.js でグラフ描画の追加となります。

・グラフ画面は、 chart.js + axiosで、mongoDbからデータ読み込み
・その他、Vue.js +axios でデータ登録、編集、一覧の表示

環境

node.js 10.16.0
express : 4.16.1

参考のコード

github.com

参考のHTML

https://github.com/kuc-arc-f/app4_chart1/blob/master/doc/t2.html

f:id:knaka0209:20190812151155p:plain

chart.js 読み込み 、CDNですが

https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js

sequelize(node.js) + mysql でSQL実行する #javascript #node.js #mysql

index:

概要:

sequelize O/R マッピング関連になりますが、
model を使用せずに
SQLを、実行させる内容になります

環境

node.js 10.16.0
sequelize 5.11.0

参考の設定

github.com



準備など

・表の作成

https://github.com/kuc-arc-f/sequelize_1/blob/master/database/book.sql

CREATE TABLE `books` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) DEFAULT NULL,
  `content` text DEFAULT NULL,
  `user_id` int(11) NOT NULL DEFAULT 0,
  `createdAt` datetime NOT NULL,
  `updatedAt` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

sequelize 実行

https://github.com/kuc-arc-f/sequelize_1/blob/master/test1.js

インスタンス/ new Sequelize
の引数は、DB名、接続ユーザ、パスワード、dialect: mysql

const Sequelize = require('sequelize');
const sequelize = new Sequelize('vue1','db_user','password',{dialect:'mysql'})

/******************************** 
* 
*********************************/
sequelize.query("select * from books").spread((results, metadata) => {
//    console.log(results );
    results.forEach( function (item) {
        console.log( item.id );
        console.log( item.title );
    });
    sequelize.close();
})

外部結合する場合。

・表の追加
https://github.com/kuc-arc-f/sequelize_1/blob/master/database/users.sql

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `createdAt` datetime NOT NULL,
  `updatedAt` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `users` (`id`, `name`, `createdAt`, `updatedAt`) VALUES
(1,	'hoge2',	'2019-07-27 12:45:57',	'2019-07-27 23:24:23'),
(2,	'yamada tarou',	'2019-07-27 12:46:28',	'2019-07-27 12:46:28'),
(7,	't3',	'2019-07-28 05:24:56',	'2019-07-28 05:24:56');

・結合のSQL実行

/******************************** 
* 
*********************************/
var sql ="select books.id, books.title  ,users.name from books";
    sql += " LEFT OUTER JOIN users ON users.id = books.user_id";
//console.log(sql);
    sequelize.query(sql).spread((results, metadata) => {
    //    console.log(results );
        results.forEach( function (item) {
            console.log( item.title );
            console.log( item.name );
        });
        sequelize.close();
    })

Vue.js +express + sequelize でmarkdown対応のtodoアプリ

index:

概要:

前のVue.js + express +sequelize 関連になりますが、
todoアプリ作成となります。

環境

node.js 10.16.0
sequelize 5.11.0

画面

f:id:knaka0209:20190802140302p:plain

参考のコード

github.com

実装など

・表の作成 / todo
https://github.com/kuc-arc-f/app3_todo6/blob/master/database/todos.sql

・model
todo.js
https://github.com/kuc-arc-f/app3_todo6/blob/master/models/todo.js


api / api_todos.js
https://github.com/kuc-arc-f/app3_todo6/blob/master/routes/api_todos.js

index

router.get('/index', function(req, res) {
    models.Todo.findAll({
        order: [
            ['id', 'DESC'],
        ],                    
    }).then((result) => {
        var items = result
        items.forEach( function (item) {
//                console.log( item.dataValues );
        });
        var param = {"result": result};
        res.json(param);
    });
});