Waplusテックチームブログ ブログ

Vue.jsで複数のselectで選択されている値を取る

言葉では難しいのですが商品A、商品B、商品Cが並んでいてselectで個数を選択してお問合せ。 もしくはカートへ入れる。などの処理をVue.jsでしようと思います。 今回はちょっと時間が無いので解説は省きますがVue.jsを触っている人なら、ある程度わかると思います。もっと良い方法があるかもですが、ん〜どうでしょうか。 なによりcartApp.cart = []でリセットしているところが気にくわな...

stap4.データベースの内容を表示する

step3の続きです。 routes/index.jsに追記します 今回は最終的にすべてルートにリダイレクトして1ページで完結させます。なので一覧表示はルートに記述します。 ここに書き変えていきます。 こんな感じです。 次にviews/index.ejsに送ったdocsを表示する記述をします。 formタグのの下に書き足して行きましょう 上記の記述でdocs配列の長さだけfor分が繰り返されます。...

step3.データベースにsaveする

ステップ2の続きです。 本格的にDBからデータを取り出したりしていきます。 データベースへ追加する。 まずはデータベースへデータを追加する機能を作っていきましょう。 views/index.ejsを編集する デフォルトだとこんな感じです。 ここにformタグを追記してサーバーにデータを送信出来るようにします。 こんな感じでしょうか。 次はroutes/index.jsに/insertへpostされ...

step2.mongooseを用意しよう

ステップ1の続きです。 node.jsからMongoDBにアクセスするためのライブラリにmongooseというのがあります。 mongooseについて詳しく知りたい人は「node.js+express+mongo環境にmongooseを使う」を先に呼んでください。 何はともあれ環境確認です。 $ mongod –version db version v3.6.1 git version: 025...

step1.expressでプロジェクトを作成

まずはexpressコマンドでnode.jsのプロジェクトを作成します。 express-generatorがわからない人はnode.jsのexpress-generatorはとても便利。を先に読んで下さい。 それでは早速作っていきますが、まずは環境チェックです。 $ node -v v12.1.0 $ express –version 4.16.0 作業用フォルダを用意しておく マイドキュメン...

MongoDBのデフォルトポートを変更する

mongodbのデフォルトポートは27017です。 これを仕様上変更したい場合もあればセキュリティ強化のためポート番号を変えたいときがあるでしょう。 今回はその説明をいたします。 まずは環境チェック 毎度おなじみの環境確認からしていきます。 $ mongod –version db version v2.6.10 2019-04-29T07:00:25.356+0000 git version:...

Visual Studio Codeの機能拡張しよう!

Visual Studio Code(以後VS Code)で便利なプラグインをインターンの学生に教えて貰いましたので共有しておきます。ホントに便利で良かったですζ(*’ω’*)ζ せっかくなのでVS Codeでプラグインのインストール方法なども合わせて紹介します。 VS Codeを起ち上げよう まずはVS Codeを起ち上げてください。左側のメニューアイコンで上から5個目あ...

javascriptの基礎

レッスン1-javascriptの基礎知識

まずはjavascirptとは何なのか?を説明していきます。ちょっと座学的な感じなので苦手な人はパスしてもいいかもです。 javascriptはその名の通りスクリプト言語です。 プログラミング言語は複数存在しており、その中の1つと考えてください。 スクリプト言語とは プログラミング言語には、コンピュータが理解しやすい機械語に変換するコンパイラ型言語と非コンパイラ型言語に分かれます。この非コンパイラ...

ubuntu 19.04にmongodb-orgをインストールする

mongodbってそもそも本体のmongodb-serverとそれを操作するためのmongodb-clientsっていう2つのシステムで動いているんですよね。しかもエクスポートしたりインポートしたりする機能はmongodb-toolってまた別になるんです(^_^;ちょっとややこしいですよね… そういうったものまとめてパッケージとしてインストールしてくれるのがmongodb-orgです。 でもそのま...