12、任务管理应用的仪表盘、安全设置与展示层优化

最新推荐文章于 2025-12-12 01:11:46 发布

xray4

最新推荐文章于 2025-12-12 01:11:46 发布

阅读量24

点赞数

CC 4.0 BY-SA版权

分类专栏：精通Symfony：构建高效Web应用文章标签：任务管理应用 SonataUserBundle 安全设置

本文链接：https://blog.youkuaiyun.com/xray4/article/details/149385527

精通Symfony：构建高效Web应用专栏收录该内容

17 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

任务管理应用的仪表盘、安全设置与展示层优化

1. 配置与路由更新

在配置过程中，需要让Doctrine知晓捆绑包和SonataUserBundle的实体映射。在 app/config/config.yml 文件中进行如下配置：

doctrine:
  dbal:
    types:
      json: Sonata\Doctrine\Types\JsonType
  orm:
    entity_managers:
      default:
        auto_mapping: true

安装SonataUserBundle后，不再需要FOS路由，需在 app/config/routing.yml 文件中进行替换：
原FOS路由 ：

fos_user_security:
    resource: "@FOSUserBundle/Resources/config/routing/security.xml"
fos_user_profile:
    resource: "@FOSUserBundle/Resources/config/routing/profile.xml"
    prefix: /profile
fos_user_register:
    resource: "@FOSUserBundle/Resources/config/routing/registration.xml"
    prefix: /register
fos_user_resetting:
    resource: "@FOSUserBundle/Resources/config/routing/resetting.xml"
    prefix: /resetting
fos_user_change_password:
    resource: "@FOSUserBundle/Resources/config/routing/change_password.xml"
    prefix: /profile

替换为Sonata路由 ：

sonata_user_security:
    resource: "@SonataUserBundle/Resources/config/routing/sonata_security_1.xml"
sonata_user_resetting:
    resource: "@SonataUserBundle/Resources/config/routing/sonata_resetting_1.xml"
    prefix: /resetting
sonata_user_profile:
    resource: "@SonataUserBundle/Resources/config/routing/sonata_profile_1.xml"
    prefix: /profile
sonata_user_register:
    resource: "@SonataUserBundle/Resources/config/routing/sonata_registration_1.xml"
    prefix: /register
sonata_user_change_password:
    resource: "@SonataUserBundle/Resources/config/routing/sonata_change_password_1.xml"
    prefix: /profile

同时，为将SonataUserBundle集成到管理区域，需添加以下路由：

sonata_user:
    resource: '@SonataUserBundle/Resources/config/routing/admin_security.xml'
    prefix: /admin

2. 安全设置

目前有两种登录方式：前端供客户使用，后端仅管理员可访问。因此需要为后端设置防火墙，并调整角色层次结构。在 app/config/security.yml 文件中进行如下修改：

security:
    role_hierarchy:
        ROLE_ADMIN:       [ROLE_USER, ROLE_SONATA_ADMIN]
        ROLE_SUPER_ADMIN: [ROLE_ADMIN, ROLE_ALLOWED_TO_SWITCH]
    firewalls:
        admin:
            pattern:            ^/admin/
            context:            user
            form_login:
                provider:       fos_userbundle
                login_path:     /admin/login
                use_forward:    false
                check_path:     /admin/login_check
                failure_path:   null
            logout:
                path:           /admin/logout
            anonymous:          true
    access_control:
        - { path: ^/login$, role: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/register, role: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/resetting, role: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/admin/login$, role: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/admin/logout$, role: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/admin/login_check$, role: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/admin/, role: [ROLE_ADMIN, ROLE_SONATA_ADMIN] }
        - { path: ^/.*, role: IS_AUTHENTICATED_ANONYMOUSLY }

完成上述设置后，访问 http://localhost:8000/admin/dashboard ，会显示不同的登录表单，使用管理员角色的用户登录即可进入管理区域。

3. 让SonataUserBundle负责用户管理

目前有两个可管理用户的捆绑包，需要将用户管理从FOS转移到Sonata，具体步骤如下：
1. 更新User实体 ：让User实体从Sonata User实体继承，而非FOS User实体。在 mava/src/AppBundle/Entity/User.php 文件中进行如下修改：

<?php
namespace AppBundle\Entity;
use Doctrine\ORM\Mapping as ORM;
use Sonata\UserBundle\Entity\BaseUser;
/**
 * User
 * @ORM\Table(name="mava_user")
 * @ORM\Entity(repositoryClass="AppBundle\Entity\UserRepository")
 */
