LTMCompanyName.YoyoCmsTemplate

各个镜像的编译状态考虑到国内的下载速度慢，我们在码云上也部署了一套环境，代码同步。

一、什么是 52ABP ？

基于.NET Core 版本为 2.1，整个框架使用的是 ABP(ASP.NET Boilerplate)，前端这次使用的是 ng-alain 。可以说作为一个内容整合商，52abp 的第一个正式开源的免费项目，您可以基于这个项目进行升级和扩展属于自己自定义的功能模块。

关于 ABP 的后端文档，详情参看：https://aspnetboilerplate.com/Pages/Documents

关于 ng-alain 的官方文档，详情参考：https://ng-alain.com/docs/getting-started

本次着重说明的是前端项目的文档。本文档的大部分内容是从 ng-alain 官方摘录，因为是你的前端框架嘛。。

二、前端项目的说明

如何阅读文档

在开始之前有一些文档描述约定说明，这有助于更好的阅读：

API 相关
- [] 表示属性
- () 表示事件
- [()] 表示双向绑定
- ng-content 表示组件内容占位符
- #tpl 开头表示 <ng-template #tpl>
对象相关，一般在类描述时
- [] 表示属性
- () 结尾表示方法

三、环境准备

本地环境需要您安装 node 和 git。我们的技术栈基于 Typescript、Angular、g2、@delon 和 ng-zorro-antd，提前了解和学习这些知识会非常有帮助。

运行项目教程

四、目录结构

本项目是通过 Angular CLI 构建的项目，但是为了符合 ABP 的开发方式，以及满足 DDD 的架构模式，将各个模块进行了剥离和拆分。所以目录结构也和标准的 NG CLI 项目结构发生了变化。

├─src
│  │  AppPreBootstrap.ts    # ABP前端项目的启动组件，
│  │  delon.module.ts          # ng-alian的核心组件，delon
│  │  favicon.ico
│  │  hmr.ts
│  │  index.html
│  │  main.ts
│  │  polyfills.ts
│  │  root-routing.module.ts   # 最外部的根路由，判断是否登录
│  │  root.component.ts          # 根组件
│  │  root.module.ts               #根模块
│  │  styles.less                      #全局样式
│  │  typings.d.ts               # 定义的abp框架中会使用到的方法和模块名称的一些常量
│  │  
│  ├─account
│  │  │  account.module.ts           # 负责整个账号体系的模块如：登录、注册、布局、租户管理等
│  │  ├─layout
│  │  │      account-languages.component.ts  # 控制登录、注册、租户登录的布局控件
│  │  ├─login
│  │  │      login.service.ts # 提供登录注册的方法
│  │  ├─register
│  │  │      register.component.ts # 注册组件
│  │  └─tenant
│  │          tenant-change.component.ts   # 切换租户名称登录的组件
│  ├─app
│  │  │  app-routing.module.ts    # 中后台管理的路由总控
│  │  │  app.component.ts  # 52abp应用的核心组件
│  │  │  app.module.ts   # 52abp应用的核心模块
│  │  ├─home
│  │  │      home.component.ts  # 后端首页组件-类似控制台
│  │  │
│  │  ├─layout
│  │  │  │  layout.module.ts # 后端的布局模块
│  │  │  │  
│  │  │  ├─default
│  │  │  │  │  default.component.ts  # 布局的默认内容
│  │  │  │  │  
│  │  │  │  ├─header
│  │  │  │  │  │  header.component.ts# 布局的头部组件
│  │  │  │  │
│  │  │  │  └─sidebar
│  │  │  │          sidebar.component.ts# 布局的左侧菜单栏组件
│  ├─assets
│  │  │  .gitkeep
│  │  │  appconfig.json #与后端交互配置的 端口号和域名
│  ├─environments          # 环境变量配置
│  ├─shared
│  │  │  │  shared.module.ts  # 整个项目通用贡献的模块
│  │  │  
│  │  ├─animations                    # 路由的动画效果
│  │  │      routerTransition.ts
│  │  │
│  │  ├─auth                          # ABP的授权管理
│  │  │      app-auth.service.ts
│  │  │      auth-route-guard.ts
│  │  │
│  │  ├─helpers                        # 字面意思，实时通讯
│  │  │      SignalRAspNetCoreHelper.ts
│  │  │      UrlHelper.ts
│  │  │
│  │  ├─layout            # 菜单组件
│  │  │      menu-item.ts
│  │  │
│  │  ├─nav            #链接的服务类
│  │  │      app-url.service.ts
│  │  │
│  │  ├─service-proxies                # 动态生成的crud接口的代理类
│  │  │      service-proxies.ts
│  │  │      service-proxy.module.ts
│  │  │
│  │  └─session                                   # ABP所提供的Session 服务方法，提供一些基本的用户信息
│  │          app-session.service.ts
│  │
│  ├─styles                  # 可以基于ng-alain 的基础样式上进行调整
│  │      index.less
│  │      theme.less
│  │
│  └─testing
│          common.spec.ts
│
├─_mock                      # Mock 数据规则

启动项目

从事前端开发由 yarn 和 npm 两个包管理器，个人推荐使用 yarn，还原上比 npm 有点优势。

yarn install            还原组件信息


npm start        启动项目

以上就是项目的简单说明，以后有时间，再继续给大家交流。也欢迎大家来完善内容。

芝麻科技 / LTMCompanyNameFree.YoyoCmsTemplate

LTMCompanyName.YoyoCmsTemplate

代码相关镜像仓库：

一、什么是 52ABP ？

二、前端项目的说明

三、环境准备

四、目录结构

启动项目

简介

发行版

贡献者

近期动态

芝麻科技 / LTMCompanyNameFree.YoyoCmsTemplate .gitee-modal { width: 500px !important; }

LTMCompanyName.YoyoCmsTemplate

代码相关镜像仓库：

一、什么是 52ABP ？

二、前端项目的说明

三、环境准备

四、目录结构

启动项目

简介

发行版

贡献者

近期动态

搜索帮助

芝麻科技 / LTMCompanyNameFree.YoyoCmsTemplate