Рубрика: Vue «Работа с Сервером»

Выбор СУБД
phpMyAdmin ^_example

• графический интерфейс для работы с базой данных
• заходим через локальный сервер OpenServer

Создать БД
кодировка
utf8_general_ci

Подключение проекта Laravel к БД
.env

Создание Модели
для БД в проекте Laravel
Unity _^example

app\Models\Unity.php

<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Unity extends Model
{
    protected $fillable = ['id','name', 'title','tegs'];
}

Создание Контроллера Модели
для БД в проекте Laravel
Unity _^example

app\Http\Controllers\UnityController.php

<?php
namespace App\Http\Controllers;

use App\Models\Unity;
use Illuminate\Http\Request;

class UnityController extends Controller
{
    public function index()
    {
        return Unity::all();
    }
 
    public function show($id)
    {
        return Unity::findOrFail($id);
    }
 
    public function update(Request $request, $id)
    {
        $es = Unity::findOrFail($id);
        $es->update($request->all());
 
        return $es;
    }
 
    public function create(Request $request, $id)
    {
        $es = Unity::create($request->all());
        return $es;
    }
 
    public function destroy($id)
    {
        $es = Unity::findOrFail($id);
        $es->delete();
        return '';
    }
}

Создание универсального Роутера для БД

Вызвать любую функцию любого контроллера
с типом получение GET или отправка POST
routes\api.php

Route::match(array('GET', 'POST'), '{table}/{method}/{id}', function(Request $request,$table,$method,$id){
return app('App\\Http\\Controllers\\'.$table)->{$method}($request,$id);
});

Создание Store модуля
по работе с таблицами БД

resources\store\bd2112021753.js

import axios from "axios";
export const bd2112021753 = {
    namespaced: true,
    state: {
        items: [],
        isItemsLoading: false,
        tables: [
            {name: 'Unity', items: [], isItemsLoading: false },
        ]
    },
    //только вычисление без изменений
    getters: {
        axios_post:(state)=>async(data)=> {
            return await axios.post('/api/' + data.table.name + 'Controller/' + data.Операция + '/' + data.item.id, data.item)
                .then((response) => {
                    alert(response.statusText);
                    return response.data.id;
                }).catch(function (resp) {
                    console.log(resp); alert("Не удалось записать в БД");
                })
        },
        ИндексТаблицы: (state) => (name) => {
            return state.tables.findIndex(table => table.name == name);
        },
        //let t=getters.ИндексТаблицы('Unity');
        //return t==undefined?[]:t.items; 
        //прямой вызов
        Unity:(state)=>state.tables[0].items,
    },
    mutations: {
        ИзменитьЭлементы(state, data) { 
            state.tables[data[1]].items = data[0] 
        },
        ДобавитьЭлемент(state, data) { 
            state.tables[data.table].items.push(data.item) 
        },
        ИзменитьЭлемент(state, item) { 
            state.items[item.id] = item 
        },       
        ИзменитьЗначениеЭлемента: (state) => (t, data) => {
            state.tables[data[0]].items[data[1]][data[2]] = data[3]
        },
        ОчиститьЭлемент(state, item) { 
            state.items = state.items.filter(p => p.id !== item.id) 
        },
        set_isItemsLoading(state, bool) { 
            state.isItemsLoading = bool 
        },
    },
    actions: {
        async ОтправитьНовуюСтроку({ commit, getters }, data) {
            data.item.id=await getters['axios_post']({ table: data.table, item: data.item, Операция: 'create' });
            commit('ДобавитьЭлемент', { table: data.table.index, item: data.item });
        },
        async ЗагрузитьСтроки({ state, commit, getters }, name) {
            try {
commit('set_isItemsLoading', true);

setTimeout(async () => {
const response = await fetch('/api/' + name + 'Controller/index/0');
if (response.status === 200) {
      const result = await response.json();
      const i = getters.ИндексТаблицы(name);
      commit('ИзменитьЭлементы', [result, i]);
}
                    commit('set_isItemsLoading', false);
                }, 1000)
            } catch (e) {
                console.log(e);
                alert('ошибка')
            }
        }
    },
}

• Регистрация модуля в корневом глобальном модуле
  resources\store.js

import {createStore} from "vuex";
import {bd2112021753} from 'store/bd2112021753';
export default createStore({

...
modules:{
//модули, которые привязываются к данному модулю
bd:bd2112021753,
},
});

• Загрузка таблицы БД в любом компоненте Vue
  resources\components\name.vue

<template>
<table border="1" v-for="row in Unity">
  <tr>
    <td>{{row.id}}</td>
    <td>{{row.name}}</td>
    <td>{{row.title}}</td>
  </tr>
</table>
</template>

<script>
import { mapActions,mapGetters } from "vuex";
export default {
  computed:{
    ...mapGetters({
      Unity: 'bd/Unity',
    }),
  },
  methods: {
    ...mapActions({
      ЗагрузитьСтроки: "bd/ЗагрузитьСтроки",
    }),
  },
  mounted(){
    this.ЗагрузитьСтроки('Unity');
  },
}
</script>