2019-05-01

Vue.js (Vue CLI 3) 共通関数の処理 SPA開発(9) #Vue.js #web #firebase #SPA

SPA Vue.js web

index:

概要:
環境
実装など

概要:

前のSPA(SinglePageApplication) 関連で、
自作した共通関数を、Vueコンポーネントから呼び出す場合の
処理となります。Mixin 使いました。

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

実装など

・mixin.js
https://github.com/kuc-arc-f/vue_2_ver3/blob/master/src/mixin.js

export const Mixin =  {
    created:function(){
    },
    test_func(){
        return 'ABC'
    },

  }
}

・test.vue
https://github.com/kuc-arc-f/vue_2_ver3/blob/master/src/components/Tasks/test.vue

import で、mixin　読込み。
this.test_func()　で実行。

<script>
import {Mixin} from '../../mixin'

export default {
    mixins:[Mixin],
    created() {
        console.log( 'test_func='+ this.test_func() )
    },
    data() {
        return {
            user : [],
            message :''
        }
    },
    methods: {
    }
}
</script>

2019-04-28

netlify で、Vue.js (Vue CLI 3) のSPAサイトの設置 SPA開発(8) #Vue.js #firebase #web #SPA

SPA firebase Vue.js web

index:

概要:
環境
手順
参考のページ
Update 2019/04/29

概要:

前のSPA(SinglePageApplication) 関連で、
netlify.com でのデプロイ公開　の内容となります。

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

手順

事前にアカウントの作成しておきます。
(今回は、github アカウントで、ログイン)

・ https://app.netlify.com
　を開く。
・site タグ（ログインしたページ）
右上の [New Site from Git ]のボタンが表示されているページ
　を開く
=> 下側に、枠が表示され
[Want to deploy a new site ...
Drag and drop your site ...]
らしき、文字が見えますので。確認しておきます

f:id:knaka0209:20190428180220p:plain

・zipファイルの、準備
vue-CLI で、ビルドします。

npm run build

・ dist/ フォルダを、zip圧縮して
上記の、ドラッグ枠にドロップします。
　=> サイト公開されます。

・ URLは、完了画面に。表示されたようです。

参考のページ

knaka0209.hatenablog.com

Update 2019/04/29

・ビルド後に、netlify
　で正常の、ページ再読込み等が動作しない場合の修正
=>vue-router で、historyモードが、build後に動作しない現象
masterブランチを更新しました。
https://github.com/kuc-arc-f/vue_2_ver2

2019-04-28

firebase / Cloud firestore の開始編、web版のデータ登録 SPA開発(7) #firebase #web #SPA

SPA web Vue.js

index:

概要:
環境
関連
手順
接続、データ登録
参考のページ

概要:

前のSPA(SinglePageApplication) 関連で、firebase の設定編となります。

・接続は、Vue.jsのweb版の予定

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

手順

・上記等の、関連を参考に進めましたが

・プロジェクトの作成

・database は、Cloud firestore
　を、追加した場合です。

・セキュリティルールは、書込み可能
　に設定する。

・コレクションの追加
　例：　tasks

・フィールドの追加、完了

接続、データ登録

・プロジェクト作成時の、JSコードや、
　config設定を使用。

・接続、データ読込み

<script>
    var items = []
    this.database = firebase.firestore()
    var dbRef = this.database.collection("tasks")
    dbRef = dbRef.orderBy("title", "desc")
    dbRef.get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            console.log(doc.id, " => ", doc.data());
            var item = doc.data()
            /* console.log(doc) */
            items.push({
                title : item.title
            })            
        })
    })

</script>

参考のページ

knaka0209.hatenablog.com

2019-04-28

Vue CLI 3 の準備編、 SPA開発(6) #Vue.js #web #SPA

SPA Vue.js web

index:

概要:
環境
参考
参考の設定
v3 設定方法
npm の追加、
参考のページ

概要:

前のSPA(SinglePageApplication) 関連で、Vue CLI 3 の設定編となります。
の実装編となります。

・バックエンドは　firebase予定の構成

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

参考

https://cli.vuejs.org/

https://github.com/vuejs/vue-cli

参考の設定

github.com

v3 設定方法

・古い、v2 がある場合、消します。

npm -g uninstall vue-cli
npm install -g @vue/cli
vue create my-project
cd my-project

・サービス起動
npm run serv

http://localhost:8080　で、TOP画面が開きます

・ビルドする場合
npm run build

npm の追加、

・vue-router
　package.jsonで、追加する場合。
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/package.json
　下記を、追加

	"vue-router": "^3.0.1",

npm install

・firebase を追加する場合
npm install --save firebase

・consoleを、使用する場合。
　下記の、rules を追加

    "rules": {
      "no-console": 0
    },

参考のページ

knaka0209.hatenablog.com

2019-04-28

Vue.js (Vue CLI 3) と、firebaseで SPA開発、アプリ実装編フォーム登録など SPA開発(5) #Vue.js #web #firebase #SPA

SPA Vue.js web firebase

index:

