Laravel 5.6 + Vue.js で、SPA開発(2) axiosで登録機能など #Laravel #vue.js #SPA
index:
概要:
前回のSPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の関連となり、DBアプリ実装となります。
環境とか
php7.1
Laravel 5.6
Vue.js
構成の概要
・Laravel
モデル、WEB API
・Vue.js, Vue-router
View, ルーティング
みたいな構成になり、LaravelのMVC構成とは
異なる点が、ポイントになるかと思います。
参考のページ
https://qiita.com/Yorinton/items/944044371dec48346eda
https://daiki-sekiguchi.com/2018/08/13/laravel-vue-js-helloworld/
実装など
DBは、事前に作成しておきます、
・migration
php.exe artisan make:migration create_tasks_table --create=tasks
php.exe artisan migrate
・モデルの作成
php.exe artisan make:model Task
・web.php
https://github.com/kuc-arc-f/vue_spa1/blob/master/routes/web.php
Route::get('/{any}', function () { return view('app'); })->where('any', '.*');
・ app.blade.php
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/views/app.blade.php
axiosも、読み込んでますが。
<!DOCTYPE html> <html lang="{{ config('app.locale') }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css"> <script> window.Laravel = { csrfToken: "{{ csrf_token() }}" }; </script> <script src="{{ asset('js/axios.min.js') }}?A1"></script> </head> <body> <div id="app"> <div class="container"> <router-view></router-view> </div> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
・app.js
VueRouterで、ルーティングしています。
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/assets/js/app.js
import Vue from 'vue' import VueRouter from 'vue-router' require('./bootstrap'); window.Vue = require('vue'); Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes: [ { path: '/tasks' , component: require('./components/Tasks/Index.vue') }, { path: '/tasks/new/' , component: require('./components/Tasks/new.vue') }, { path: '/tasks/show/:id' , component: require('./components/Tasks/show.vue') }, { path: '/tasks/edit/:id' , component: require('./components/Tasks/edit.vue') }, { path: '/about', component: require('./components/About.vue') } ] }); const app = new Vue({ router, el: '#app' });
api.php
Laravel API の作成、
<?php use Illuminate\Http\Request; //use App\Article; Route::group(['middleware' => 'api'], function() { // Route::get('tasks', function() { $tasks = App\Task::all()->take(5); return $tasks; }); Route::get('tasks/show/{id}', function($id) { $task = App\Task::find($id); return $task; }); Route::get('tasks/edit/{id}', function($id) { $task = App\Task::find($id); return $task; }); Route::post('tasks/add', function() { $task = new App\Task(); $task->title = request('title'); $task->content = request('content'); $task->save(); return ['title' => request('title'),'content' => request('content')]; }); // /api/tasks/update Route::post('tasks/update/{id}', function($id) { // $task = new App\Task(); $task = App\Book::find($id); $task->title = request('title'); $task->content = request('content'); $task->save(); return ['title' => request('title'),'content' => request('content')]; }); Route::get('test', function() { return "#test"; }); });
Vueコンポーネント
下記で、
新規登録、一覧表示、詳細表示、編集 の機能となります。
・new
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/assets/js/components/Tasks/new.vue
・Index
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/assets/js/components/Tasks/Index.vue
・show
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/assets/js/components/Tasks/show.vue
・edit
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/assets/js/components/Tasks/edit.vue
Laravel 5.6 + Vue.js で、SPA開発(1) 準備編 #Laravel #vue.js #SPA
index:
概要:
SPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の開発 、準備編となります。
環境とか
php7.1
Laravel 5.6
Vue.js
vue-router
node.js
npm
準備
古めですが、Laravel5.6です。
適当な、プロジェクト名を決めて、作成します。
php.exe composer.phar create-project --prefer-dist laravel/laravel spa1 "5.6.*"
cd spa1
・package.json
vue-router を追加します。
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.0.0", "popper.js": "^1.12", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^2.0", "lodash": "^4.17.4", "vue": "^2.5.7", "vue-router": "^2.3.0" } }
npm install
npm run watch
・Laravel の起動
php.exe artisan serve
・ブラウザで、http://localhost:8000/
で、ページが開けます。
flask+ TF-IDF+ janome ,AIチャットボット CSVから学習用の文章を読み込む。 自然言語処理(9)
index:
概要
前の、自然言語処理の関連となります。
TF-IDF の AIチャットボットの、学習データを
CSVファイルから、読み込み可能な方法の、例となります。
・UI面は、BotUI のJSライブラリを使用しています。
・事前に、学習し。 flask起動時に、学習モデルを読み込み。
web画面
データセット
CSV, 文章データ
入力、出力(質問、応答)
https://github.com/kuc-arc-f/flask_NLP_5/blob/master/flaskr/files/bun_data.csv
sklearnで、 決定木 ( DecisionTreeClassifier ) 分類問題
index:
概要
機械学習で、決定木 を使用した。分類問題をテストしてみたいと
思います
定義としては、
ある目的(毒キノコかそうでないか、ある商品を購買するかどうかなど)に到達するために、
データの各属性の条件分岐をして、グループに分けていく方法を 決定木 といいます。
目的に辿りつくのにいろいろなルートがあり、それがツリー状になっているために決定木といいます。
さらに、この決定木は、目的となる変数がカテゴリー変数の場合は 分類木 という。
環境
python 3.5.2
sklearn
コード
python3 です。
github.com
データセット
毒キノコの、判定問題
処理
DecisionTreeClassifier を、使用し、
学習、予測、評価のスコアを求めます。
# 学習データとテストデータに分ける X_train, X_test, y_train, y_test = train_test_split(X,Y, random_state=50) # 決定木インスタンス(エントロピー、深さ5) tree_model = DecisionTreeClassifier(criterion='entropy',max_depth=5, random_state=50) tree_model.fit(X_train,y_train) print("train:",tree_model.__class__.__name__ ,tree_model.score(X_train,y_train)) print("test:",tree_model.__class__.__name__ , tree_model.score(X_test,y_test))
sklearnで、 SVM (サポートベクターマシン) 分類問題
index:
概要
機械学習で、SVM を使用した。分類問題をテストしてみたいと
思います
SVM 定義としては、下記のようでした
訓練データにおいて、他クラスの中で最も近い位置にあるサポートベクタを基準として、
距離(マージン)が最も大きくなるように境界線を引く方法
環境
python 3.5.2
sklearn
コード
python3 です。
github.com
データセット
load_breast_cancer のデータ使用しました。
処理
LinearSVC を、使用し、
学習、予測、評価のスコアを求めます。
model = LinearSVC() clf = model.fit(X_train,y_train) #pred= model.predict(X_train) pred= model.predict(X_test ) #print("pred=", pred.shape ) df= pd.DataFrame(pred) print(df.head() ) #quit() print("train:",clf.__class__.__name__ ,clf.score(X_train,y_train)) print("test:",clf.__class__.__name__ , clf.score(X_test,y_test))
結果
(426, 30) (143, 30) (426,) (143,) 0 0 1 1 1 2 1 3 1 4 0 train: LinearSVC 0.870892018779 test: LinearSVC 0.874125874126
sklearnで、 k-NN(K-Nearest Neighbor Algorithm) 分類問題
index:
概要
機械学習で、k-NN を使用した。分類問題をテストしてみたいと
思います
環境
python 3.5.2
sklearn
コード
python3 です。
github.com
データセット
iris のデータ使用しました。
処理
KNeighborsClassifier を使用し、
学習、評価結果(score) を、リストに追加
list_nn = [] list_score = [] for k in range(1, 31): # K = 1~30 # KNeighborsClassifier knc = KNeighborsClassifier(n_neighbors=k) knc.fit(X_train, Y_train) # 予測 Y_pred = knc.predict(X_test) #print("Y_pred=", Y_pred.shape) #print("Y_pred=", Y_pred[:10 ]) # 評価 R^2 score = knc.score(X_test, Y_test) print("[%d] score: {:.2f}".format(score) % k) list_nn.append(k) list_score.append(score)
結果
20回、過ぎると。過学習になるようです。
回数を、少なめにして調整した方が、よさそうです
データ数 = 150 特徴量 = 4 [1] score: 0.97 [2] score: 0.97 [3] score: 0.97 [4] score: 0.97 [5] score: 0.97 [6] score: 0.97 [7] score: 0.97 [8] score: 0.97 [9] score: 0.97 [10] score: 0.97 [11] score: 0.97 [12] score: 0.97 [13] score: 0.97 [14] score: 0.97 [15] score: 0.97 [16] score: 0.97 [17] score: 0.97 [18] score: 0.97 [19] score: 0.97 [20] score: 0.97 [21] score: 0.97 [22] score: 0.97 [23] score: 0.97 [24] score: 0.95 [25] score: 0.95 [26] score: 0.95 [27] score: 0.95 [28] score: 0.92 [29] score: 0.89 [30] score: 0.95
入力文章から、俳句 短歌を抽出する。WEB画面の追加 自然言語処理(8)
index:
概要
前の、 自然言語処理 で TF-IDF 関係となりますが、
俳句、短歌を機械学習させて、入力文章と、
類似文章を抽出する。web画面の作成となります。
・ 画面は、前回と同じ Bot UIライブラリを
使用しています。
処理など
train.py
pandas で、CSV読み込み、
TfidfVectorizer で、学習、pickle で、保存して
flaskr/files/ に、配置
# csv_data = pd.read_csv("flaskr/files/bun_data.csv" ,encoding="SHIFT-JIS" ) #print(csv_data.head() ) tokens=[] for item in csv_data["bun"]: #print(item) token=get_token(item) tokens.append(token) #print(len(csv_data.columns) ) #print(tokens ) #quit() #print(tokens ) #quit() docs = np.array(tokens) vectorizer = TfidfVectorizer(use_idf=True, token_pattern=u'(?u)\\b\\w+\\b') print(tokens) #quit() vecs = vectorizer.fit_transform(docs ) print("#vecs :") print(vecs.shape ) ##print(vecs[0] ) #save file_name="params.pkl" with open(file_name, 'wb') as f: pickle.dump(vectorizer, f) print("#save vectorizer OK!")
views.py
入力文章を、評価して。
類似文章を抽出して、画面に出力
# @app.route('/test3', methods=['GET', 'POST']) def test3(): print("#test3") ret="sorry, nothing response." if(len(request.form ) > 0): text=request.form['intext'] print("text=",text ,"len=", len(text) ) if(len(text) >0): ret=vect.predict(text ) print (ret) return ret