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
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ページ開きます。
Vue.js(Vue-CLI 3) +cakephp +mysql SPA開発(11) #Vue.js #web #php
index:
準備など
・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 ) }) }, } }