概要:
環境
参考の設定
画面レイアウト
コードなど
Vueコンポーネント
まとめ
参考のページ

概要:

前のSPA(SinglePageApplication) 関連で、Vue CLI 3 +firebase
の実装編となります。

・クロスドメイン構成で、バックエンドは別クラウドとなります。

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

参考の設定

github.com

画面レイアウト

・index
f:id:knaka0209:20190428131102p:plain

・new
f:id:knaka0209:20190428131118p:plain

コードなど

・firebase のプロジェクトを作成

・datbase
Cloud firestoreの、コレクションを追加しておきます。

・App.vue
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/App.vue

<template>
  <div id="app">
    <navbar />
    <router-view/>
  </div>
</template>

<script>
import navbar from './components/Layouts/Navbar'

export default {
  name: 'app',
  components: {
    navbar
  }
}
</script>
<style>
</style>

・main.js
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/main.js

・firebase の接続設定を追加してます。

// Initialize Firebase
var config = {
  apiKey: "YOUR-PROJECT",
  authDomain: "YOUR-PROJECT.firebaseapp.com",
  databaseURL: "https://YOUR-PROJECT.firebaseio.com",
  projectId: "YOUR-PROJECT",
  storageBucket: "YOUR-PROJECT.appspot.com",
  messagingSenderId: "123"
}
firebase.initializeApp(config)

・router/index.js
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/router/index.js

ルーティングの設定など

Vue.use(Router)
//
export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: home },
    { path: '/about', component: about },
    /* tasks */
    { path: '/tasks/new', component: tasksNew },
    { path: '/tasks', component: tasksIndex },
    { path: '/tasks/show/:id', component: tasksShow },
    { path: '/tasks/edit/:id', component: tasksEdit },
  ]
})

Vueコンポーネント

・tasks/new
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/new.vue

<script>
import firebase from 'firebase'
var tableName = 'tasks'
export default {
    created() {
        this.database = firebase.firestore()
    },
    data() {
        return {
            title:'',
            content:''
        }
    },
    methods: {
        createTask: function() {
            console.log('#create')
            if (this.newTodoName == "") { return; }        
            this.database.collection(tableName).add({
                title: this.title,
                content: this.content
            }).then(function(docRef) {
                console.log("Document written with ID: ", docRef.id)
                window.location.href='/tasks'
            }).catch(function(error) {
                console.log("Error adding document: ", error)
            })
            this.newTodoName = ""
        },
    }
}
</script>

・tasks/index
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/Index.vue

<script>
import firebase from 'firebase'
import {Mixin} from '../../mixin'
//
export default {
  mixins:[Mixin],
  created () {
    this.getTasks()
    /* console.log(this.sysConst.STORAGE_KEY_tasksData ) */
  },
  data () {
    return {
      tasks: []
    }
  },
  methods: {
    getTasks () {
        var items = []
        var self = this
        this.database = firebase.firestore()
        var dbRef = this.database.collection('tasks')
        dbRef = dbRef.orderBy("title", "desc")
        dbRef.get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                /* console.log(doc.id, " => ", doc.data()) */
                var item = doc.data()
                items.push({
                    id : doc.id,
                    title : item.title,
                    content : item.content
                })            
            })
            self.tasks = items
        })
    }
  }
}
</script>

・tasks/show
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/show.vue

・tasks/edit
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/edit.vue

まとめ

・比較的シンプルな構成ですが、
　バックエンドは firebase を使用しているので、
　フロント側の、主体の作業になりますね。

参考のページ

knaka0209.hatenablog.com

2019-04-25

Vue.js 初級編、V-ディレクティブ #Vue.js #web

Vue.js web

index:

概要:
環境
参考
参考のコード
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once

概要:

前の　Vue.js 関連で、初級編的な内容となります。
V-ディレクティブの説明などです。

環境

Vue.js

	<div id="app-101">
	  <div v-text="message"></div>
	  <div>{{ message }}</div>
	</div>
	<script>
	var app101 = new Vue({
	  el: '#app-101',
	  data: { message: 'Hello!' }
	})
	</script>

v-html

