- Локальный Сервер для размещения проекта
- IDE для установки фреймворка и создания проекта
установка в терминале IDE
npm install -g @vue/cli
vue --version
фреймворк
JavaScript
с открытым исходным кодом
для создания пользовательских интерфейсов
похожий
Angular, React
плюсы
реактивность данных (обновлять данные на лету)
npm install -g @vue/cli
vue --version
Создать БД
кодировка
utf8_general_ci
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'];
}
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);
});
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('ошибка')
}
}
},
}
import {createStore} from "vuex";
import {bd2112021753} from 'store/bd2112021753';
export default createStore({
...
modules:{
//модули, которые привязываются к данному модулю
bd:bd2112021753,
},
});
<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>
<template>
{{ Значение }}
</template>