knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

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

参考のコード

API
github.com


Vue 側
github.com

準備

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サービスに
 送信する。

f:id:knaka0209:20190516204352p:plain

<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

参考の設定

github.com

設定など

・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



関連のページ

knaka0209.hatenablog.com

rails5 + Vue.js +webpack の設定編 SPA開発(14) #Vue.js #web #SPA

index:

概要:

前のSPA 関連で、
rails5 の組合せとなります。

環境

rails 5.2.2
vue.js
webpack

windows7 です。

参考の設定

github.com


設定など

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

起動

・webpack-dev-server 起動
ruby.exe bin/webpack-dev-server

rails の起動
rails s

Vue.js(Vue-CLI 3)で、ルートのパスをデプロイ時に変更する。 SPA開発(13) #Vue.js #web #php #SPA

index:

概要:

前のSPA 関連で、
Vue-CLI 3でのデプロイ時のパスを、ルートから
変更する方法となります。
下層フォルダに、Webサービスを配置可能になりますね。

環境

Vue-CLI 3
vue.js

設定方法

vue.config.js を追加し。
npm run build すると、反映できました。
下記の、publicPath の配置フォルダを指定できます。

module.exports = {
    publicPath: '/tst/app1'
}

aws EC2で、cakephpの設置 SPA開発(12) #web #php #SPA

index:

概要:

前のSPA 関連で、
バックエンドは、aws EC2にcakephp 2 (php フレームワーク)
の設置関連となります。

フロント側は、Vue.js で、web APIを呼び出す構成を
想定した場合です。

環境

cakephp 2.10.17
php7.2
aws EC2, amazon linux 2

参考のページ

knaka0209.hatenablog.com

knaka0209.hatenablog.com

LAMP 等の、設定は
 前の記事を、参考にしています。

mysql DB, table
は事前に作成しておきます。

設定など

・cakephp2
を、
/var/www/htmlに配置します。

・cakeの書込みエラーが出る場合は、権限の追加。
chmod -R 777 app/tmp/

・AllowOverride の設定
/etc/httpd/conf/httpd.conf

<Directory "/var/www/html/apiphp1">
	AllowOverride All
</Directory>

apacheの再起動
sudo systemctl restart httpd

Vue.js(Vue-CLI 3) +cakephp +mysql SPA開発(11) #Vue.js #web #php

index:

概要:

前のSPA 関連で、
クロスドメイン構成の仕組みで、アプリ構築する事例となります。

バックエンドは、cakephp 2 (php フレームワーク)
で、mysql DBの組合せの場合です。

環境

Vue.js
Vue-CLI 3
cakephp 2.10.17
php7.1
jQuery

参考の設定

・フロント側
github.com

API
github.com


準備など

・cakephp2, ver2 を clone
https://github.com/cakephp/cakephp

・事前にDBの、作成。
表(tasks) の作成。
https://github.com/kuc-arc-f/apiphp1_ver1/blob/master/db/tasks.sql

Linux の場合、mod_rewrite エラーが出る場合
a2enmod で有効化
sudo a2enmod rewrite

rewrite の確認
ls -l /etc/apache2/mods-enabled/ | grep rewrite


・AllowOverride の設定
/etc/apache2/sites-available/000-default.conf

<Directory "/var/www/html/apiphp1">
	AllowOverride All
</Directory>

apacheの再起動
sudo systemctl restart apache2

・cakeの書込みエラーが出る場合は、権限の追加。
chmod -R 777 app/tmp/

実装など

コントローラ TasksController.php
https://github.com/kuc-arc-f/apiphp1_ver1/blob/master/app/Controller/TasksController.php

api_index

	//
	public function api_index() {
		$this->Task->recursive = 0;
	    $this->Paginator->settings = array(
			'limit' => 10 ,'order'=> array('Task.id'=>'desc')
		   );		
		$dats = $this->Paginator->paginate();
		$arr = array();
		foreach ($dats as $dat){
			$arr[] = $dat["Task"];
		}
		header('Access-Control-Allow-Origin: *');
		header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
		echo(json_encode($arr ));
		exit();
	}	

api_add

	public function api_add() {
		if ($this->request->is('post')) {
			$this->Task->create();
			$json ='';
			if ($this->Task->save($this->request->data)) {
				$json = json_encode(['title' => $this->request->data["Task"] ]);
			} else {
				$json = json_encode(['message' => 'The task could not be saved. Please, try again.' ]);
			}
			header('Access-Control-Allow-Origin: *');
			header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
			echo( $json );
			exit();
		}
	}

Vue.js 側

Index.vue
https://github.com/kuc-arc-f/vue_2_cake/blob/master/src/components/Tasks/Index.vue

import axios from 'axios'
import {Mixin} from '../../mixin'

export default {
  mixins:[Mixin],
  created () {
    this.baseUrl = this.sysConst.API_BASE;
    console.log( this.baseUrl )
    this.getTasks()
  },
  data () {
    return {
      tasks: [],
      user_id : '',
      baseUrl : ''
    }
  },
  methods: {
    getTasks() {
        var url = this.baseUrl +'tasks/api_index'
        console.log(url)
        axios.get(url)
        .then(res =>  {
            this.tasks = res.data
            console.log(res.data.length )
        })
    },
  }
}

関連のページ

knaka0209.hatenablog.com

Laravel 5 を、aws EC2 インストール編 #web #php #Laravel

index:

概要:

Laravel 5 を、aws EC2 ,Amazon Linux 2
に追加する手順等になります。

・手順に、抜けがあるかもしれませんが。
・インストール時に、メモリ不足で、composerが強制終了
 する場合が、ありましたが。回避方法は複数ありそうでしたが
 下記の手順で、インスタンス再起動後、apache ,mysqlを終了後、
 に追加すると、正常インストールできました。

環境

Amazon Linux 2
php7.2
apahce
mysql
Laravel 5.6

参考

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html

aws の、LAMP追加方法が参考になりました。
 上記の手順では、拡張モジュールが不足していましたので
 追加モジュールの対応後、インストールの手順となりました。

https://qiita.com/PKunito/items/31445d4475d4e18fe4d7

参考の設定方法

sudo yum update -y

sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2 php7.2

sudo yum install -y httpd mariadb-server

sudo systemctl start httpd

sudo systemctl enable httpd

sudo systemctl start mariadb

sudo systemctl enable mariadb


・mbstring, dom のエラーが出たので、追加モジュール対応

sudo yum install --enablerepo=remi-php72 php-mbstring php-openssl
sudo yum install php-xml

Laravel インストール

・上記の手順で、開始すると。
 メモリ不足で、composer が強制終了したので、
 ログアウト、インスタンス再起動後
 インストールした方が良いかもしれません。

LAMP系のサービスの停止( とりあえず、メモリ確保の為に停止 )

sudo systemctl stop httpd

sudo systemctl stop mariadb

・composer の追加

curl -sS https://getcomposer.org/installer | php

・インストール

php  composer.phar create-project --prefer-dist laravel/laravel spa1 "5.6.*"

apache の設定

・http.conf 、ルートの変更。

DocumentRoot "C:/xampp71/htdocs/spa1/public"


.htaccess 有効化

<Directory /var/www/spa1/public>
    AllowOverride All
</Directory>

apache を、再起動すると。Laravel のトップが表示できました。
必用なヘルパ等は、この後に追加しています。