WEBAPP开发之Asp.net+Vue2构建简单记账WebApp之二-职坐标

WEBAPP开发之Asp.net+Vue2构建简单记账WebApp之二

白羽 2018-07-19 来源：网络阅读 1399 评论 0

摘要：本文将带你了解WEBAPP开发之Asp.net+Vue2构建简单记账WebApp之二，希望本文对大家学WebApp有所帮助。

现在ABP更新到3.0.0采用了Core2.0技术。需要vs2017进行编译

一、ABP简介
ABP是“ASP.NETBoilerplateProject(ASP.NET样板项目)”的简称。
ASP.NETBoilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点，它旨在成为一个通用的WEB应用程序框架和项目模板。详情可以访问官网：//www.aspnetboilerplate.com/
二、下载模版
访问：https://aspnetboilerplate.com/Templates下载自己的项目模版。

这里写图片描述

解压，打开项目

这里写图片描述

其实这个框架很多内容已经封装在dll里面，项目结构大概就是这样。

core里面放一些基础的东西。
EntityFramework里面放数据访问对象及仓储，
Application里面通常写服务给web和webapi调用
web，webapi就是项目的出口最终展现给第三方或者用户的地方

三、赶紧试试能用不
1、选择解决方案-还原NuGet包

这里写图片描述

2、修改数据连接（这里需要自己有数据库服务）
web.config下面修改连接，

3、数据迁移
将web项目设为启动项目然后在程序管理控制台默认项目选择EntityFramework，输入无法将update-database回车。

这里写图片描述

启动看看用户名admin，密码123qwe

这里写图片描述

界面风格还是很漂亮的。

这里写图片描述

四、添加我们自己的东西
1、添加实体
在core里添加如下两个类：

这里写图片描述

usingAbp.Domain.Entities;

namespaceMyBill.Bills
{
///

///记账类型
///

publicclassBillType:Entity
{
///

///名称
///

publicstringName{get;set;}
///

///font图标样式名称
///

publicstringFontStyle{get;set;}
///

///图片地址
///

publicstringImgUrl{get;set;}
///

///是否是收入
///

publicboolIsCountIn{get;set;}
}

}

usingAbp.Domain.Entities;
usingAbp.Domain.Entities.Auditing;
usingSystem;
usingSystem.ComponentModel.DataAnnotations.Schema;
namespaceMyBill.Bills
{
///

///账单数据
///

publicclassBill:Entity,IHasCreationTime
{
///

///创建者
///

publicstringCreatorUser{get;set;}
///

///创建时间
///

publicDateTimeCreationTime{get;set;}
///

///记账类型
///

publicintBillTypeId{get;set;}
[ForeignKey("BillTypeId")]
publicBillTypeBillType{get;set;}
///

///记账金额
///

publicdecimalMoney{get;set;}
///

///描述
///

publicstringDes{get;set;}
}
}

2、添加数据集
在如下文件的最后面添加数据集：

这里写图片描述

publicMyBillDbContext(DbConnectionexistingConnection,boolcontextOwnsConnection)
:base(existingConnection,contextOwnsConnection)
{

}
publicIDbSet

Bills{get;set;}//账单数据集
publicIDbSetBillTypes{get;set;}//记账类型数据集

我想给数据迁移时给BillType一些初始数据怎么办呢？
在这里添加如下文件（可以参考同目录下其他文件写法）

这里写图片描述

usingSystem.Linq;
usingMyBill.EntityFramework;
usingSystem.Collections.Generic;
usingMyBill.Bills;

