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
参考の設定
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の測定値を
学習させて、予測値を出力、表示します。
画面
学習処理
・回帰モデルで、予測結果を
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
参考にしたページ
https://github.com/mongodb/mongo-python-driver
https://api.mongodb.com/python/
https://api.mongodb.com/python/2.5/api/pymongo/collection.html
参考のコード
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()
参考のページ
mongoDBに CSVアップロード機能を追加
index:
概要:
mongodbに、node.js でCSVファイルから
アップロード機能を追加する内容となります
・前回の、express 版のchart.js グラフ機能
に追加しています。
・コマンドラインから、実行する形です。
概要
mongo DB 2.4.14
node.js 10.16.0
mongo shell (mongo)
参考のコード
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); } });
前回の、測定値グラフに反映
一括アップロードで、楽になりました
参考のページ
chart.js グラフの追加、Vue.js +express +mongoDB版
この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/mc26dade9f854
sequelize(node.js) + mysql でSQL実行する #javascript #node.js #mysql
index:
環境
node.js 10.16.0
sequelize 5.11.0
準備など
・表の作成
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
画面
参考のコード
実装など
・表の作成 / 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); }); });
Vue.js
・index
https://github.com/kuc-arc-f/app3_todo6/blob/master/views/Todos/index.ejs
・new
https://github.com/kuc-arc-f/app3_todo6/blob/master/views/Todos/new.ejs
・show
https://github.com/kuc-arc-f/app3_todo6/blob/master/views/Todos/show.ejs
・edit / delete
https://github.com/kuc-arc-f/app3_todo6/blob/master/views/Todos/edit.ejs