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 で、受信し。ＭＬの評価処理、出力
@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
rails5 + Vue.js , ルーティングなど SPA開発(15) #Vue.js #web #SPA
index:
概要:
前のSPA 関連で、rails5 の組合せで
vue-router で、ルーティング追加等になります。
環境
rails 5.2.2
vue.js
vue-router
webpack
参考の設定
設定など
・index.html.erb
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/views/home/index.html.erb
<div id="app">
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</div>
<%= javascript_pack_tag 'todo' %>
・todo.js
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/javascript/packs/todo.js
import Vue from 'vue/dist/vue.esm.js'
import Router from './router/router'
import Header from './components/header.vue'
//
var app = new Vue({
router: Router,
el: '#app',
components: {
'navbar': Header,
}
});
・header.vue
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/javascript/packs/components/header.vue
<template>
<div>
<ul id="dropdown" class="dropdown-content">
<li><router-link to="/">Top</router-link></li>
<li><router-link to="/about">About</router-link></li>
<li><router-link to="/tasks">Tasks</router-link></li>
</ul>
</div>
</template>
・router.js : ルーティングを書きます。
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/javascript/packs/router/router.js
//
import Vue from 'vue/dist/vue.esm.js'
import VueRouter from 'vue-router'
import tasksIndex from '../components/index.vue'
import About from '../components/about.vue'
import Top from '../components/top.vue'
//import Contact from '../components/contact.vue'
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Top },
{ path: '/about', component: About },
{ path: '/tasks', component: tasksIndex },
],
})
・routes.rb : rails 側のルーティングも、書きます
https://github.com/kuc-arc-f/vue12_ver1/blob/master/config/routes.rb
関連のページ
rails5 + Vue.js +webpack の設定編 SPA開発(14) #Vue.js #web #SPA
index:
概要:
前のSPA 関連で、
rails5 の組合せとなります。
設定など
・rails アプリの作成
rails new vue12 --webpack=vue
・yarn を追加しておきます。
npm install -g yarn
・vue関係の追加
yarn add axios yarn add vue-router yarn add vue-template-compiler yarn add vuex yarn add vue-eslint-parser
初期ページの追加
・home_controller.rb
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/controllers/home_controller.rb
・routes.rb
https://github.com/kuc-arc-f/vue12_ver1/blob/master/config/routes.rb
・index.html.erb
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/views/home/index.html.erb
・http://localhost:3000/
で、TOPページ開きます。