namespaceMyBill.Migrations.SeedData
{
///

///初始化数据库中billType数据
///

publicclassDefaultBillTypeCreator
{
privatereadonlyMyBillDbContext_context;
publicDefaultBillTypeCreator(MyBillDbContextcontext)
{
_context=context;
}

publicvoidCreate()
{
CreateBillTypes();
}

privatevoidCreateBillTypes()
{
Listlist=newList{
newBillType{IsCountIn=false,Name="食物",FontStyle="fa-cutlery"},
newBillType{IsCountIn=false,Name="衣物",FontStyle="fa-columns"},
newBillType{IsCountIn=false,Name="生活日用",FontStyle="fa-umbrella"},
newBillType{IsCountIn=false,Name="交通出行",FontStyle="fa-car"},
newBillType{IsCountIn=false,Name="旅游",FontStyle="fa-fighter-jet"},
newBillType{IsCountIn=false,Name="节日礼物",FontStyle="fa-gift"},
newBillType{IsCountIn=false,Name="聚会聚餐",FontStyle="fa-users"},
newBillType{IsCountIn=false,Name="医疗健康",FontStyle="fa-plus-square"},
newBillType{IsCountIn=false,Name="宠物",FontStyle="fa-github-alt"},
newBillType{IsCountIn=false,Name="书籍资料",FontStyle="fa-file-excel-o"},
newBillType{IsCountIn=false,Name="工具",FontStyle="fa-wrench"},
newBillType{IsCountIn=false,Name="运动",FontStyle="fa-frown-o"},
newBillType{IsCountIn=false,Name="培训学习",FontStyle="fa-pied-piper-alt"},
newBillType{IsCountIn=false,Name="孩子",FontStyle="fa-child"},
newBillType{IsCountIn=false,Name="住房居家",FontStyle="fa-home"},
newBillType{IsCountIn=false,Name="电影演出",FontStyle="fa-film"},
newBillType{IsCountIn=false,Name="休闲娱乐",FontStyle="fa-coffee"},
newBillType{IsCountIn=false,Name="红包分子",FontStyle="fa-bomb"},
newBillType{IsCountIn=false,Name="借款",FontStyle="fa-skype"},
newBillType{IsCountIn=false,Name="其他",FontStyle="fa-globe"},
};
foreach(varbillTypeinlist)
{
AddBillTypesIfNotExists(billType);
}

}
privatevoidAddBillTypesIfNotExists(BillTypebillType)
{
if(_context.BillTypes.Any(l=>l.Name==billType.Name))
{
return;
}

_context.BillTypes.Add(billType);

_context.SaveChanges();
}
}
}

修改Configuration中seed（）方法

protectedoverridevoidSeed(MyBill.EntityFramework.MyBillDbContextcontext)
{
context.DisableAllFilters();

if(Tenant==null)
{
//Hostseed
newInitialHostDbBuilder(context).Create();

//Defaulttenantseed(inhostdatabase).
newDefaultTenantCreator(context).Create();
newTenantRoleAndUserBuilder(context,1).Create();
}
else
{
//YoucanaddseedfortenantdatabasesanduseTenantproperty...
}
newDefaultBillTypeCreator(context).Create();//添加自己初始数据执行
context.SaveChanges();
}

执行Add-MigrationAdd_Bills添加迁移

这里写图片描述

执行update-database迁移数据
打开数据库可以看见

新建的表

这里写图片描述

3、写服务
服务写在Application中，创建如下文件

这里写图片描述

usingSystem;

namespaceMyBill.Bills.Dto
{
publicclassBillDto
{
publicintId{get;set;}
///

///创建时间
///

publicDateTimeCreationTime{get;set;}
///

///记账金额
///

publicdecimalMoney{get;set;}
///

///名称
///

publicstringName{get;set;}
///

///font图标样式名称
///

publicstringFontStyle{get;set;}
}
}

namespaceMyBill.Bills.Dto
{
publicclassChartNumDto
{
publicstringName{get;set;}
publicdecimalValue{get;set;}

}
}

usingAbp.AutoMapper;
usingSystem;
usingSystem.ComponentModel.DataAnnotations;

namespaceMyBill.Bills.Dto
{
[AutoMapTo(typeof(Bill))]
publicclassCreateBillDto
{
///

///创建者
///

publicstringCreatorUser{get;set;}
///

///创建时间
///

publicDateTimeCreationTime{get;set;}
///

///记账类型
///

[Required]
publicintBillTypeId{get;set;}
///

///记账金额
///

[Required]
publicdecimalMoney{get;set;}
///

///描述
///

publicstringDes{get;set;}

publicCreateBillDto()
{
this.CreationTime=DateTime.Now;
}
}
}

usingAbp.Application.Services.Dto;
usingSystem;
usingSystem.ComponentModel.DataAnnotations;

namespaceMyBill.Bills.Dto
{
publicclassGetBillDto:IPagedResultRequest,ISortedResultRequest
{
[Range(0,1000)]
publicintMaxResultCount{get;set;}

publicintSkipCount{get;set;}

publicstringSorting{get;set;}

publicDateTime?Date{get;set;}
publicstringUser{get;set;}
///

///数据类型，0按年，1按月,
///

publicintType{get;set;}
///

///分组依据0，消费类型，1月
///

publicintGroupBy{get;set;}

}
}

usingAbp.Application.Services;
usingAbp.Application.Services.Dto;
usingMyBill.Bills.Dto;
usingSystem.Collections.Generic;
usingSystem.Threading.Tasks;

