React.js +node/express +mongoDB で CRUDの作成
index:
概要:
前の React.js+ express 関連となりますが
mongoDb で CRUD作成となります
・api側は、Vue.js+ node.js版とほぼ同じです
・ejsテンプレートに、React.js書いて、
axios で通信となります。
環境
node.js 10.16.0
express : 4.16.1
React
react-dom
mongo DB 2.4.14
参考のコード
ルーティング / api
https://github.com/kuc-arc-f/app6_react2/blob/master/routes/tasks.js
https://github.com/kuc-arc-f/app6_react2/blob/master/routes/api.js
画面
・new
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/new.ejs
・index
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/index.ejs
・show
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/show.ejs
・edit/delete
https://github.com/kuc-arc-f/app6_react2/blob/master/views/tasks/edit.ejs
実装など
・new
class Create extends React.Component { constructor(props){ super(props) this.state = {title: '', description: ''} } handleChangeTitle(e){ this.setState({title: e.target.value}) } handleChangeDesc(e){ this.setState({description: e.target.value}) } handleSubmit(e){ e.preventDefault() const task = { title: this.state.title, content: this.state.description } let uri = '/api/tasks_new' axios.post(uri, task ).then((response) => { // browserHistory.push('/list') window.location.href="/tasks" console.log("success") }) } render() { return ( <div> <h1>Create a ToDo</h1> <hr /> <form onSubmit={this.handleSubmit.bind(this)}> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Title:</label> <input type="text" className="form-control" onChange={this.handleChangeTitle.bind(this)}/> </div> </div> </div> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Description:</label> <input type="text" className="form-control col-md-6" onChange={this.handleChangeDesc.bind(this)}/> </div> </div> </div><br /> <div className="form-group"> <button className="btn btn-primary">Create</button> </div> </form> </div> ) } } ReactDOM.render(<Create />, document.getElementById('app'));
・index
class List extends React.Component { constructor(props) { super(props); this.state = {data: ''} } componentDidMount(){ axios.get('/api/tasks_index').then(response => { this.setState({ data: response.data.docs }) console.log( response.data.docs ) }) .catch(function (error) { console.log(error) }) } tabRow(){ if(this.state.data instanceof Array){ return this.state.data.map(function(row, index){ return ( <tr key={index}> <td> <a href={"/tasks/show/"+row._id}>{row._id}</a><br /> </td> <td>{row.title}</td> <td>{row.content}</td> <td><a href={"/tasks/edit/"+row._id}>[ edit ]</a></td> </tr> ) }) } } render(){ return ( <div> <h1>index</h1> <table className="table table-hover"> <thead> <tr> <td>ID</td> <td>Title</td> <td>content</td> </tr> </thead> <tbody> {this.tabRow()} </tbody> </table> </div> ) } } ReactDOM.render(<List />, document.getElementById('app'));
update
・ 見直しで、form の登録で、
少しコード量削減、改良してみました。
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(); })