class User extends BaseUser
{
    /**
     * @var integer
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    protected $id;
    public function __construct()
    {
        parent::__construct();
    }
}

创建Group实体 ：由于Groups已在 app/config.yml 中定义，需要创建对应的实体。在 mava/src/AppBundle/Entity/Group.php 文件中进行如下修改：

<?php
namespace AppBundle\Entity;
use Doctrine\ORM\Mapping as ORM;
use Sonata\UserBundle\Entity\BaseGroup;
/**
 * Group
 * @ORM\Table(name="group")
 * @ORM\Entity
 */
class Group extends BaseGroup
{
    /**
     * @var integer
     * @ORM\Column(type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    protected $id;
    /**
     * Get id
     * @return  integer
     */
    public function getId()
    {
        return $this->id;
    }
}

更新数据库表 ：运行以下命令更新数据库表，查看从SonataUserBundle继承后的User表：

$ bin/console doctrine:schema:update –force

执行该命令后，User表会新增大量列（具体为39列），后续会对用户实体的管理区域进行配置。

4. 用户仪表盘

一个优秀的任务管理Web应用不仅需要后端管理区域，每个成员也需要自己的仪表盘，以便在自己的工作空间中管理项目和任务，而无需访问后端。假设所有前端活动都在 /dashboard URL下进行，防火墙已在 security.yml 中设置好：

firewalls:
    main:
        pattern:             .*
        context:             user
        form_login:
            provider:       fos_userbundle
            login_path:     /login
            use_forward:    false
            check_path:     /login_check
            failure_path:   null
        logout:             true
        anonymous:          true
access_control:
    - { path: ^/, role: IS_AUTHENTICATED_FULLY }

接下来需要创建控制器和相关操作来处理工作空间、项目、任务和成员请求。

5. 生成CRUD

为所有四个实体生成CRUD，以Workspace为例，执行以下命令：

$ bin/console doctrine:generate:crud

在交互过程中，依次输入以下信息：
- The Entity shortcut name: AppBundle:Workspace
- Do you want to generate the “write” actions [no]? yes
- Configuration format (yml,xml,php or annotation) [annotation]: yml
- Routes prefix [/workspace]: 直接回车使用默认值
- Confirm automatic update of the Routing [yes]? 直接回车使用默认值

该命令会在 src/Mava/CoreBundle/Resources/config/routing.yml 文件中添加新资源：

core_workspace:
    resource: "@AppBundle/Resources/config/routing/workspace.yml"
    prefix:   /workspace

mava/src/AppBundle/Resources/config/routing/workspace.yml 文件包含了列出、创建、更新和删除工作空间所需的所有路由：

workspace:
    path:     /
    defaults: { _controller: "AppBundle:Workspace:index" }
workspace_show:
    path:     /{id}/show
    defaults: { _controller: "AppBundle:Workspace:show" }
workspace_new:
    path:     /new
    defaults: { _controller: "AppBundle:Workspace:new" }
workspace_create:
    path:     /create
    defaults: { _controller: "AppBundle:Workspace:create" }
    requirements: { _method: post }
workspace_edit:
    path:     /{id}/edit
    defaults: { _controller: "AppBundle:Workspace:edit" }
workspace_update:
    path:     /{id}/update
    defaults: { _controller: "AppBundle:Workspace:update" }
    requirements: { _method: post|put }
workspace_delete:
    path:     /{id}/delete
    defaults: { _controller: "AppBundle:Workspace:delete" }
    requirements: { _method: post|delete }

6. 修改表单

生成CRUD后，部分表单可能无法按预期工作。例如，访问 /project/new 会抛出异常；若为User实体生成CRUD，访问 /user 相关路由时，仅显示id属性。
- 修复项目表单 ：在 mava/src/AppBunlde/Form/ProjectType.php 文件中，修改Workspace字段：

<?php
class ProjectType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            //...
            ->add('workspace','entity',
                array(
                    'class' => 'AppBundle/Entity/Workspace',
                    'property' => 'name'
                ));
    }
    //...
}

User表单 ：由于User实体从SonataUserBundle继承，它有自己的控制器、表单和模板来编辑用户资料、更改密码等。若因特殊原因生成了User实体的CRUD，则需要自己创建所需的表单、控制器和模板。

7. 资产组织

在Symfony中，资产组织较为复杂，有自己创建的捆绑包的资产、第三方捆绑包的资产以及项目全局的资产。可以将所有资源放在 web/ 目录下，也可以将自己创建的捆绑包的资产（模板、css和js文件）移动到 app/Resources 目录，然后使用Assetic进行管理。

