jiannius/atom-livewire

Laravel-Livewire模板

0.50.395 2024-09-29 09:08 UTC

This package is auto-updated.

Last update: 2024-09-29 09:12:04 UTC


README

静态站点安装

  1. 安装Laravel
composer create-project laravel/laravel <project-name>
cd <project-name>
npm install

// You don't need this if using Laravel Forge or Laravel Valet
sudo chown www-data:www-data storage -R
sudo chmod 777 storage -R
sudo chmod 777 bootstrap -R
  1. 安装Atom
composer require jiannius/atom-livewire
php artisan atom:install --static --force
npm install
  1. 在config/atom.php中启用静态站点
'static_site' => true,
  1. 向app\Http\Kernel.php中添加中间件
protected $middleware = [
    ...
    \Jiannius\Atom\Http\Middleware\Bootstrap::class, // for site security like https redirect etc
];
  1. 开始开发
npm run dev

应用程序安装

  1. 创建数据库

    首先,您必须在MySQL中为您的项目创建一个数据库

  2. 安装Laravel

composer create-project laravel/laravel <project-name>
cd <project-name>
npm install

// You don't need this if using Laravel Forge or Laravel Valet
sudo chown www-data:www-data storage -R
sudo chmod 777 storage -R
sudo chmod 777 bootstrap -R
  1. 更新.env文件中的数据库名称
DB_DATABASE=<project-name>
DB_USERNAME=root
DB_PASSWORD=password
  1. 安装Atom
composer require jiannius/atom-livewire
  1. 初始化Atom
php artisan atom:init
  1. 运行迁移
php artisan queue:table        // publish queue table from laravel
php artisan migrate
php artisan atom:migrate base  // migrate atom base tables
  1. 发布路由。这将从atom复制基本路由到routes/web.php
php artisan atom:publish base
  1. 运行npm install
npm install
  1. 向app\Http\Kernel.php中添加中间件
protected $middleware = [
    ...
    \Jiannius\Atom\Http\Middleware\Bootstrap::class,
];
  1. 为错误监控配置Sentry(可选)
php artisan sentry:publish --dsn=<sentry dsn - get from sentry when create project>

// if develop locally, remember to set sentry dsn to null in .env file
// this is to avoid sending error to sentry server in local environment
SENTRY_LARAVEL_DSN=null
SENTRY_TRACES_SAMPLE_RATE=0
  1. 开始开发
npm run dev

安装Atom模块

  1. 为特定模块运行迁移
php artisan atom:migrate                // select the module from the list
php artisan atom:migrate app.label      // optionally, if you know the module name
  1. (可选)将代码发布到本地以进行进一步修改
php artisan atom:publish app.label

修改Livewire\App\Settings

  1. 要修改应用程序设置,扩展Jiannius\Atom\Http\Livewire\App\Settings\Index.php,然后更改getTabsProperty()方法。
// app/Http/Livewire/App/Settings/Index.php

<?php

namespace App\Http\Livewire\App\Settings;

class Index extends \Jiannius\Atom\Http\Livewire\App\Settings\Index
{
    public function getTabsProperty(): array
    {

        return [
            ['group' => 'Account', 'tabs' => [
                ['slug' => 'login', 'label' => 'Login Information', 'icon' => 'login',],
                ['slug' => 'password', 'label' => 'Change Password', 'icon' => 'lock',],
                ['slug' => 'billing', 'label' => 'Subscription', 'icon' => 'credit-card'],
            ]],

            ['group' => 'System', 'tabs' => [
                ['slug' => 'user', 'label' => 'Users', 'icon' => 'users'],
                ['slug' => 'invitation','label' => 'Invitations', 'icon' => 'invitation'],
                ['slug' => 'role', 'label' => 'Roles', 'icon' => 'user-tag'],
                ['slug' => 'team', 'label' => 'Teams', 'icon' => 'people-group'],
                ['slug' => 'page', 'label' => 'Pages', 'icon' => 'newspaper'],
                ['slug' => 'file', 'label' => 'Files and Media', 'icon' => 'images'],
            ]],

            ['group' => 'Labels', 'tabs' => [
                ['slug' => 'label/blog-category', 'label' => 'Blog Categories', 'icon' => 'tag'],
            ]],

            ['group' => 'Website', 'tabs' => [
                ['slug' => 'website/profile', 'label' => 'Profile', 'icon' => 'globe'],
                ['slug' => 'website/seo', 'label' => 'SEO', 'icon' => 'search'],
                ['slug' => 'website/analytics', 'label' => 'Analytics', 'icon' => 'chart-simple'],
                ['slug' => 'website/social-media', 'label' => 'Social Media', 'icon' => 'share-nodes'],
                ['slug' => 'website/announcement', 'label' => 'Announcement', 'icon' => 'bullhorn'],
                ['slug' => 'website/popup', 'label' => 'Pop-Up', 'icon' => 'window-restore'],
            ]],

            ['group' => 'Integration', 'tabs' => [
                ['slug' => 'integration/email', 'label' => 'Email', 'icon' => 'paper-plane'],
                ['slug' => 'integration/storage', 'label' => 'Storage', 'icon' => 'hard-drive'],
                ['slug' => 'integration/payment', 'label' => 'Payment', 'icon' => 'money-bill'],
                ['slug' => 'integration/social-login', 'label' => 'Social Login', 'icon' => 'login'],
            ]]
        ];
    }
}

  1. 或者,您可以将整个app/settings发布到本地。
php artisan atom:publish app.settings

支付网关

  1. 要启用支付网关,在config/atom.php中添加提供者
// config/atom.php
...
'payment_gateway' => ['ozopay'];
  1. 将重定向和webhook路由从CSRF检查中排除。
// app/Http/Middleware/VerifyCsrfToken.php

protected $exclude = [
    '__ozopay/*',
    '__gkash/*',
    '__stripe/*',
];
  1. 将config/session.php的same site设置配置为null。这是为了允许来自另一个提供者的POST请求。
// config/session.php
...
'same_site' => null,
  1. 使用支付网关组件来显示支付方式选择框。
<x-payment-gateway
    callback="createPayment"
    :providers="['ozopay']"
    :endpoints="[
        'ozopay' => 'https://uatpayment.ozopay.com/PaymentEntry/PaymentOption',
    ]"
    :value="[
        'email' => $contribution->socso_account->email,
        'phone' => $contribution->socso_account->phone,
        'address' => implode(', ', [$contribution->socso_account->address_1, $contribution->socso_account->address_2]),
        'city' => $contribution->socso_account->city,
        'postcode' => $contribution->socso_account->postcode,
        'state' => metadata()->socso('state', $contribution->socso_account->state),
        'country' => 'MY',
        'currency' => 'MYR',
        'amount' => $this->total,
    ]"
/>
  1. 为每个提供者在app/Jobs中创建一个履行作业。以下为每个提供者的类名
    • Ozopay: app/Jobs/OzopayFulfillment.php
// app/Jobs/OzopayFulfillment.php

...
protected $params; // will contains the response from provider

public function __construct($params)
{
    $this->params = $params;
}

public function handle()
{
    // handle fulfillment
}