namespaceMyBill.Bills
{
publicinterfaceIBillAppServer:IApplicationService
{
///

///添加一条记录
///

///
///
TaskCreatBill(CreateBillDtoinput);
///

///删除一条记录
///

///
TaskDeleteBill(intkey);
///

///获取消费类型
///

///
IListGetBillType();
///

///获取统计信息
///

///时间
///类型，0按年统计，1按月统计
///
IListGetCount(GetBillDtoinput);
///

///获取列表
///

///
///
PagedResultDtoGetBills(GetBillDtoinput);
///

///获取记账总额
///

///
///
decimalGetTotallCount(GetBillDtoinput);
}
}

usingAbp;
usingAbp.Application.Services.Dto;
usingAbp.Domain.Repositories;
usingMyBill.Bills.Dto;
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingAbp.Linq.Extensions;
usingSystem.Threading.Tasks;
usingSystem.Data.Entity;

namespaceMyBill.Bills
{
publicclassBillAppServer:AbpServiceBase,IBillAppServer
{
privatereadonlyIRepository_billRepository;
privatereadonlyIRepository_billTypeRepository;
publicBillAppServer(IRepositorybillRepository,
IRepositorybillTypeRepository
)
{
_billRepository=billRepository;
_billTypeRepository=billTypeRepository;
}

publicasyncTaskDeleteBill(intkey)
{
await_billRepository.DeleteAsync(key);
}

publicasyncTaskCreatBill(CreateBillDtoinput)
{
varbill=ObjectMapper.Map(input);
await_billRepository.InsertAsync(bill);
}

publicIListGetBillType()
{
return_billTypeRepository.GetAllList();
}

publicIListGetCount(GetBillDtoinput)
{
if(!input.Date.HasValue)returnnull;
stringdate="";
DateTimestartDate,endDate;
if(input.Type==1)
{
date=input.Date.Value.ToString("yyyy-MM");
startDate=DateTime.Parse(date);
endDate=startDate.AddMonths(1);
}
else
{
date=input.Date.Value.Year+"-01-01";
startDate=DateTime.Parse(date);
endDate=startDate.AddYears(1);
}

if(input.GroupBy==1)
{
varbills=_billRepository.GetAll().Where(m=>m.CreationTime>=startDate&&m.CreationTime<endDate&&m.CreatorUser==input.User);
returnbills.GroupBy(m=>m.CreationTime.Month).Select(m=>newChartNumDto
{
Name=m.Key+"月",
Value=m.Sum(n=>n.Money)
}).ToList();
}
else
{
varbills=_billRepository.GetAll().Where(m=>m.CreationTime>=startDate&&m.CreationTimem.BillType);
returnbills.GroupBy(m=>m.BillType.Name).Select(m=>newChartNumDto
{
Name=m.Key,
Value=m.Sum(n=>n.Money)
}).ToList();
}

}

publicPagedResultDtoGetBills(GetBillDtoinput)
{
if(!input.Date.HasValue)returnnull;
vardate=input.Date.Value.ToString("yyyy-MM");
varstartDate=DateTime.Parse(date);
varendDate=startDate.AddMonths(1);
varbills=_billRepository.GetAll().Where(m=>m.CreationTime>=startDate&&m.CreationTime<endDate&&m.CreatorUser==input.User);
varcount=bills.Count();
varbillsPage=bills
.Include(q=>q.BillType)
.OrderBy(q=>q.CreationTime)
.PageBy(input)
.Select(m=>newBillDto
{
Name=m.BillType.Name,
FontStyle=m.BillType.FontStyle,
Money=m.Money,
Id=m.Id,
CreationTime=m.CreationTime
})
.ToList();
returnnewPagedResultDto
{
TotalCount=count,
Items=billsPage
};
}
publicdecimalGetTotallCount(GetBillDtoinput)
{
varbills=_billRepository.GetAll().Where(m=>m.CreatorUser==input.User);
returnbills.Sum(m=>m.Money);
}
}
}

abp封装的有公共的仓储IRepository，所以一般不用单独写仓储了。

4、写controller
在web项目中添加

这里写图片描述

usingAbp.Web.Security.AntiForgery;
usingMyBill.Bills;
usingMyBill.Bills.Dto;
usingSystem;
usingSystem.Threading.Tasks;
usingSystem.Web.Mvc;