8. 资产优化与管理

为了提高前端性能，需要优化图像、减少文件I/O并缓存内容。Symfony的AsseticBundle可用于管理资产和优化速度，具体操作如下：
1. 安装AsseticBundle ：使用composer进行安装，并在 app/AppKernel.php 文件中注册：

$ composer require symfony/assetic-bundle

// app/AppKernel.php
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
        );
        // ...
    }
}

配置AsseticBundle ：在 app/config/config.yml 文件中进行如下配置：

assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~
        less:
            node: /usr/bin/node
            node_paths: [/usr/lib/node_modules]
            apply_to: "\.less$"

9. 模板组织

模板层次结构的策略取决于项目需求。在本项目中，将基础模板放在 app/Resources/views 目录，该模板定义项目的主要HTML结构，包含头部、导航、主体和页脚等占位符。其他捆绑包的模板可以继承该基础模板，方便后续修改页面结构。对于第三方捆绑包的模板，可以在 app/Resources 目录下创建同名文件夹进行覆盖。

10. 模板优化

基础模板应仅包含块，避免定义类名或ID名，以遵循最佳实践。同时，可将资产相关的代码放在另一个模板中，如 mavaBase.html.twig ：

{# app/Resources/views/mava_base.html.twig #}
{% extends "base.html.twig" %}
{% block title 'MAVA' %}
{% block head %}
    <link rel="icon" sizes="16x16" href="{{ asset('favicon.ico') }}" />
    {% if app.environment == 'prod' %}
        {# Compile all CSS into 1 file #}
        {% stylesheets
                '@bootstrap_css'
                '@mava_css'
                output='css/compiled/main.css' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% else %}
        {# Ask Assetic to generate the files individually #}
        {% stylesheets '@bootstrap_css' output='css/bootstrap.css' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
        {% stylesheets '@mava_css' output='css/mava.css' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endif %}
{% endblock %}
{% block javascripts %}
    {% if app.environment == 'prod' %}
        {# Compile all JS into 1 file #}
        {% javascripts
                '@jquery'
                '@bootstrap_js'
                output='js/compiled/main.js' %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% else %}
        {# Ask Assetic to generate the files  individually #}
        {% javascripts '@jquery' output='js/jquery.js' %}
        {% endjavascripts %}
        {% javascripts '@bootstrap_js' output='js/bootstrap.js' %}
        {% endjavascripts %}
        {# Reference the generated files #}
        <script src="{{ asset('js/jquery.js') }}"></script>
        <script src="{{ asset('js/bootstrap.js') }}"></script>
    {% endif %}
{% endblock %}

通过配置 config.yml 文件中的 assetic 部分，可以根据当前环境决定是否合并资产，从而去除模板中的条件块：

assetic:
    debug:          '%kernel.debug%'      
    use_controller: '%kernel.debug%'

总结

本文介绍了任务管理应用的仪表盘、安全设置、用户管理、资产组织与优化以及模板组织等方面的内容。通过合理配置和管理，可以提高应用的安全性、性能和可维护性。以下是主要步骤的总结表格：
| 步骤 | 操作内容 |
| ---- | ---- |
| 配置与路由更新 | 让Doctrine知晓实体映射，替换FOS路由为Sonata路由，添加管理区域路由 |
| 安全设置 | 调整角色层次结构，设置后端防火墙和访问控制 |
| 用户管理转移 | 更新User和Group实体，更新数据库表 |
| 生成CRUD | 为实体生成CRUD，创建控制器和路由 |
| 表单修复 | 修复项目表单，处理User表单问题 |
| 资产组织与管理 | 合理组织资产，安装和配置AsseticBundle |
| 模板组织与优化 | 定义基础模板，优化模板结构，根据环境合并资产 |

mermaid流程图

graph LR
    A[配置与路由更新] --> B[安全设置]
    B --> C[用户管理转移]
    C --> D[生成CRUD]
    D --> E[表单修复]
    E --> F[资产组织与管理]
    F --> G[模板组织与优化]

11. 模板实战：创建和修改模板

11.1 创建基础模板

一个好的基础模板应该只包含块，在 app/Resources/views/base.html.twig 中创建基础模板：

{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>{% block title %}{% endblock %}</title>
        {% block head %}{% endblock %}
    </head>
    <body>
        {% block navigation %}{% endblock %}
        {% block body %}{% endblock %}
        {% block footer %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

11.2 创建包含资产的模板

为了避免基础模板过于臃肿，创建 mavaBase.html.twig 模板来处理资产：

{# app/Resources/views/mava_base.html.twig #}
{% extends "base.html.twig" %}
{% block title 'MAVA' %}
{% block head %}
    <link rel="icon" sizes="16x16" href="{{ asset('favicon.ico') }}" />
    {% stylesheets
        '@bootstrap_css'
        '@mava_css'
        output='css/compiled/main.css' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block javascripts %}
    {% javascripts
        '@jquery'
        '@bootstrap_js'
        output='js/compiled/main.js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

11.3 模板优化与环境适配

通过 app/config/config.yml 中的 assetic 配置，根据环境自动决定是否合并资产，简化模板代码。例如，原模板中根据环境判断是否合并资产的代码可以简化：

{# 原模板代码，包含条件判断 #}
{% if app.environment == 'prod' %}
    {# Compile all JS into 1 file #}
    {% javascripts
            '@jquery'
            '@bootstrap_js'
            output='js/compiled/main.js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% else %}
    {# Ask Assetic to generate the files  individually #}
    {% javascripts '@jquery' output='js/jquery.js' %}
    {% endjavascripts %}
    {% javascripts '@bootstrap_js' output='js/bootstrap.js' %}
    {% endjavascripts %}
    {# Reference the generated files #}
    <script src="{{ asset('js/jquery.js') }}"></script>
    <script src="{{ asset('js/bootstrap.js') }}"></script>
{% endif %}

{# 优化后，根据配置自动处理 #}
{% javascripts
    '@jquery'
    '@bootstrap_js'
    output='js/compiled/main.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

12. 第三方模板的覆盖

在实际项目中，可能需要修改第三方捆绑包的模板。以SonataUserBundle的用户资料编辑模板为例，在 app/Resources 目录下创建 SonataUserBundle/views 文件夹，将需要修改的模板复制到该文件夹下进行修改。这样，Symfony会优先使用该文件夹下的模板，而不是原第三方捆绑包中的模板。

13. 前端框架的集成：以Bootstrap为例

13.1 安装Bootstrap

可以通过npm或其他包管理工具安装Bootstrap。例如，使用npm安装：

$ npm install bootstrap

13.2 配置Assetic使用Bootstrap

在 app/config/config.yml 中配置Assetic，使其能够处理Bootstrap的资产：

assetic:
    # ...
    assets:
        bootstrap_css:
            inputs:
                - '%kernel.root_dir%/../node_modules/bootstrap/dist/css/bootstrap.min.css'
            filters: [cssrewrite]
        bootstrap_js:
            inputs:
                - '%kernel.root_dir%/../node_modules/bootstrap/dist/js/bootstrap.min.js'

13.3 在模板中使用Bootstrap

在模板中引入Bootstrap的CSS和JS文件：

{% stylesheets
    '@bootstrap_css'
    output='css/bootstrap.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{% javascripts
    '@bootstrap_js'
    output='js/bootstrap.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

14. 持续优化与改进

在项目开发过程中，需要不断对资产、模板和性能进行优化。以下是一些持续优化的建议：
1. 定期检查资产 ：检查是否有未使用的CSS和JS文件，及时清理，减少加载时间。
2. 优化模板结构 ：确保模板层次清晰，避免嵌套过深，提高代码的可维护性。
3. 性能测试 ：使用工具对项目进行性能测试，找出性能瓶颈并进行优化。

总结

本文进一步深入介绍了模板的创建、修改、第三方模板覆盖以及前端框架的集成等内容。通过合理使用模板和资产优化技术，可以提高项目的可维护性和性能。以下是关键步骤的总结表格：
| 步骤 | 操作内容 |
| ---- | ---- |
| 创建基础模板 | 在 app/Resources/views 创建包含占位符的基础模板 |
| 创建资产模板 | 创建 mavaBase.html.twig 处理资产，根据环境合并资产 |
| 覆盖第三方模板 | 在 app/Resources 下创建对应文件夹修改第三方模板 |
| 集成前端框架 | 安装Bootstrap，配置Assetic使用，在模板中引入 |
| 持续优化 | 定期检查资产，优化模板结构，进行性能测试 |

mermaid流程图

graph LR
    A[创建基础模板] --> B[创建资产模板]
    B --> C[覆盖第三方模板]
    C --> D[集成前端框架]
    D --> E[持续优化]