README

这是我们项目使用的管理面板的骨架代码。它包含基本的视图和登录功能，以及部署和测试所需的相关文件。前端使用 bootstrap。

创建项目

composer create-project techins-software/laravel-boilerplace my-new-project

设置 PHP 依赖项

创建必要的 .env 文件。如果使用我们的 docker 解决方案，请使用 .env.php_dev

cp .env.php_dev .env

注意：这些凭据在使用 docker 解决方案时有效。在生产环境中不应使用。

然后，一旦生成了 .env，请运行

composer install
php artisan key:generate
php artisan migrate

构建前端

对于开发，您可以运行

npm install
npm run build_dev

对于一次性构建（或 ci/cd 构建）运行

npm install
npm run build

GitHub Actions & CI/CD

这些操作用于

1. 自动化打标签
2. 在 PR 上运行单元测试

查看 .github/workflows 文件夹以获取更多信息。

服务器上的部署和构建（CI/CD）

它包含以下基本文件，用于构建 AWS codepipeline。它还包含以下部署文件

• appspec.production.yml 用于在生产传统 LEMP 堆栈中部署
• appspec.staging.yml 用于在预生产传统 LEMP 堆栈中部署

在构建过程中，以下文件存在

• .env.production 用于在生产环境中引导环境
• .env.staging 用于在预生产环境中引导环境

任何秘密值都应替换在 buildspec.yml 中

视图模板

所有可用的页面都扩展了 layout.layout-common blade 模板。如果用户是管理员，则可以扩展 layout.layout-admin（它扩展了 layout.layout-common，在标题中放置必要的链接）。您可以自由地放置额外的视图并按需修改它们。

layout.fullpage 是一个不包含任何标题，只包含一个位于页面中心的单个主要元素的布局，对于登录和注册页面非常有用。

两者 layout.layout-common 和 layout.fullpage 都包含以下部分，您可以在需要时放置必要的 HTML

• main 主要 HTML 存放处
• nav-items 标题中的导航项存放处
• js 在其中放置 JavaScript 文件
• css 在其中放置样式表（在 layout.fullpage 中不可用）

所有模板都使用 bootstrap 和 fontawesome。

JavaScript

所有扩展 layout.layout-common 的布局默认加载 js/default.js 文件。如果需要自定义 JavaScript 文件，则将适当的 js 文件放置在 resources/js 中，并在 blade 模板中覆盖 js 部分，以下是一些示例。

示例 1：使用 resources/js/myjs.js 覆盖默认 js

@extends('layout.layout-common')

@section('main')

{{!! Your html content shown upon user !!}}

@endsection

@section('js')
 @vite(['resources/js/myjs.js'])
@endsection

示例 2：与默认 js 一起加载 resources/js/myjs.js

@extends('layout.layout-common')

@section('main')

{{!! Your html content shown upon user !!}}

@endsection

@section('js')
 @parent
 @vite(['resources/js/myjs.js'])
@endsection

Css

以下是在每个模板中默认加载的 css

• resources/css/common.css => 任何模板都会加载它，它加载 bootstrap 和 fontawesome。
• resources/css/fullpage.css => 使用 layout.fullpage 的任何模板都会加载它，它包含 resources/css/common.css。
• reources/css/user/list.css => 由模板 user.listUsers 加载，它包含 resources/css/common.css。

如果您想包含自己的 css，请按照以下步骤操作

创建 css 文件

首先在 resources/css 中创建必要的 css 文件。然后将它放置在以下内容中

@import "resources/css/common.css";

/** rest of css goes here */

加载第三方CSS

此外，如果您使用全页布局并且想在上面放置额外的CSS，您也可以这样做

@import "resources/css/fullpage.css";

/*Rest of css goes here*/

如果需要，您也可以使用@import导入任何第三方CSS。如果CSS是通过npm安装的，请确保将其放在vite.config.js文件中

laravel-boilerplace/vite.config.js

在6331fb7中第40至52行

在Blade上加载

无论哪种情况，一旦您的CSS准备就绪，您就可以加载该文件（假设名称为resources/css/mycss.css）

@section('css')
  @vite(['resources/css/mycss.css'])
@endif

构建前端

然后您可以根据上述方法构建前端

npm run build_dev