namespaceMyBill.Web.Controllers
{
publicclassBillController:MyBillControllerBase
{
privatereadonlyIBillAppServer_billAppService;

publicBillController(IBillAppServerbillAppService)
{
_billAppService=billAppService;
}
[DisableAbpAntiForgeryTokenValidation]
publicActionResultGetBillType()
{
try
{
varresult=_billAppService.GetBillType();
returnJson(new{result=true,data=result},JsonRequestBehavior.AllowGet);
}
catch(Exceptione)
{
returnJson(new{result=false,data=e.Message},JsonRequestBehavior.AllowGet);
}

}
[DisableAbpAntiForgeryTokenValidation]
publicActionResultGetBills(GetBillDtoinput)
{
input.MaxResultCount=10;
try
{
varresult=_billAppService.GetBills(input);
returnJson(new{result=true,data=result},JsonRequestBehavior.AllowGet);
}
catch(Exceptione)
{
returnJson(new{result=false,data=e.Message},JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
publicActionResultGetCount(GetBillDtoinput)
{
try
{
varresult=_billAppService.GetCount(input);
returnJson(new{result=true,data=result},JsonRequestBehavior.AllowGet);
}
catch(Exceptione)
{
returnJson(new{result=false,data=e.Message},JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
publicasyncTaskAddBills(CreateBillDtobill)
{
try
{
if(string.IsNullOrEmpty(bill.CreatorUser))bill.CreatorUser="1";
await_billAppService.CreatBill(bill);
returnJson(new{result=true,data="success"},JsonRequestBehavior.AllowGet);
}
catch(Exceptione)
{
returnJson(new{result=false,data=e.Message},JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
publicActionResultGetTotallCount(GetBillDtoinput)
{
try
{
varresult=_billAppService.GetTotallCount(input);
returnJson(new{result=true,data=result},JsonRequestBehavior.AllowGet);
}
catch(Exceptione)
{
returnJson(new{result=false,data=e.Message},JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
publicasyncTaskDeleteBill(intkey)
{
try
{
await_billAppService.DeleteBill(key);
returnJson(new{result=true,data=""},JsonRequestBehavior.AllowGet);
}
catch(Exceptione)
{
returnJson(new{result=false,data=e.Message},JsonRequestBehavior.AllowGet);
}
}
}
}

注意添加[DisableAbpAntiForgeryTokenValidation]标签，是因为abp框架对应post请求有防伪验证，加上这个标签可以不用防伪验证，不然需要post请求时修改协议头，或者使用abp自己封装的ajax请求。

5、试试controler
地址栏输入对应地址；

这里写图片描述

五、后台完成
把接口api写好扔给前台吧
1、获取记账类型：
路径：/bill/GetBillType
方法：get
参数：无
返回：正确{"result":true,"data"：[]}错误{"result":false,"data"：[]}
其中[]表示数组。数组元素参考：{"name":"食物","fontStyle":null,"imgUrl":null,"isCountIn":false,"id":1}
2、添加账单数据：
路径：/bill/AddBills
方法：post
参数：{CreatorUser：用户的名称或id标识，BillTypeId：方法1中返回数据的id，Money：记账金额，Des：描述，可不要}
返回：成功{result=true,data="success"}失败：{result=false,data=错误内容}
3，获取账单数据：
路径：/bill/GetBills
方法：get
参数：{User：用户的名称或id标识，Date：数据的时间，Type：‘数据类型0表示一年的数据，1表示一个月的数据根据’，SkipCount：跳过前多少数据用于分页}
返回：正确{"result":true,"data"：{TotalCount：数据总数，items：[]}}错误{"result":false,"data"：错误内容}
其中[]表示数组。数组元素参考：{"id":1,"creationTime":"2017-09-12T13:13:32.03","money":123.00,"name":"生活日用","fontStyle":null}]}
4，删除账单数据：
路径：/bill/DeleteBill
方法：post
参数：{key：方法3中返回数据的id}
返回：成功{result=true,data="success"}失败：{result=false,data=错误内容}
5，获取总的记账数
路径：/bill/GetTotallCount
方法：get
参数：{CreatorUser：用户的名称或id标识}
返回：成功{result=true,data=数值}失败：{result=false,data=错误内容}
6，获取统计数据
路径：/bill/GetCount
方法：get
参数：{User：用户的名称或id标识，Date：数据的时间，Type：‘数据类型0表示一年的数据，1表示一个月的数据根据’，GroupBy：分组依据0，消费类型，1月}
返回：成功{result=true,data=[]}失败：{result=false,data=错误内容}

其中[]表示数组为图表所需数据。数组元素参考：{"name":"生活日用","value":123.00}]或者{"name":"9月","value":123.00}]