Vue.js +express + sequelize でform登録など

index:

概要:

前のexpress　+sequelize 関連になりますが、
Vue.js でform画面の登録などの作成になります。

環境

node.js 10.16.0
sequelize　5.11.0

参考のコード

github.com

登録処理など

・表の作成
https://github.com/kuc-arc-f/app3_sample/blob/master/database/tasks.sql

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

・api　/ api.js
https://github.com/kuc-arc-f/app3_sample/blob/master/routes/api.js

追加

router.post('/tasks_new', (req, res) => {
    var obj = req.body;
console.log(obj );
	models.Task.create({
        title: obj.title,
        content: obj.content,
	})
	.then((result) => {
        res.json(req.body);
    }); 

}); 

一覧

router.get('/tasks_index', function(req, res) {
    models.Task.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 / ejsテンプレート

・index
https://github.com/kuc-arc-f/app3_sample/blob/master/views/tasks/index.ejs

・new
https://github.com/kuc-arc-f/app3_sample/blob/master/views/tasks/new.ejs

・show
https://github.com/kuc-arc-f/app3_sample/blob/master/views/tasks/show.ejs

・edit / delete
https://github.com/kuc-arc-f/app3_sample/blob/master/views/tasks/edit.ejs

参考のページ

knaka0209.hatenablog.com

knaka0209.hatenablog.com

express + sequelize +mysql の設定編 #javascript #node.js #mysql

index:

概要:

前のexpress　関連になりますが、
sequelize　O/R マッピングで、mysql の使用となります。

参考

http://neos21.hatenablog.com/entry/2018/09/28/080000

https://qiita.com/yu-sa/items/d8edad8d9a91d0ddeb12

環境

node.js 10.16.0
sequelize　5.11.0

install

・express, sequelize

express app3

cd app3

npm install

// エラーがでたので、下記を追加
npm audit fix

npm start

・sequelize

npm install sequelize --save

npm install mysql2 --save

//CLI
npm install -g sequelize-cli

・ ejs 関係

npm install ejs --save

npm install express-ejs-layouts --save

sequelize 設定

・事前に、 mysql DBを作成しておきます。

sequelize init

・config/config.json
の修正, mysql 接続設定を追加。
https://github.com/kuc-arc-f/app3_sample/blob/master/config/config.json

  "development": {
    "username": "db_user",
    "password": "password",
    "database": "vue1",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "operatorsAliases": false
  },

model作成

create, migration

sequelize model:create --name User --attributes name:string

sequelize db:migrate

express から使ってみる。

https://github.com/kuc-arc-f/app3_sample/blob/master/routes/users.js

・追加

router.get('/create', function(req, res, next) {
	models.User.create({
        name: 'yamada tarou',
	})
	.then((result) => {
        console.log('データ取得', result.dataValues);
        res.send('respond with a resource');
	});

});

・検索

router.get('/', function(req, res, next) {
    models.User.findAll().then((result) => {
        var items = result
        items.forEach( function (item) {
                console.log( item.dataValues );
        });
        var param = {"result": result};
        res.json(param);
    });
});

参考の設定

github.com

mongoDB クエリ入門編 #mongoDB

index:

概要:

noSQL型の、mongodb で
クエリのメモとなります。
node.js で monk で接続した場合の例も試してみました。

概要

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

参考のファイル

github.com

参考

https://qiita.com/nishina555/items/9e20211e8d6f12fdb7b7

https://qiita.com/one-kelvin/items/c0c036f774f0b3b98ae5

mongo shell

・データの登録
Collection 作成、 insert
https://github.com/kuc-arc-f/mongo_1/blob/master/mongo_js/insert_book1.js

use db2;

db.createCollection("books");
db.books.insert({"no" : 1, "title": "t1", "content" : "c1" });
db.books.insert({"no" : 2, "title": "t2", "content" : "c2" });
db.books.insert({"no" : 3, "title": "t3", "content" : "c3" });
db.books.find();

sort

項目を、指定して。sort 実行
　1: 昇順
-1 :　降順

db.books.find().sort({no : -1})

{ "_id" : ObjectId("5d3ba80d60a04da5623c0173"), "no" : 3, "title" : "t3", "content" : "c3" }
{ "_id" : ObjectId("5d3ba80c60a04da5623c0172"), "no" : 2, "title" : "t2", "content" : "c2" }
{ "_id" : ObjectId("5d3ba7ec60a04da5623c0171"), "no" : 1, "title" : "t1", "content" : "c1" }

比較, lt ,gt

・lt
小さい

> db.books.find( {"no": {$lt: 2}} );
{ "_id" : ObjectId("5d3ba7ec60a04da5623c0171"), "no" : 1, "title" : "t1", "content" : "c1" }

・gt
大きい

db.books.find( {"no": {$gt: 2}} );

{ "_id" : ObjectId("5d3ba80d60a04da5623c0173"), "no" : 3, "title" : "t3", "content" : "c3" }

・lte
以下

> db.books.find( {"no": {$lte: 2}} );
{ "_id" : ObjectId("5d3ba7ec60a04da5623c0171"), "no" : 1, "title" : "t1", "content" : "c1" }
{ "_id" : ObjectId("5d3ba80c60a04da5623c0172"), "no" : 2, "title" : "t2", "content" : "c2" }

・gte
　　以上

> db.books.find( {"no": {$gte: 2}} );
{ "_id" : ObjectId("5d3ba80c60a04da5623c0172"), "no" : 2, "title" : "t2", "content" : "c2" }
{ "_id" : ObjectId("5d3ba80d60a04da5623c0173"), "no" : 3, "title" : "t3", "content" : "c3" }

regex , 部分一致検索

データの登録

use db2;

db.createCollection("tasks");
db.tasks.insert({"no" : 1, "title": "t1-title", "content" : "c1-conte" });
db.tasks.insert({"no" : 2, "title": "t2-title", "content" : "c2-conte" });
db.tasks.insert({"no" : 3, "title": "t3-title", "content" : "c3-conte" });
db.tasks.find();

・regex

db.tasks.find({"title": {"$regex": /tit/}}, { title: 1})

> db.tasks.find({"title": {"$regex": /tit/}}, { title: 1});
{ "_id" : ObjectId("5d3bc27ca7ccfe2827b360cf"), "title" : "t1-title" }
{ "_id" : ObjectId("5d3bc27ca7ccfe2827b360d0"), "title" : "t2-title" }
{ "_id" : ObjectId("5d3bc27da7ccfe2827b360d1"), "title" : "t3-title" }

monk / node.js

・sort
https://github.com/kuc-arc-f/mongo_1/blob/master/find_sort.js

var collection = db.get('books');
collection.find({}, {sort: {no: -1}} ,function(e, docs){
    console.log(docs);
    db.close()
});

・比較
https://github.com/kuc-arc-f/mongo_1/blob/master/find_lt.js

var collection = db.get('books');
collection.find( {"no": {$lt: 2}},{},function(e, docs){
    console.log(docs);
    db.close()
});

・regex
https://github.com/kuc-arc-f/mongo_1/blob/master/find_regex.js

var collection = db.get('tasks');
collection.find({"title": {"$regex": /tit/ }}, {} ,function(e, docs){
//    console.log(docs);
    var items = [];
    docs.forEach( function (item) {
        items.push(item);
        console.log(item.title );
    });

    db.close()
});

AMD Ryzen 5 2400G +ASRock DeskMini A300 ベアボーン で自作PCの組立, 4万円以下

index:

概要

自作PCの内容で、AMD Ryzen 5 で小型ベアボーンの組み合わせ
の内容となります。

・最近は、３世代Ryzen も発売開始されてますが、
　古めの Ryzen 5 2400G と、小型ベアボーンの組合せで
　低コストPCを作りました。
　部品構成的に、最小構成でRAM容量、SSD 256G
も少な目ですが。
　制作メモ的な記事ですね

・DeskMiniは、手のひらに。のる程度の大きさで
外形寸法: 155×155×80mm

主要な部品

下記、税別価格です。（ドスパラさん店舗で、購入）

・DeskMini A300/B/BB/BOX/JP (Mini-STX AM4対応 ベアボーンキット)
https://www.dospara.co.jp/5shopping/detail_parts.php?bg=&br=&sbr=&mkr=&ft=&ic=457562&lf=0
15,723 円

・AMD Ryzen 5 2400G
https://www.dospara.co.jp/5shopping/detail_parts.php?bg=&br=&sbr=&mkr=&ft=&ic=451546&lf=0
13,221 円

・SSD
SSD 760p SSDPEKKW256G8XT (M.2 2280 256GB)
5,536 円

・
F4-2400C16S-8GRS (SODIMM DDR4 PC4-19200 8GB)
3,315 円

・win10 home
14,519 円

・合計
52,314 円 (税込： \56,499)

・ハード部品代(税抜)
37,785 円

=> CPU より、windows のライセンス料が
　高額ですね。。

参考の動画

組み立て等、参考になりました。
https://www.youtube.com/watch?v=lzN5Uz_LO6U

https://www.youtube.com/watch?v=ZEstAQWGYow

DeskMini の資料、組立など

・日本語の資料等、無しでしたが。
　
・組み立て図や、基盤レイアウト
　は確認できましたので、助かりました。

背面のネジは、４個で固定で、プラスドライバー
で開けられました。
上図で、右側は前面

・CPUの刺し子み方向は、資料の　三角マークで
　レバーの位置で、方向を確認。

・メモリは、右下側
　方向に注意して、差し込む。

・ M.2 SSD は、右側のソケットに差し込み
　反対側は、ネジで固定する
　(ビニール袋にある、プラスのネジで、溝幅は狭い)

・CPUファンは、ベアボーン付属を装着し、
　固定フックの方向は、資料で確認。
　レバーの回転は、ある程度、力を入れないと回転できないので注意して
　固定する

その他

・HDMIモニタが、acerの古い機種で
　win10 ドライバが、取得不可能で
　D-sub出力となり、
　音声は、前面の　音声出力と、USB電源での
　ダイソーの３００円スピーカー追加購入して。。
　接続しました。

おまけ

Ryzen5 付属ファンで、
DeskMiniに、改造無しで、搭載できないので
未使用ですが。ファン形状は大きめでした

まとめ

・ベアボーン付属のファンの音は大きめ
（静かな部屋では。気になる程度かと思います。）
　事前調査で、うるさい件は 気になっていたのですが。
　店頭で完成品がなく、組立て後に確認できました。
　
　サード製ファンに交換できる、記事もありそうですので
　参考にして、交換するのも良さそうですね

その他

・アップデート 2019/08/04

・ドライバのアップデート（ベアボーン関係）

　ASRock APP Shop から、更新アプリをDLし。
　ドライバを更新しました。
　（最初から更新すべきだったと、思います。。）
＝＞dxdiag (directX)　の画面のメモ欄で
　エラーが出力されていたので。
　[Microsoft 基本ディスプレイ アダプター] 関係で、
　ディスプレイドライバを更新すべき。
　みたいな内容でしたので
　（下記、ドライバ更新後です）

名前：AMD Radepn RX Vega 11 Graphics
　に、変更されたようです。

・　Youtubeで、RSRock DeskMini A300　の組立後に
App SHOP で、ドライバ更新されている内容を
　発見したので、真似してみました。
サウンド、VGA関係が
　追加されたようで、direct Xのエラーもなくなりました。

・win10 タスクマネージャで、 GPU0 が追加され、
Vega11 が、表示されました。
=> 更新前は、GPUが認識されて無かったようです。
MS製の、ディスプレイドライバでも、ある程度モニタ表示できたので
　気づきませんでした。

・ベンチマーク関係、追加したツール
・FF 14ベンチ
高解像度　SCORE: 1393
通常 SCORE: 2100 (普通の評価)

・CINEBENCH R20
CPU スコア : 1747
=> GPU が、削除されたみたいで。CPUのみです

・core temp
cpu温度が表示でき、
　負荷の大きい、動画等で温度チェックできました。

Vue.js + express + mongoDB todoアプリの作成、ejsテンプレート版 #Vue.js #javascript #node.js #mongoDB

この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/mc26dade9f854

mongoDB を、raspberry piにインストール、外部から接続する。

index:

概要:

noSQL型の、mongodb raspberry pi インストール等の内容になります。

インストール

・少し古めの,version が追加されます

sudo apt-get install mongodb

・veersion

mongod --version

db version v2.4.14

・起動

sudo service mongodb start

・停止

sudo service mongodb stop

mongo shell

mongo

・ステータス

db.stats()

{
        "db" : "test",
        "collections" : 0,
        "objects" : 0,
        "avgObjSize" : 0,
        "dataSize" : 0,
        "storageSize" : 0,
        "numExtents" : 0,
        "indexes" : 0,
        "indexSize" : 0,
        "fileSize" : 0,
        "nsSizeMB" : 0,
        "dataFileVersion" : {

        },
        "ok" : 1
}

・終了

quit();

外部からの接続

・初期で、外部から接続不可能でしたので
　修正しました。
・参考
https://qiita.com/Chanmoro/items/cbf4e451d0a89f4d7c1a

・ /etc/mongodb.conf の修正

bind_ip = 127.0.0.1
を、
bind_ip =0.0.0.0
に変更し保存、上記の　start, stop
で、反映されました。

Vue.js + express + mongoDB , ejs テンプレートの使用 #Vue.js #javascript #node.js #mongoDB

この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/mc26dade9f854