ABP入门实战(XQX)

一、简介

　　本章主要讲怎么快速搭建ABP+VUE+SqlServer框架

　　如需转载请标明出处

二、ABP结构

　　2.1 后端结构　　　　

　　　　.Core项目是针对领域/业务层（实体、领域服务...）
　　　　.Application项目是针对应用层的（DTO、应用服务...）
　　　　.EntityFrameworkCore项目用于 EF Core 集成（从其他层中抽象出 EF Core）。
　　　　.Migrator项目用于生成数据库
　　　　.Web.Core项目是针对MVC(Controls基类，公共方法)
　　　　.Web.Host项目用于 ASP.NET MVC 层。
　　　　.Tests项目用于单元和集成测试（直到应用层，不包括 web 层）
　　　　.Web.Tests项目用于 ASP.NET Core 集成测试（包括 web 层的完整集成测试）。

三、ABP框架搭建

　　3.1下载MVC框架

　　　　3.1.1官网地址：http://www.aspnetboilerplate.com

　　　　3.1.2源码地址：https://github.com/aspnetboilerplate

　　　　3.1.3登录官网，前端选择VUE

　　　　

　　　　3.1.4 输入你项目的名称,输入验证码，点击创建项目

　　　　

 

 

 　　　　3.1.5 将下载下来的项目解压

　　　　　　　　　　        

 

　　3.2 后端WebApi搭建

　　　　3.2.1 打开解压的项目的后端解决方案，我这边用visual 2022开发

　　　　

 

 

　　　　3.2.2 更改数据库地址

　　　　

 

 

 

 

 　　　　3.2.3 打开程序包管理器控制台

　　　　

 

 

 　　　　3.2.4 将启动项设置成.Web.Host，默认项目设置成.EntityFrameworkCore，运行update-database命令

　　　　

 

 　　　　3.2.5 数据库就更新成功了

　　　　

 

 　　　　3.2.6 运行程序，显示swagger页面，后端框架搭建完毕（该页面可以进行接口的调试）

　　　　

 

 

 　　3.3 前端Vue搭建

 　　　　3.3.1 打开ABP的前端，我这边用Visual Studio Code开发的

　　　　

 

 　　　　3.1.2 安装依赖

　　　　

 

 　　　　3.1.3 运行前端

　　　　

 

 　　　　3.1.4 打开前端的页面

　　　　

 

 　　　　

 

　　　　3.1.5 输入账号密码登录，默认账号密码：admin 123qwe，前端页面搭建完毕

　　　　

 

 四、添加自定义的菜单

　　4.1 创建后端接口

　　　　4.1.1 声明数据库实体，继承AggregateRoot<TPrimaryKey>类，该类提供默认主键Id，类型为传过来的TPrimaryKey的类型

　　　　

 

 

 　　　　4.1.2 在程序包管理控制台，选择默认程序为.EntityFrameworkCore项目，输入Add-Migration InitialCreate类名,回车

　　　　

 　　　　4.1.3 然后就在.EntityFrameworkCore项目下的Migrations文件夹会生成对应的数据库表配置类

　　　　

 

 

 　　　　4.1.3 将启动项设置成.Web.Host，默认项目设置成.EntityFrameworkCore，运行update-database命令

　　　　

　　　　4.1.4 在数据库生成对应的实体

　　　　

 

 

 　　　　4.1.5 在对应的BookStoreDbContext类中添加Book实体类的DbSet数组（备注：ABP数据库的操作是基于EFCore的）

　　　　

 

 

 　　　　4.1.6 在.Application项目中创建Books文件夹，Books文件夹下创建Dto子文件夹，Dto文件夹用来存放与Dto类，Books文件夹用来存放Dto相关操作类　　　　　

 

 

　　　　 

 

 

 

 　　　　4.1.7 声明对应的Dto

