機械学習の予測結果をsqlite3に保存して、chart.jsでグラフ表示する。
index:
概要:
前のVue.js + express 関連になりますが、
機械学習の予測結果を
sqlite3に保存する例となります
流れとしては、下記となります
・測定データCSVを学習処理
・予測の出力を、CSV保存
・予測CSVを、sqliteにインポート
・DBから、グラフ表示
環境
node.js 10.16.0
express : 4.16.1
sqlite3
画面
実装など
・予測結果を、CSV出力します
https://github.com/kuc-arc-f/predict_sqlite
・予測結果を、インポート
dat/out_pred.csv
https://github.com/kuc-arc-f/app7_sqlite_pred/blob/master/pred_import.js
・結果の表示、 ejs
https://github.com/kuc-arc-f/app7_sqlite_pred/blob/master/views/mdats/chart_pred.ejs
CSVデータから sqlite3に保存して、chart.jsでグラフ表示する。
この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/mc26dade9f854
React.js +node/express + sqlite3 で、CRUDの作成
index:
概要:
前の React.js+ express 関連となりますが
sqlite3 で CRUDの作成 となります。
環境
node.js 10.16.0
express : 4.16.1
React
react-dom
sqlite3
参考のコード
実装など
・表の作成
https://github.com/kuc-arc-f/app7_react_sqlite/blob/master/doc/tasks.sql
・index / api
router.get('/tasks_index', function(req, res) { var db = new sqlite3.Database( dbfileName ) var items = [] db.serialize(function() { db.all('SELECT id,title, content FROM tasks order by id desc;', function(err, rows) { rows.forEach( function (item) { items.push(item ); }); var param = {"docs": items }; res.json(param); }); }); db.close(); });
画面 / React.js
・new
https://github.com/kuc-arc-f/app7_react_sqlite/blob/master/views/task2/new.ejs
・index
https://github.com/kuc-arc-f/app7_react_sqlite/blob/master/views/task2/index.ejs
・show
https://github.com/kuc-arc-f/app7_react_sqlite/blob/master/views/task2/show.ejs
・edit/delete
https://github.com/kuc-arc-f/app7_react_sqlite/blob/master/views/task2/edit.ejs
Vue.js + node/express + sqlite3 で、 CRUDの作成
この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/mc26dade9f854
node.jsから sqlite3 を使う。設定編
index:
概要:
node.js で、sqlite3の設定等になります。
環境
node.js 10.16.0
sqlite3
追加方法
npm install sqlite3
表作成など
・create table / insert
var sqlite3 = require('sqlite3').verbose() var db = new sqlite3.Database('app1.sqlite') db.serialize(function () { db.run('CREATE TABLE temp (id, name)') var stmt = db.prepare('INSERT INTO temp (id, name) VALUES (?, ?)') for (var i = 0; i < 10; i++) { stmt.run(i, 'name'+ i) } stmt.finalize() }) db.close()
・select
db.serialize(function() { db.each('SELECT id,name FROM temp order by id', function (err, row) { console.log(row.id + ': ' + row.name) }) }); db.close();
・update
db.serialize(function() { var stmt = db.prepare('update temp set name= ? where id= ?') // stmt.run('update-0', 0) stmt.run('update-1', 1) stmt.finalize() }); db.close();
・delete
db.serialize(function() { var stmt = db.prepare('delete from temp where id= ?') stmt.run(1) stmt.finalize() }); db.close();
ツール関連
・windows10 の場合で。exeをDLしました
https://www.sqlite.org/download.html
sqlite-tools-win32-x86-3290000.zip
(1.71 MiB)
・解凍して、実行する場合
sqlite-tools-win32\sqlite3 app1.sqlite
関連のページ
React.js +node/express +mongoDB で markdown対応の todo作成
index:
環境
node.js 10.16.0
express : 4.16.1
React
react-dom
mongo DB 2.4.14
画面
画面 / React.js
・new
https://github.com/kuc-arc-f/app6_todo7/blob/master/views/Todos/new.ejs
・index
https://github.com/kuc-arc-f/app6_todo7/blob/master/views/Todos/index.ejs
・show
https://github.com/kuc-arc-f/app6_todo7/blob/master/views/Todos/show.ejs
・edit/delete
https://github.com/kuc-arc-f/app6_todo7/blob/master/views/Todos/edit.ejs
参考のコード
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 の登録で、
少しコード量削減、改良してみました。