【源码】基于 Angular 和 NGZORRO 框架的企业后台管理系统模板

项目简介

本项目是基于阿里 Angular 组件 NG-ZORRO 开发的企业后台管理系统模板，目的是简单、方便、快速地搭建企业后台管理系统。项目提供了登录页面、动态菜单、session 存储、权限路由守卫等功能，开发人员只需开发对应的后台服务，就能实现一个简单的后台管理系统。同时，为方便在无后台服务时使用，项目还提供了一些 fake 和 demo。

项目的主要特性和功能

1. 便捷搭建：借助丰富预设功能和配置，快速搭建后台管理系统。
2. 多页面支持：包含登录页面、动态菜单页面等，满足基本管理需求。
3. 数据存储：提供 session 存储功能，方便管理用户会话信息。
4. 权限控制：具备权限路由守卫和按钮权限控制，保障系统数据安全。
5. 可配置性：支持通过配置文件更改网站外观，如系统名称、登录页面背景等。
6. 灵活对接：可对接自定义的后台登录服务。
7. 模块注册：支持自定义模块注册，方便扩展系统功能。

安装使用步骤

准备工作

• 安装 git。
• 安装 npm。

下载并运行项目

1. 复制项目代码（此处需补充具体复制命令）。
2. 安装依赖： bash npm install
3. 启动项目： bash ng s --open 此时浏览器会自动打开模板网站。

系统配置

项目所有配置项存放在 /src/config/global-config.ts 文件中，可根据需求修改以下配置： - 系统配置：修改 app_title 可设置系统名称，显示在浏览器的 title 中。 - 登录页面配置：在 loginConfig 类中，可设置 background_image（登录页面背景图片）和 form_title（登录表单标题）。 - 菜单配置：在 menuConfig 类中，通过 placement 配置菜单显示位置（'left' 或 'top'）。 - 版权配置：设置 copyright 可在主窗口最下方显示版权信息。 - 本地存储配置：在 sessionConfig 类中，设置 store_key 可指定本地 session 存储的 key。

对接自定义后台登录服务

替换 /src/app/providers/login.service-impl.ts 文件的实现，确保接口格式符合系统预定义的 LoginService 接口。注意此文件名称和位置不能更改。

部署项目

部署在服务器根目录

1. 编译项目： bash ng build -prod -aot
2. 将编译结果 /dist 目录中的文件复制到 apache 的根目录（Linux 上默认目录为 /var/www/html）。
3. 启动 apache，通过 http://IP:端口 访问项目。

部署在服务器的子目录

1. 编译项目： bash ng build -prod -aot -bh /subDir/ -d /subDir/ 其中 subDir 是 apache 中的目录名称，可按需替换。
2. 将编译结果 /dist 目录中的文件复制到 apache 的 subDir 目录（Linux 上默认目录为 /var/www/html/subDir）。
3. 打开 apache 的配置文件（Ubuntu 上是 /etc/apache2/apache2.conf），添加以下代码： apache <Directory /subDir> Options FollowSymLinks AllowOverride all allow from all </Directory>
4. 启动 apache，通过 http://IP:端口/subDir 访问项目。

解决浏览器刷新问题

1. 打开 apache 的路径重写功能： bash sudo a2enmod rewrite sudo systemctl restart apache2
2. 打开 apache 目录的重写开关： 修改 /etc/apache2/apache2.conf 文件，将对应目录的 AllowOverride None 改为 AllowOverride all。
3. 增加 .htaccess 配置：
   • 部署在根目录：在 /var/www/html/ 下新建 .htaccess 文件，内容如下： ```apache RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L]

RewriteRule ^ /index.html - 部署在子目录 `/var/www/html/subDir` 中：在 `subDir` 目录中新增 `.htaccess` 文件，内容如下：apache RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L]

RewriteRule ^ /subDir/index.html `` 修改.htaccess` 文件不需要重启 apache。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】