前言
本篇的主要内容是 52ABP SPA模板如何配合52ABP代码生成器开发项目
如果不了解 52ABP 项目请先看我的第一篇文章 [52ABP系列] - 001、SPA免费项目模版搭建教程
话不多说,教程开始
一、安装代码生成器
首先打开VS,找到顶部菜单中的 工具
选项,打开 工具
选项中的 扩展和更新
, 然后选择 联机
,输入 52ABP
安装最新的代码生成器,支持生成UI的代码生成器版本是 2.1.8
或者更高版本 (我这里是2.1.8,本机打的包,暂时没有发布)
二、启动项目
请直接根据第一篇文章,搭建并运行项目: [52ABP系列] - 001、SPA免费项目模版搭建教程
三、新建实体并添加到数据库
在项目中的Core层创建一个实体对象 Member 如图所示
实体Member的代码贴在这里
using Abp.Domain.Entities;
using System;
using System.Collections.Generic;
using System.Text;
namespace LTMCompanyNameFree.YoyoCmsTemplate.Members
{
public class Member : Entity<long>
{
public string Name { get; set; }
public int Age { get; set; }
public string Remark{ get; set; }
}
}
创建数据表
在 DbContext 中添加 DbSet
迁移数据库,这里和第一篇文章中的创建数据库相同,但是命令会多一个,使用了了如下两个命令
add-migration AddEntityMember // 创建迁移
update-database // 更新数据库
如果没有用过EFCore Code First做迁移,请先查阅资料 官方文档
四、使用代码生成器快速生成前后台基本代码
如果是第一次使用代码生成器请查看: .NET CORE 框架ABP的代码生成器(ABP Code Power Tools )使用说明文档
选中实体代码文件右键菜单选择52ABP代码生成器
选择你需要生成的选项,如果是第一次使用,就要勾选第一次是用代码生成器,会给你生成一些基础的代码。
NG-Zorro UI是生成前端页面的选项。
选择好了之后直接点击 确认 ,进入Dto配置界面,在这里勾选配置Dto要用到的字段、校验、字段对应的前端控件等等。 选择好了之后,直接点击确认,开始生成代码
生成成功将会弹框提示
生成的代码文件:
NgZorroUI目录中的members目录就是生成的前端页面,将这个目录copy到前端项目中使用的位置
Copy结束之后,打开生成的Readme.cs文件,根据说明一步步执行操作
- 编译并启动后端项目
- 运行前端项目中
nswag
目录下的refresh.bat
文件 refresh.bat
执行完成之后更新前端shared-> service-proxies-> service-proxy.module.ts
- 添加到前端导航菜单
- 添加到前端路由
- 添加到前端对应的Module