Asp.net+Vue2構(gòu)建簡單記賬WebApp之一（設(shè)計(jì)）
Asp.net+Vue2構(gòu)建簡單記賬WebApp之二（使用ABP迅速搭建.Net后臺）
Asp.net+Vue2構(gòu)建簡單記賬WebApp之三（使用Vue-cli構(gòu)建vue.js應(yīng)用）
Asp.net+Vue2構(gòu)建簡單記賬WebApp之四（vue.js構(gòu)建記賬主頁面）
Asp.net+Vue2構(gòu)建簡單記賬WebApp之五（vue.js構(gòu)建記賬頁面）
Asp.net+Vue2構(gòu)建簡單記賬WebApp之六（vue.js構(gòu)建記賬統(tǒng)計(jì)頁面）
源碼下載
現(xiàn)在ABP更新到3.0.0 采用了Core2.0 技術(shù)默穴。需要vs2017進(jìn)行編譯
一殿托、ABP簡介
ABP是“ASP.NET Boilerplate Project (ASP.NET樣板項(xiàng)目)”的簡稱。
ASP.NET Boilerplate是一個(gè)用最佳實(shí)踐和流行技術(shù)開發(fā)現(xiàn)代WEB應(yīng)用程序的新起點(diǎn)湾盗，它旨在成為一個(gè)通用的WEB應(yīng)用程序框架和項(xiàng)目模板意敛。詳情可以訪問官網(wǎng)：http://www.aspnetboilerplate.com/
二馅巷、下載模版
訪問：https://aspnetboilerplate.com/Templates 下載自己的項(xiàng)目模版。
解壓草姻，打開項(xiàng)目
其實(shí)這個(gè)框架很多內(nèi)容已經(jīng)封裝在dll里面钓猬，項(xiàng)目結(jié)構(gòu)大概就是這樣。
- core里面放一些基礎(chǔ)的東西撩独。
- EntityFramework里面放數(shù)據(jù)訪問對象及倉儲敞曹，
- Application里面通常寫服務(wù)給web和webapi調(diào)用
- web，webapi就是項(xiàng)目的出口最終展現(xiàn)給第三方或者用戶的地方
三跌榔、趕緊試試能用不
1、選擇解決方案-還原NuGet包
2捶障、 修改數(shù)據(jù)連接（這里需要自己有數(shù)據(jù)庫服務(wù)）
web.config下面修改連接僧须，
<connectionStrings>
<add name="Default" connectionString="Server=.; Database=MyBill; Trusted_Connection=True;" providerName="System.Data.SqlClient" />
</connectionStrings>
3、數(shù)據(jù)遷移
將web項(xiàng)目設(shè)為啟動(dòng)項(xiàng)目 然后在程序管理控制臺默認(rèn)項(xiàng)目選擇EntityFramework项炼，輸入無法將update-database 回車担平。
啟動(dòng)看看 用戶名admin示绊，密碼123qwe
界面風(fēng)格還是很漂亮的。
四暂论、添加我們自己的東西
1面褐、添加實(shí)體
在core里添加如下兩個(gè)類：
using Abp.Domain.Entities;
namespace MyBill.Bills
{
/// <summary>
/// 記賬類型
/// </summary>
public class BillType : Entity
{
/// <summary>
/// 名稱
/// </summary>
public string Name { get; set; }
/// <summary>
/// font圖標(biāo) 樣式名稱
/// </summary>
public string FontStyle { get; set; }
/// <summary>
/// 圖片地址
/// </summary>
public string ImgUrl { get; set; }
/// <summary>
/// 是否是收入
/// </summary>
public bool IsCountIn { get; set; }
}
}
using Abp.Domain.Entities;
using Abp.Domain.Entities.Auditing;
using System;
using System.ComponentModel.DataAnnotations.Schema;
namespace MyBill.Bills
{
/// <summary>
/// 賬單數(shù)據(jù)
/// </summary>
public class Bill : Entity, IHasCreationTime
{
/// <summary>
/// 創(chuàng)建者
/// </summary>
public string CreatorUser { get; set; }
/// <summary>
/// 創(chuàng)建時(shí)間
/// </summary>
public DateTime CreationTime { get; set; }
/// <summary>
/// 記賬類型
/// </summary>
public int BillTypeId { get; set; }
[ForeignKey("BillTypeId")]
public BillType BillType { get; set; }
/// <summary>
/// 記賬金額
/// </summary>
public decimal Money { get; set; }
/// <summary>
/// 描述
/// </summary>
public string Des { get; set; }
}
}
2、添加數(shù)據(jù)集
在如下文件的最后面添加數(shù)據(jù)集：
public MyBillDbContext(DbConnection existingConnection, bool contextOwnsConnection)
: base(existingConnection, contextOwnsConnection)
{
}
public IDbSet<Bill> Bills { get; set; } // 賬單數(shù)據(jù)集
public IDbSet<BillType> BillTypes { get; set; } // 記賬類型數(shù)據(jù)集
我想給數(shù)據(jù)遷移時(shí)給BillType一些初始數(shù)據(jù)怎么辦呢取胎？
在這里添加如下文件 （可以參考同目錄下其他文件寫法）
using System.Linq;
using MyBill.EntityFramework;
using System.Collections.Generic;
using MyBill.Bills;
namespace MyBill.Migrations.SeedData
{
/// <summary>
/// 初始化數(shù)據(jù)庫中 billType數(shù)據(jù)
/// </summary>
public class DefaultBillTypeCreator
{
private readonly MyBillDbContext _context;
public DefaultBillTypeCreator(MyBillDbContext context)
{
_context = context;
}
public void Create()
{
CreateBillTypes();
}
private void CreateBillTypes()
{
List<BillType> list = new List<BillType> {
new BillType { IsCountIn= false, Name = "食物",FontStyle="fa-cutlery"},
new BillType { IsCountIn= false, Name = "衣物",FontStyle="fa-columns"},
new BillType { IsCountIn= false, Name = "生活日用",FontStyle="fa-umbrella"},
new BillType { IsCountIn= false, Name = "交通出行",FontStyle="fa-car"},
new BillType { IsCountIn= false, Name = "旅游",FontStyle="fa-fighter-jet"},
new BillType { IsCountIn= false, Name = "節(jié)日禮物",FontStyle="fa-gift"},
new BillType { IsCountIn= false, Name = "聚會(huì)聚餐",FontStyle="fa-users"},
new BillType { IsCountIn= false, Name = "醫(yī)療健康",FontStyle="fa-plus-square"},
new BillType { IsCountIn= false, Name = "寵物",FontStyle="fa-github-alt"},
new BillType { IsCountIn= false, Name = "書籍資料",FontStyle="fa-file-excel-o"},
new BillType { IsCountIn= false, Name = "工具",FontStyle="fa-wrench"},
new BillType { IsCountIn= false, Name = "運(yùn)動(dòng)",FontStyle="fa-frown-o"},
new BillType { IsCountIn= false, Name = "培訓(xùn)學(xué)習(xí)",FontStyle="fa-pied-piper-alt"},
new BillType { IsCountIn= false, Name = "孩子",FontStyle="fa-child"},
new BillType { IsCountIn= false, Name = "住房居家",FontStyle="fa-home"},
new BillType { IsCountIn= false, Name = "電影演出",FontStyle="fa-film"},
new BillType { IsCountIn= false, Name = "休閑娛樂",FontStyle="fa-coffee"},
new BillType { IsCountIn= false, Name = "紅包分子",FontStyle="fa-bomb"},
new BillType { IsCountIn= false, Name = "借款",FontStyle="fa-skype"},
new BillType { IsCountIn= false, Name = "其他",FontStyle="fa-globe"},
};
foreach (var billType in list)
{
AddBillTypesIfNotExists(billType);
}
}
private void AddBillTypesIfNotExists(BillType billType)
{
if (_context.BillTypes.Any(l => l.Name == billType.Name))
{
return;
}
_context.BillTypes.Add(billType);
_context.SaveChanges();
}
}
}
修改Configuration 中 seed（）方法
protected override void Seed(MyBill.EntityFramework.MyBillDbContext context)
{
context.DisableAllFilters();
if (Tenant == null)
{
//Host seed
new InitialHostDbBuilder(context).Create();
//Default tenant seed (in host database).
new DefaultTenantCreator(context).Create();
new TenantRoleAndUserBuilder(context, 1).Create();
}
else
{
//You can add seed for tenant databases and use Tenant property...
}
new DefaultBillTypeCreator(context).Create();// 添加自己初始數(shù)據(jù)執(zhí)行
context.SaveChanges();
}
執(zhí)行 Add-Migration Add_Bills 添加遷移
執(zhí)行 update-database 遷移數(shù)據(jù)
打開數(shù)據(jù)庫可以看見
3展哭、寫服務(wù)
服務(wù)寫在Application中，創(chuàng)建如下文件
using System;
namespace MyBill.Bills.Dto
{
public class BillDto
{
public int Id { get; set; }
/// <summary>
/// 創(chuàng)建時(shí)間
/// </summary>
public DateTime CreationTime { get; set; }
/// <summary>
/// 記賬金額
/// </summary>
public decimal Money { get; set; }
/// <summary>
/// 名稱
/// </summary>
public string Name { get; set; }
/// <summary>
/// font圖標(biāo) 樣式名稱
/// </summary>
public string FontStyle { get; set; }
}
}
namespace MyBill.Bills.Dto
{
public class ChartNumDto
{
public string Name { get; set; }
public decimal Value { get; set; }
}
}
using Abp.AutoMapper;
using System;
using System.ComponentModel.DataAnnotations;
namespace MyBill.Bills.Dto
{
[AutoMapTo(typeof(Bill))]
public class CreateBillDto
{
/// <summary>
/// 創(chuàng)建者
/// </summary>
public string CreatorUser { get; set; }
/// <summary>
/// 創(chuàng)建時(shí)間
/// </summary>
public DateTime CreationTime { get; set; }
/// <summary>
/// 記賬類型
/// </summary>
[Required]
public int BillTypeId { get; set; }
/// <summary>
/// 記賬金額
/// </summary>
[Required]
public decimal Money { get; set; }
/// <summary>
/// 描述
/// </summary>
public string Des { get; set; }
public CreateBillDto()
{
this.CreationTime = DateTime.Now;
}
}
}
using Abp.Application.Services.Dto;
using System;
using System.ComponentModel.DataAnnotations;
namespace MyBill.Bills.Dto
{
public class GetBillDto : IPagedResultRequest, ISortedResultRequest
{
[Range(0, 1000)]
public int MaxResultCount { get; set; }
public int SkipCount { get; set; }
public string Sorting { get; set; }
public DateTime? Date { get; set; }
public string User { get; set; }
/// <summary>
/// 數(shù)據(jù)類型闻蛀，0 按年匪傍，1按月,
/// </summary>
public int Type { get; set; }
/// <summary>
/// 分組依據(jù) 0，消費(fèi)類型觉痛，1 月
/// </summary>
public int GroupBy { get; set; }
}
}
using Abp.Application.Services;
using Abp.Application.Services.Dto;
using MyBill.Bills.Dto;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace MyBill.Bills
{
public interface IBillAppServer : IApplicationService
{
/// <summary>
/// 添加一條記錄
/// </summary>
/// <param name="input"></param>
/// <returns></returns>
Task CreatBill(CreateBillDto input);
/// <summary>
/// 刪除一條記錄
/// </summary>
/// <param name="key"></param>
Task DeleteBill(int key);
/// <summary>
/// 獲取消費(fèi)類型
/// </summary>
/// <returns></returns>
IList<BillType> GetBillType();
/// <summary>
/// 獲取統(tǒng)計(jì)信息
/// </summary>
/// <param name="date">時(shí)間</param>
/// <param name="type">類型役衡，0 按年統(tǒng)計(jì)，1 按月統(tǒng)計(jì)</param>
/// <returns></returns>
IList<ChartNumDto> GetCount(GetBillDto input);
/// <summary>
/// 獲取列表
/// </summary>
/// <param name="getBillDto"></param>
/// <returns></returns>
PagedResultDto<BillDto> GetBills(GetBillDto input);
/// <summary>
/// 獲取記賬總額
/// </summary>
/// <param name="input"></param>
/// <returns></returns>
decimal GetTotallCount(GetBillDto input);
}
}
using Abp;
using Abp.Application.Services.Dto;
using Abp.Domain.Repositories;
using MyBill.Bills.Dto;
using System;
using System.Collections.Generic;
using System.Linq;
using Abp.Linq.Extensions;
using System.Threading.Tasks;
using System.Data.Entity;
namespace MyBill.Bills
{
public class BillAppServer : AbpServiceBase, IBillAppServer
{
private readonly IRepository<Bill> _billRepository;
private readonly IRepository<BillType> _billTypeRepository;
public BillAppServer(IRepository<Bill> billRepository,
IRepository<BillType> billTypeRepository
)
{
_billRepository = billRepository;
_billTypeRepository = billTypeRepository;
}
public async Task DeleteBill(int key)
{
await _billRepository.DeleteAsync(key);
}
public async Task CreatBill(CreateBillDto input)
{
var bill = ObjectMapper.Map<Bill>(input);
await _billRepository.InsertAsync(bill);
}
public IList<BillType> GetBillType()
{
return _billTypeRepository.GetAllList();
}
public IList<ChartNumDto> GetCount(GetBillDto input)
{
if (!input.Date.HasValue) return null;
string date = "";
DateTime startDate, 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)
{
var bills = _billRepository.GetAll().Where(m => m.CreationTime >= startDate && m.CreationTime < endDate && m.CreatorUser == input.User);
return bills.GroupBy(m => m.CreationTime.Month).Select(m => new ChartNumDto
{
Name = m.Key + "月",
Value = m.Sum(n => n.Money)
}).ToList();
}
else
{
var bills = _billRepository.GetAll().Where(m => m.CreationTime >= startDate && m.CreationTime < endDate && m.CreatorUser == input.User).Include(m => m.BillType);
return bills.GroupBy(m => m.BillType.Name).Select(m => new ChartNumDto
{
Name = m.Key,
Value = m.Sum(n => n.Money)
}).ToList();
}
}
public PagedResultDto<BillDto> GetBills(GetBillDto input)
{
if (!input.Date.HasValue) return null;
var date = input.Date.Value.ToString("yyyy-MM");
var startDate = DateTime.Parse(date);
var endDate = startDate.AddMonths(1);
var bills = _billRepository.GetAll().Where(m => m.CreationTime >= startDate && m.CreationTime < endDate && m.CreatorUser == input.User);
var count = bills.Count();
var billsPage = bills
.Include(q => q.BillType)
.OrderBy(q => q.CreationTime)
.PageBy(input)
.Select(m => new BillDto
{
Name = m.BillType.Name,
FontStyle = m.BillType.FontStyle,
Money = m.Money,
Id = m.Id,
CreationTime = m.CreationTime
})
.ToList();
return new PagedResultDto<BillDto>
{
TotalCount = count,
Items = billsPage
};
}
public decimal GetTotallCount(GetBillDto input)
{
var bills = _billRepository.GetAll().Where(m => m.CreatorUser == input.User);
return bills.Sum(m => m.Money);
}
}
}
abp封裝的有公共的倉儲IRepository薪棒，所以一般不用單獨(dú)寫倉儲了手蝎。
4、寫controller
在web項(xiàng)目中添加
using Abp.Web.Security.AntiForgery;
using MyBill.Bills;
using MyBill.Bills.Dto;
using System;
using System.Threading.Tasks;
using System.Web.Mvc;
namespace MyBill.Web.Controllers
{
public class BillController : MyBillControllerBase
{
private readonly IBillAppServer _billAppService;
public BillController(IBillAppServer billAppService)
{
_billAppService = billAppService;
}
[DisableAbpAntiForgeryTokenValidation]
public ActionResult GetBillType()
{
try
{
var result = _billAppService.GetBillType();
return Json(new { result = true, data = result }, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new { result = false, data = e.Message }, JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
public ActionResult GetBills(GetBillDto input)
{
input.MaxResultCount = 10;
try
{
var result = _billAppService.GetBills(input);
return Json(new { result = true, data = result }, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new { result = false, data = e.Message }, JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
public ActionResult GetCount(GetBillDto input)
{
try
{
var result = _billAppService.GetCount(input);
return Json(new { result = true, data = result }, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new { result = false, data = e.Message }, JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
public async Task<JsonResult> AddBills(CreateBillDto bill)
{
try
{
if (string.IsNullOrEmpty(bill.CreatorUser)) bill.CreatorUser = "1";
await _billAppService.CreatBill(bill);
return Json(new { result = true, data = "success" }, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new { result = false, data = e.Message }, JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
public ActionResult GetTotallCount(GetBillDto input)
{
try
{
var result = _billAppService.GetTotallCount(input);
return Json(new { result = true, data = result }, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new { result = false, data = e.Message }, JsonRequestBehavior.AllowGet);
}
}
[DisableAbpAntiForgeryTokenValidation]
public async Task<ActionResult> DeleteBill(int key)
{
try
{
await _billAppService.DeleteBill(key);
return Json(new { result = true, data = "" }, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new { result = false, data = e.Message }, JsonRequestBehavior.AllowGet);
}
}
}
}
注意 添加[DisableAbpAntiForgeryTokenValidation]標(biāo)簽俐芯，是因?yàn)閍bp框架對應(yīng)post請求有防偽驗(yàn)證棵介，加上這個(gè)標(biāo)簽可以不用防偽驗(yàn)證，不然需要post請求時(shí)修改協(xié)議頭泼各，或者使用abp自己封裝的ajax請求鞍时。
5、試試controler
地址欄輸入對應(yīng)地址扣蜻；
五逆巍、后臺完成
把接口api寫好扔給前臺吧
1、獲取記賬類型：
路徑：/bill/GetBillType
方法：get
參數(shù)：無
返回 ：正確 {"result":true,"data"：[]} 錯(cuò)誤{"result":false,"data"：[]}
其中[] 表示數(shù)組莽使。數(shù)組元素參考：{"name":"食物","fontStyle":null,"imgUrl":null,"isCountIn":false,"id":1}
2锐极、添加賬單數(shù)據(jù)：
路徑：/bill/AddBills
方法：post
參數(shù)：{CreatorUser：用戶的名稱或id標(biāo)識，BillTypeId：方法1中返回?cái)?shù)據(jù)的id芳肌，Money：記賬金額灵再，Des：描述，可不要}
返回：成功{ result = true, data = "success" } 失斠隗浴：{ result = false, data = 錯(cuò)誤內(nèi)容 }
3翎迁，獲取賬單數(shù)據(jù)：
路徑：/bill/GetBills
方法：get
參數(shù)：{User：用戶的名稱或id標(biāo)識，Date：數(shù)據(jù)的時(shí)間净薛，Type：‘?dāng)?shù)據(jù)類型0表示一年的數(shù)據(jù)汪榔，1表示一個(gè)月的數(shù)據(jù)根據(jù)’，SkipCount：跳過前多少數(shù)據(jù)用于分頁}
返回 ：正確 {"result":true,"data"：{TotalCount：數(shù)據(jù)總數(shù)肃拜，items：[]}} 錯(cuò)誤{"result":false,"data"：錯(cuò)誤內(nèi)容}
其中[] 表示數(shù)組痴腌。數(shù)組元素參考：{"id":1,"creationTime":"2017-09-12T13:13:32.03","money":123.00,"name":"生活日用","fontStyle":null}]}
4雌团，刪除賬單數(shù)據(jù)：
路徑：/bill/DeleteBill
方法：post
參數(shù)：{key：方法3中返回?cái)?shù)據(jù)的id}
返回：成功{ result = true, data = "success" } 失敗：{ result = false, data = 錯(cuò)誤內(nèi)容 }
5士聪，獲取總的記賬數(shù)
路徑：/bill/GetTotallCount
方法：get
參數(shù)：{CreatorUser：用戶的名稱或id標(biāo)識}
返回：成功{ result = true, data = 數(shù)值 } 失斀踉：{ result = false, data = 錯(cuò)誤內(nèi)容 }
6，獲取統(tǒng)計(jì)數(shù)據(jù)
路徑：/bill/GetCount
方法：get
參數(shù)：{User：用戶的名稱或id標(biāo)識剥悟，Date：數(shù)據(jù)的時(shí)間灵寺，Type：‘?dāng)?shù)據(jù)類型0表示一年的數(shù)據(jù)，1表示一個(gè)月的數(shù)據(jù)根據(jù)’懦胞，GroupBy：分組依據(jù) 0替久，消費(fèi)類型，1 月}
返回：成功{ result = true, data = [] } 失旛镂尽：{ result = false, data = 錯(cuò)誤內(nèi)容 }
其中[] 表示數(shù)組為圖表所需數(shù)據(jù)蚯根。數(shù)組元素參考：{"name":"生活日用","value":123.00}] 或者{"name":"9月","value":123.00}]
