Get best of the week

带有CRUD生成器的Laravel + Vue + ElementUI上大型模块化SPA的基础

图片

近年来，我设法使用不同的后端和前端框架来处理多个大型项目，而这些项目不是非常重要。面对随着应用程序增长而出现的各种问题。

现在，我可以得出结论，哪些解决方案是成功的，哪些不是非常成功。
根据积累的经验，我开始收集所有最佳解决方案，并为SPA创建自己的基础。

我不会告诉您如何在Laravel上创建站点或什么是SPA。Internet上有足够的此类信息。本文适用于或多或少有经验的开发人员，因此我将错过一些细节。

谁等不及了，在本文的结尾是指向我的github存储库的链接。Laravel和Vue.js + Vuex

选择了主要技术，因为这是我的主要堆栈。 为了快速开发，我选择了UI Kit- ElementUI。



主要目标


为大中型项目创建基础：

  • 将有助于避免模块的刚性凝聚
  • 经验不足的程序员可以理解
  • 帮助避免代码重复
  • 容易扩展
  • 减少项目开始时间
  • 减少项目支持和代码导航的时间

为了使生活尽可能轻松，不要在项目中感到困惑，您需要适当地构建自我。最初，应将应用程序划分为责任级别，例如用户界面，数据库，业务逻辑。

此外，应首先按功能划分每个层，然后应根据所选模式划分每个功能模块。

受到DDD哲学的启发，我决定将前端和后端划分为语义模块。但是这些不是Evans描述的经典领域。他的模型也不完美。在任何应用程序中，随着时间的流逝，组件之间的关系总是会出现-模型之间的关系相同。

他将模型留在单独的一层，因为它们似乎是在复制数据库及其所有连接。

在最前面创建一个目录resources / js / modules，其中将放置不同的模块。每个组件都有用于处理后端的api方法，组件 -所有组件和页面，存储 -存储和路由。

{moduleName}/
│
├── routes.js
│
├── api/
│   └── index.js
│
├── components/
│   ├── {ModuleName}List.vue
│   ├── {ModuleName}View.vue
│   └── {ModuleName}Form.vue
│
└── store/
    ├── store.js
    ├── types.js
    └── actions.js

在resources / js中，创建了core文件夹，该文件夹位于系统的主要组件所在的位置。
也有引导程序，并包括用于分别配置其他库和实用程序的文件夹。

该项目使用模型的动态加载。也就是说，在核心/路由和核心/状态中，我们会自动加载相应的路由和存储文件（无需注册）。

这是一个如何从不同模块自动加载 store.js的示例。

// Load store modules dynamically.
const requireContext = require.context('../../modules', true, /store\.js$/) 
 
let modules = requireContext.keys() 
    .map(file => 
        [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)] 
    )
    .reduce((modules, [path, module]) => { 
        let name = path.split('/')[0] 
        return { ...modules, [name]: module.store } 
    }, {})
 
modules = {...modules, core} 
 
export default new Vuex.Store({
    modules
})

在app目录的后端，将有类似的模块。每个模块将包含文件夹Controllers，Requests，Resources。带有路由的文件也已移至此处-routes_api.php。

{ModuleName}/
│
├── routes_api.php
│
├── Controllers/
│   └──{ModuleName}Controller.php
│
├── Requests/
│   └──{ModuleName}Request.php
│
└── Resources/
    └── {ModuleName}Resource.php

其他设计模式，例如事件，工作，策略等。不会包含在模块中，因为它们的使用频率较低，并且将它们放在单独的层中更为合乎逻辑。

动态加载模块的所有操作均已完成，以使模块之间的啮合跳动最小。这使您可以添加和删除模块而不会产生任何后果。现在，您可以使用artisan make命令来创建这样的模块。借助它的帮助，我们可以快速为项目填充必要的实体以及CRUD功能。

执行完命令后php artisan make:module {ModuleName}，我们将拥有所有必要的文件，包括模型和迁移文件，才能使完整的CRUD正常工作。您只需要完成迁移php artisan migrate一切都会正常。很可能您将需要添加其他字段，因此在迁移之前，请不要忘记将它们添加到模型，迁移以及输出到vue。



在此模板中，使用了JWT-Auth技术进行身份验证，但是它可能是多余的，应该为Laravel Sanctum重新制作。反过来，在前端使用vue-auth，它使管理用户授权和角色变得容易。

将来，我想改进系统。添加全局事件总线，连接websocket。添加测试。可以在单独的分支中创建角色管理选项，也可以使用其他UI Kit创建分支。听到建议，评论会很高兴。

最初，此模板是为满足您的需求而开发的，但现在我希望它对其他用户有用。

所有代码都可以在我的github仓库中查看。

More articles:


All Articles