Vue.js(Vue-CLI 3) + express + mogoDB 設置編 SPA開発(19) #Vue.js #node,js #mongoDB #javascript #web #SPA
index:
概要:
SPA (Vue.js/ Vuec CLI 3) 関連で、
express(node.js) , mogoDBの組合せになります。
vue-cli-plugin-express プラグインで、express追加しています。
環境
vue.js
Vue-CLI 3
mongodb-4.0.10
express 4.16.1
node.js
npm
設定方法
Vue CLI3に、express追加
vue add express
・Should serve vue app
=> Y にしました。
・ npm run express で、express 起動
実装など
app.get('/api_test1', function(req, res) { var collection = db.get('books'); collection.find({},{},function(e,docs){ //console.log("#doc"); var param = {"docs": docs }; res.json(param); }); }); // app.post('/api_post1', (req, res) => { console.log(req.body.title ) var obj = req.body; var collection = db.get('books'); collection.insert(obj , function(err, result ) { if (err) throw err; res.json(req.body); db.close(); }); });
Vueコンポーネント
・send_post()で、レコード追加しています。
<template> <div class="hello"> <h1>{{ msg }}</h1> <hr /> <div class="form-group"> <label for="TopicTitle">タイトル</label> <input type="text" class="form-control" id="title" v-model="title"> </div> <div class="form-group"> <label for="TopicContent">content</label> <textarea class="form-control" id="content" rows="3" v-model="content"></textarea> </div> <button v-on:click="send_post">投稿</button> </div> </template> <script> import axios from 'axios' export default { name: 'HelloWorld', data () { return { message : 'msg-123', msg : "", title : "", content : "", } }, created () { this.get_foo() }, methods: { get_foo () { axios.get("/api_test1") .then(res => { var items = res.data.docs console.log(items) items.forEach( function (item) { console.log(item) }); // this.msg = res.data.msg }) }, send_post(){ var task = { 'title': this.title, 'content': this.content }; axios.post('/api_post1' , task ).then(res => { console.log(res.data ); // console.log(res.data.content); }); }, } } </script>
参考の設定
関連のページ
node.js express +mongoDB でwebサービス開発 #web #node.js
この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/mc26dade9f854
mongoDB の設定編 #web
index:
概要:
noSQL型の、mongodb 4 のインストール等の内容になります。
環境
mongodb-4.0.10
windows 版です。
インストール
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/
上記を、参考に 下記リンクを開きました
https://www.mongodb.com/download-center/community?jmp=docs
zip版で、
配置は、/mongodb-4.0.10
にした場合です。
・データ配置は、testフォルダを作成し
C:\mogoData\test
mongod 起動
C:\mongodb-4.0.10\bin\mongod.exe --dbpath="C:\mogoData\test"
・mongo shell (mongo) で接続
C:\mongodb-4.0.10\bin\mongo.exe
追加 insertOne
Collection を指定して、追加
db.createCollection("books") db.books.insertOne({x: 1}); db.books.insertOne({x: 2});
検索
db.books.find() #OR , NOT イコール db.ArrayTest.find({ $or: [{loves : 'banana'},{loves : 'apple'}]}) db.ArrayTest.find({loves : {$ne : 'banana'}})
update
db.UpdateTest.insert({ name: "kazuya", age: 30}) db.UpdateTest.update({ name: "kazuya"}, {$set :{age : 31}}) db.UpdateTest.find()
delete
db.deleteTest.insert({name:"kazuya"}) db.deleteTest.insert({name:"hitomi"}) db.deleteTest.find() db.deleteTest.deleteMany({name: "kazuya"})
Vue.js(Vue-CLI 3) + firebase で、Google認証の追加。SPA開発(18)
index:
環境
vue.js
Vue-CLI 3
firebase
実装など
上記参考にしていますが、ポップアップ画面で認証する方法になります。
test_auth.vue
https://github.com/kuc-arc-f/vue_2_auth1/blob/master/src/components/Users/test_auth.vue
・GoogleAuthProvider の実行
this.provider = new firebase.auth.GoogleAuthProvider();
・ポップアップ起動、
認証後、コールバックで。認証情報 を取得できました
firebase.auth().signInWithPopup(this.provider).then(function(result) { var token = result.credential.accessToken; console.log(token) var user = result.user; console.log(user.uid) console.log(user.email) console.log(user.displayName) }).catch(function(error) { var errorCode = error.code; var errorMessage = error.message; console.log(errorCode) console.log(errorMessage) });
参考の設定
Vue.js(Vue-CLI 3) + firebase で、markdown対応の簡易CMSを作る。SPA開発(17)
index:
環境
vue.js
Vue-CLI 3
firebase
参考のコード
実装など
・top画面
top.vue
https://github.com/kuc-arc-f/vue_2_cms2/blob/master/src/components/Blogs/top.vue
import firebase from 'firebase' import {Mixin} from '../../mixin' import NavUser from '../../components/Layouts/NavUser' import Footer from '../../components/Layouts/Footer' export default { mixins:[Mixin], components: { NavUser ,Footer }, created () { this.database = firebase.firestore() this.getTasks() }, data () { return { blogs: [], user_id : '', } }, methods: { getTasks() { var items = [] var self = this var dbRef = this.database.collection('blogs') dbRef = dbRef.orderBy("up_date", "desc") dbRef.get().then(function(querySnapshot) { querySnapshot.forEach(function(doc) { // console.log(doc.id, " => ", doc.data()) var item = doc.data() var dt = item.up_date.toDate() var dt_str = dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate() console.log( dt_str ) items.push({ id : doc.id, title : item.title, content : item.content, up_date : dt_str }) }) self.blogs = items }) }, } }
・詳細
show.vue
https://github.com/kuc-arc-f/vue_2_cms2/blob/master/src/components/Blogs/show.vue
import firebase from 'firebase' import marked from 'marked' import {Mixin} from '../../mixin' import NavUser from '../../components/Layouts/NavUser' import Footer from '../../components/Layouts/Footer' export default { mixins:[Mixin], components: { NavUser, Footer }, created() { this.database = firebase.firestore() }, data: function( ) { var itemDat = {title : '', content : ''} return { item: itemDat, editFlg: false, updated: false, baseUrl : '', } }, mounted: function() { this.getItem() }, methods: { getItem: function() { var docRef = this.database.collection("blogs").doc( this.$route.params.id ) var self = this docRef.get().then(function(doc) { var dat = doc.data() var dt = dat.up_date.toDate() var dt_str = dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate() console.log( dt_str ) dat.date_str = dt_str dat.content = marked(dat.content) self.item = dat }).catch(function(error) { console.log("Error getting document:", error); }) }, } }
画面
・詳細
・詳細ー画像つき
・ top
管理画面
・編集
=> MD形式で、入力。
・一覧
Update
公開専用版を追加しました。編集機能は無いです。
https://github.com/kuc-arc-f/vue_2_cms2_pub
デモ用のページ
表示デモ用のページを、netlify.com に追加しました
https://knaka-cms2.netlify.com
==== 2019/06/02 Update ====
・fireStoreのセキュリティが低い場合で
継続使用する場合、運営側から セキュリティ警告通知が
送信される場合がありましたので。
一旦保留とし。非公開にします。
・修正後、公開したいと思います。
==========================
Vue.js(Vue-CLI 3)で、MD /markdown 表示を行う。 #Vue.js #web #javascript
index:
概要:
markdownの編集機能を、調べる機会があったので
Vue.js に、実装する場合のメモとなります。
準備
npm 版を、追加しました。
npm install marked
Vue コンポーネント
・import は、
import marked from 'marked'
で、読込み。
marked() 関数で、MD書式から、HTML形式に変換されるようです。
<template> <div> <h1>tasks - test:</h1> <br /> <hr /> <div v-html="str_md"></div> </div> </template> <script> import {Mixin} from '../../mixin' import marked from 'marked' export default { mixins:[Mixin], created() { this.test_marked() }, data() { return { user : [], message :'', str_md : '' } }, methods: { test_marked() { this.str_md = marked('# Marked in the browser\n\nRendered by **marked**.') console.log(this.str_md) }, } } </script>
画面
Vue.js(Vue-CLI 3) + flask, 機械学習の評価結果を出力する SPA開発(16) #Vue.js #web #SPA #flask #機械学習 #MachineLerning
index:
概要:
前のSPA (Vue.js/ Vuec CLI 3)関連で、flask + 機械学習で
クロスドメインの機械学習API サービスと接続し
評価結果を出力する機能と、なります。
・機械学習は、予測問題で、回帰モデルを使用して予測します。
環境
flask
vue.js
Vue-CLI 3
python3
準備
ajax は、flask の、クロスドメイン通信となるので
通常のflask構成で、通信できない為。
対策の、 flask-corsを追加
pip3 install -U flask-cors
__init__.py
https://github.com/kuc-arc-f/flask_ML_2/blob/master/flaskr/__init__.py
from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app) app.config.from_object('flaskr.config') import flaskr.views
実装など
views.py
https://github.com/kuc-arc-f/flask_ML_2/blob/master/flaskr/views.py
post で、受信し。MLの評価処理、出力
@app.route('/api_test', methods=['GET', 'POST']) def api_test(): from flaskr.include.pred_price import PredPrice if request.method == "POST": ret = "len :"+ str(len(request.form)) print(request.form['siki_price']) #return ret siki_price=request.form['siki_price'] rei_price =request.form['rei_price'] menseki =request.form['menseki'] nensu =request.form['nensu'] toho =request.form['toho'] # print(request.form ) #param params = {"siki_price" : siki_price , "rei_price" : rei_price , "menseki" : menseki , "nensu" : nensu , "toho" : toho } print("#POST") pred =PredPrice() model =pred.load_model() df = pred.load_data( params ) price = model.predict(df ) price_int = np.array( price , np.int32) print( price_int[0] ) dic = {"price" : str(price_int[0]) } return jsonify(dic) else: return "0"
Vueコンポーネント
check.vue
https://github.com/kuc-arc-f/vue_2_pred/blob/master/src/components/predict/check.vue
・不動産の、評価条件を入力し。APIサービスに
送信する。
<template lang="html"> <div> <h1>predict Input: </h1> <ul> <li> 敷金 (n月分): <input type=text size=10 v-model="siki_price" value="0" /><br /> <br /> </li> <li> 礼金(n月分): <input type=text size=10 v-model="rei_price" value="0" /><br /> <br /> </li> <li> 面積: <input type=text size=10 v-model="menseki" value="0" /><br /> <br /> </li> <li> 建築年数: <input type=text size=10 v-model="nensu" value="0" /><br /> <br /> </li> <li> 駅 徒歩(分): <input type=text size=10 v-model="toho" value="0" /><br /> <br /> </li> <li> <button v-on:click="proc_check()">予測する</button> </li> </ul> </div> </template> <script> import {Mixin} from '../../mixin' import jQuery from 'jquery' export default { mixins:[Mixin], created() { this.baseUrl = this.sysConst.API_BASE; console.log(this.baseUrl); }, data() { return { siki_price: 0, rei_price: 0, menseki : 0, nensu : 0, toho : 0, user_id: '', baseUrl : '', } }, methods: { proc_check: function() { var hostUrl= this.baseUrl + 'api_test'; var siki_price = this.siki_price; var rei_price = this.rei_price; var menseki = this.menseki; var nensu = this.nensu; var toho = this.toho; // var content = this.content; console.log(hostUrl); jQuery.ajax({ url: hostUrl, type:'POST', dataType: 'json', data : { 'siki_price' : siki_price , 'rei_price' : rei_price , 'menseki' : menseki, 'nensu' : nensu , 'toho' : toho , }, timeout:3000, }).done(function(data) { console.log("ajax-ok"); console.log(data.price ); alert(data.price ) }).fail(function(XMLHttpRequest, textStatus, errorThrown) { console.log("ajax-error"); console.log( errorThrown ); }) }, } } </script>
関連のページ
機械学習 + flask WEBアプリの実装
knaka0209.hatenablog.com
機械学習で、重回帰分析(2) 家賃を予測する
knaka0209.hatenablog.com