Vue.js +Codeigniter3 +sqlite 設定など

index:

概要:

前のVue.js 関連で、
バックエンドは
Codeigniter3 のphp軽量フレームワーク、sqlite3
の構成となります。

環境

Vue.js
php7.1
sqlite3
jQuery

参考の設定

github.com

準備

・sqliteの設定
application\sqlite\db1.sqlite に配置した場合。

database.php
https://github.com/kuc-arc-f/code-2_ver1/blob/master/application/config/database.php

$active_group = 'sqlite';
$query_builder = TRUE;

$db['sqlite'] = array(
    'dsn'  => 'sqlite:'.APPPATH.'sqlite/db1.sqlite',
    'hostname' => '',
    'username' => '',
    'password' => '',
    'database' => '',
    'dbdriver' => 'pdo',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'autoinit' => TRUE,
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

・表の作成例

CREATE TABLE tasks(
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title VARCHAR(255) NOT NULL,
  content TEXT,
  uid INTEGER,
  up_date TIMESTAMP
);

・index
https://github.com/kuc-arc-f/code-2_ver1/blob/master/application/views/tasks/index.php

var baseUrl = '<?php echo base_url(); ?>';

var app = new Vue({
    el: '#app',
    created() {
        this.getTasks()
    },    
    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
        }
    }    
});

・create
https://github.com/kuc-arc-f/code-2_ver1/blob/master/application/views/tasks/create.php
登録系は、jQuery 使いました。 axios でエラー回避が困難でしたので。。

var baseUrl = '<?php echo base_url(); ?>';
console.log(baseUrl);

function test_ajax(){
    console.log('#btn-1');
    var hostUrl= baseUrl + 'api/tasks/create';
    var title = $('#title').val();
    var content = $('#content').val();
    $.ajax({
        url: hostUrl,
        type:'POST',
        dataType: 'json',
        data : { 'title' : title, 'content' : content},
        timeout:3000,
    }).done(function(data) {
        console.log("ajax-ok");
        console.log(data);
    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("ajax-error");
    })		
}

・ルーティング
https://github.com/kuc-arc-f/code-2_ver1/blob/master/application/config/routes.php

$route['tasks/edit/(:any)'] = 'tasks/edit/$1';
$route['tasks/show/(:any)'] = 'tasks/view/$1';
$route['tasks/create'] = 'tasks/create';
$route['tasks/(:any)'] = 'tasks/view/$1';
$route['tasks'] = 'tasks';
$route['api/tasks/create'] = 'tasks/api_create';
$route['api/tasks'] = 'tasks/api_index';

WEB API

・tasks.php
API,画面の初期表示など

https://github.com/kuc-arc-f/code-2_ver1/blob/master/application/controllers/tasks.php

参考のページ

knaka0209.hatenablog.com

knaka0209.hatenablog.com