Vue.js +php, ローカルHTMLからクロスドメイン接続版 #Vue.js #web #php

index:

概要:

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

以前の, Vue-CLI +firebase 構成と似ていますが。
バックエンドは、以前の自前APIサービスで
Codeigniter3 のphp軽量フレームワーク、sqlite3
の構成となります。

・ローカルのフォルダからも、htmlをブラウザ開くと
　全ての機能が使用できる。アプリ構成としました

環境

Vue.js
php7.1
sqlite3
jQuery

参考の設定

・フロント側
github.com

・API側
github.com

ajaxのクロスドメイン対応

・ajax で、クロスドメイン通信する場合は。通常はエラーになりますが
phpで、ヘッダ情報を追加すると回避できました。

・コントローラに追加しています。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');        

実装など

・画面間のキー情報は、localStorage
で、渡しています。

・index
https://github.com/kuc-arc-f/vue3_cros_ver1/blob/master/index.html

var baseUrl = 'http://127.0.0.1/code-3/';
console.log(baseUrl)
//
var app = new Vue({
    el: '#app',
    created() {
        this.getTasks()
        var dat = exStorage.load(sysConst.STORAGE_KEY_pageId )
        //exStorage.remove(sysConst.STORAGE_KEY_pageId)
        console.log(dat[0])
    },    
    data: {
        tasks : [],
    },
    methods: {
        getTasks() {
            var url = this.conv_url('api/tasks')
            axios.get(url)
            .then(res =>  {
                this.tasks = res.data
                //console.log(res.data.length )
            })
        },
        conv_url(url) {
            return baseUrl + url
        },
        move_url(id) {
            console.log(id)
            var store = []
            store.push({ 'id' : id })            
            exStorage.save(sysConst.STORAGE_KEY_pageId , store)
            window.location.href='show.html'
//            console.log(sysConst.STORAGE_KEY_pageId)
        }
    }    
});

・show
https://github.com/kuc-arc-f/vue3_cros_ver1/blob/master/show.html

var baseUrl = 'http://127.0.0.1/code-3/';
console.log(baseUrl)
//
var app = new Vue({
    el: '#app',
    created() {
        var dat = exStorage.load(sysConst.STORAGE_KEY_pageId )
        console.log(dat.length )
        if(dat.length < 1){
            alert('表示IDの取得に失敗しました。');
        }else{
            this.task_id= dat[0].id
        }
    },    
    data: {
        item : [],
        task_id: 0,
    },
    mounted: function() {
        this.getItem();
    },    
    methods: {
        getItem() {
            var url = this.conv_url('api/tasks/show/'+ this.task_id)
            console.log(url)
            axios.get(url)
            .then(res =>  {
                this.item = res.data
//                console.log(res.data )
            })
        },
        conv_url(url) {
            return baseUrl + url
        },
    }    
});

おまけ

・netlify.com (ホスティングサービス)で、設置した場合でも
　正常に動作しました。
・バックエンドは、LAN上の　APIサービスです。

参考のページ

knaka0209.hatenablog.com

knaka0209.hatenablog.com