HTMLをレンダリングする(v-html
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-html.html

	<div id="app-102">
		<div v-text="message"></div>
		<div v-html="message"></div>
	</div>
	<script>
	var app102 = new Vue({
		el: '#app-102',
		data: { message: '<b>Hello!</b>' }
	})
	</script>

v-show

条件により表示を制御する(v-show)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-show.html

	<div id="app-103">
		<input type="checkbox" @click="change" checked>
		<span v-show="seen">Hello!</span>
	</div>
<script>
var app103 = new Vue({
  el: '#app-103',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

v-if

条件により表示を制御する(v-if)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-if.html

	<div id="app-104">
		<input type="checkbox" @click="change" checked>
		<span v-if="seen">Hello!</span>
	</div>
<script>
var app104 = new Vue({
  el: '#app-104',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

v-else

条件により表示を制御する(v-else)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-else.html

	<div id="app-105">
		<input type="checkbox" @click="change" checked>
		<span v-if="seen">Hello!</span>
		<span v-else>Bye!</span>
	</div>
<script>
var app105 = new Vue({
  el: '#app-105',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

v-else-if

条件により表示を制御する(v-else-if)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-else-if.html

	<!-- -->
	<div id="app-106">
		<input type="radio" name="app106-type" onclick="app106.type='A'" checked>
		<input type="radio" name="app106-type" onclick="app106.type='B'">
		<input type="radio" name="app106-type" onclick="app106.type='C'">
		<span v-if="type=='A'">Good morning.</span>
		<span v-else-if="type=='B'">Hello!</span>
		<span v-else>Bye!</span>
	</div>
<script>
var app106 = new Vue({
  el: '#app-106',
  data: { type: 'A' }
})
</script>

v-for

ループする(v-for)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-for.html

	<!-- -->
	<div id="app-107">
		<ul>
		<li v-for="color in colorList">{{ color }}</li>
		</ul>
	</div>
<script>
var app107 = new Vue({
  el: '#app-107',
  data: { colorList: [ 'Red', 'Green', 'Blue' ] }
})
</script>

v-on

イベントを処理する(v-on, @)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-on.html

	<!-- -->
	<div id="app-108">
		<button v-on:click="hello">Hello</button>
		<button @click="hello">Hello</button>
	</div>
<script>
var app108 = new Vue({
  el: '#app-108',
  methods: {
    hello: function() {
      alert("Hello!");
    }
  }
})
</script>

v-bind

HTMLの属性を指定する(v-bind, :)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-bind.html

	<!-- -->
	<div id="app-109">
		<input type="button" v-bind:value="message">
		<input type="button" :value="message">
	</div>
<script>
var app109 = new Vue({
  el: '#app-109',
  data: { message: 'Hello!' }
})
</script>

v-model

入力フォームにモデルを割り当てる(v-model)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-model.html

	<!-- -->
	<div id="app-120">
		<input v-model="message">
		<div>Message: {{ message }}</div>
	</div>
<script>
var app120 = new Vue({
  el: '#app-120',
  data: { message: 'Hello!' }
})
</script>

v-pre

テキストをそのまま出力する(v-pre)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-pre.html

	<!-- -->
	<div id="app-121">
		<div v-pre>Message: {{ message }}</div>
		<div>Message: {{ message }}</div>
	</div>
<script>
var app121 = new Vue({
  el: '#app-121',
  data: { message: 'Hello' }
})
</script>

v-cloak

画面表示時に {{ ... }} を表示しない(v-cloak)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-cloak.html

	<!-- -->
<style>
[v-cloak] { display: none }
</style>
	<div id="app-122">
		<button onclick="location.reload()">再表示</button>
		<div>Message: <span v-cloak>{{ message }}</span></div>
		<div>Message: <span>{{ message }}</span></div>
	</div>
<script>
window.setTimeout(function() {
  var app122 = new Vue({
    el: '#app-122',
    data: { message: 'Hello!' }
  })
}, 1000);
</script>

v-once

一度だけ表示する(v-once)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-once.html

	<!-- -->
<div id="app-123">
  <input type="text" name="text1" v-model:value="message">
  <div>Message: <span v-once>{{ message }}</span></div>
  <div>Message: <span>{{ message }}</span></div>
</div>
<script>
var app123 = new Vue({
  el: '#app-123',
  data: { message: 'Hello' }
})
</script>

2019-04-25

Laravel 5 + sqlite 設定編 #Laravel #sqlite #PHP

Laravel php web

index:

概要:
環境
参考
設定方法
Laravel 設定

概要:

前回の　Laravel 5 のDB関連で、
sqlite　windows版設定となります。

環境

php7.1
Laravel 5.6
sqlite

参考

https://qiita.com/homhom99/items/3161ed3eb8ea0e6ba14e

設定方法

・sqlite 64bit をＤＬしました。
https://www.sqlite.org/download.html

sqlite-dll-win64-x64-3240000.zip

・sqlite3.dllを、下記に配置
C:\Windows\System32

・DBと、テストの表の作成
　適当なフォルダに配置します。

sqlite3 spa1.sqlite

create table temp(id, name);
.exit

・　.sqlite ファイルが作成されます。

Laravel 設定

・ config/database.php

    'default' => env('DB_CONNECTION', 'sqlite'),

・ .env

DB_CONNECTION=sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=C:\xampp71\htdocs\spa1\spa1.sqlite
DB_USERNAME=homestead
DB_PASSWORD=secret

php.exe artisan migrate
php.exe artisan tinker

・サービス起動
php.exe artisan serve

概要:

環境

実装など

概要:

環境

手順

参考のページ

Update 2019/04/29

概要:

環境

関連

手順

接続、データ登録

参考のページ

概要:

環境

参考

参考の設定

v3 設定方法

npm の追加、

参考のページ

概要:

環境

参考の設定

画面レイアウト

コードなど

Vueコンポーネント

まとめ

参考のページ

概要:

環境

参考

参考のコード

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-pre

v-cloak

v-once

概要:

環境

参考

設定方法

Laravel 設定