README

使用 VueJs 中的服务器端路由和服务器驱动的数据共享

安装

Laravel 包

composer require soroosh/ternobo-wire

Vuejs 插件

npm i ternobowire-js

服务器端设置

在 resources/view 内创建 app.blade.php，然后设置应用程序根目录和 token 属性

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Ternobo App</title>
  <link href="/css/app.css" rel="stylesheet" />
</head>

<body class="font-sans antialiased" data-wire='{{ $tuuid }}'>
    {!! $ternoboApp !!}
    <script src="/js/manifest.js" defer></script>
    <script src="/js/vendor.js?" defer></script>
    <script src="/js/app.js" defer></script>
</body>

</html>

路由

将 TernoboWire::routes(); 添加到 routes/web.php 文件的顶部。

<?php
use Illuminate\Support\Facades\Route;
use Ternobo\TernoboWire\TernoboWire;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
 */

TernoboWire::routes();
Route::get('/', "IndexController@index");
// ....

共享数据函数

服务器端适配器提供了一种为每个请求预先分配共享数据的方法。这通常在控制器之外完成。共享数据将自动加载到共享状态（Vuex）中。

在 App/Providers/AppServiceProvider.php 的 boot 函数内设置共享数据函数。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Ternobo\TernoboWire\TernoboWire;
use Illuminate\Support\Facades\Auth;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        TernoboWire::share(function () {
            return [
            	"appName" => config('app.name'),
				"is_admin" => function (){
					if(Auth::check()){
						return Auth::user()->is_admin;
					}
					return false;
				}
            ];
        });
    }
}

该函数返回一个包含所有共享数据的映射数组。

客户端

服务器端应用程序配置完成后，需要设置客户端应用程序。

初始化应用程序

设置应用程序入口点，然后在前端应用程序根目录内创建名为 Pages 的文件夹（默认：resources/js）。

import Vue from "vue";
import WireApp from "wire-js";
import { plugin, store } from "wire-js";
import Vuex from "vuex";
Vue.use(plugin);
Vue.use(Vuex);

let dataToken = document.body.dataset.wire;
document.body.dataset.wire = "";
const vue_app = new Vue({
	store: store(),
	render: (h) =>
		h(WireApp, {
			props: {
				dataToken: dataToken,
				resolveComponent: (component) => import(`./Pages/${component}`),
			},
		}),
}).$mount("#app");

**现在您可以创建任何页面并使用 TernoboWrie::render("pagename", $data) 来渲染它**

soroosh / ternobo-wire

维护者

详细信息