　　　　　　4.1.7.1 BookDto:返回前端的实体类，继承AuditedEntityDto<TPrimaryKey>实体，该类提供默认字段“Id”，类型为传过来的TPrimaryKey的类型，且提供最后更新时间LastModificationTime和最后更新人LastModifierUserId的字段

　　　　　　

 

 

 　　　　　　4.1.7.2 CreateUpdateBookDto:前端传过来的更新和修改的实体类，继承AuditedEntityDto<TPrimaryKey>实体

　　　　　　

 

 

 　　　　　　4.1.7.3 PagedBookResultRequestDto:前端传过来的查询实体，继承PagedResultRequestDto实体

　　　　　　　　　　　　　　

　　　　　　4.1.7.4 BookMapProfile:实体间映射的实体，继承Profile实体：继承该实体ABP框架会自动添加映射

　　　　　　

 

 

 　　　　4.1.8 声明对应接口服务的接口类

　　　　

 

 

 　　　　4.1.9 声明对应接口服务的接口类的实现类，我这边重写了GetAll方法

　　　　

 

 　　　　4.1.10 运行程序，就可以看到swagger页面新增了Book的对应接口

　　　　

 

 

 　　　　

　　4.2 实现前端页面

 　　　　4.2.1 在src/views/setting下创建BookModule(名字随便，最好是类名，用来存放Book对应的页面)

　　　　

 

 

 　　　　4.2.2 将src/views/setting/role文件夹中的所有文件复制到BookModule文件夹下，然后把名字中的role替换成book(create-role.vue:新增页面，edit-book.vue:编辑页面，book.vue:主页面)

　　　　

 

 

 　　　　4.2.3 将三个页面的所有带有role替换成对应的book(大小写要匹配)

 

 

 

 　　　　

 

 

 　　　　4.2.4 重写关键词，我这边用BookName作为关键词，L('BookName'):这个是查询语言字典的，如果字典中有对应的值显示对应语言的值，如果没有显示BookName

　　　　

 

 

 　　　　4.2.5 更改页面中的接口，改成book对应的接口

　　　　

 

 

 　　　　4.2.6 更改显示的列的属性

　　　　

 

 

 　　　　4.2.7 在src/store/entities文件夹下新增book实体

　　　　

　　　　4.2.7 在src/store/modules文件夹下新增book接口实体book.ts，复制role.ts,把名字中的role替换成book,接口声明按照实际情况写

　　　　

 　　　　4.2.7.1 在src/store文件夹下的index.ts添加声明声明

　　　　

 

 

 

 　　　　4.2.8 添加菜单

　　　　　　4.2.8.1 在src/router/router.ts中添加数据字典

　　　　　　

 

 

　　　　　　4.2.8.2 打开后端代码的.Core项目下的Localization/SourceFiles/BookStore-zh-Hans 创建对应的语言字典,我这边只添加中文字典，前端调用L('BookName')，BookName为name的值，就可以查询对应的语言字典了

　　　　　　

 

　　　　　　4.2.8.3 在.Core项目下的Authorization/BookStoreAuthorizationProvider.cs声明菜单名称

　　　　　　

 

 

 

 　　　　　　4.2.8.4 在.Core项目下的Authorization/PermissionNames.cs声明权限名称

　　　　　　

 

 

　　4.2.9 运行前后端，登录后为用户对应角色添加权限 

　　

 

 

 　　4.2.10 重新登录后，就可以看到对应菜单的页面了

　　

 

五、ABP框架发布

　　5.1 打包前端

　　　　5.1.1 更改前端打包的接口地址，更改成后端正式接口地址

　　　　

 　　　　

 

 

 

　　　　5.1.2 在前端页面目录输入cmd，回车

　　　　

 

　　　　5.1.3 运行yarn build命令，前端就打包到dist文件夹下了

 

 　　　　

 　　　　5.1.4 将dist拷贝到后端的发布目录下

 　　　　

 

 　　

5.1 打包后端

　　　　5.1.1 更改接口地址

　　　　

 

 　　　　5.1.2 取消掉接口默认调用值

　　　　

 

 　　　　5.1.3 让接口默认访问前端地址

 　　　　

 

 　　　　5.1.4执行发布

　　　　

 

 

六、查看网站

　　6.1 双击运行程序

　　　　

 

 　　6.2 浏览器输入网址（大功告成，可喜可贺）