Asp.net+Vue2构建简单记账WebApp之一（设计）
Asp.net+Vue2构建简单记账WebApp之二（使用ABP迅速搭建.Net后台）
Asp.net+Vue2构建简单记账WebApp之三（使用Vue-cli构建vue.js应用）
Asp.net+Vue2构建简单记账WebApp之四（vue.js构建记账主页面）
Asp.net+Vue2构建简单记账WebApp之五（vue.js构建记账页面）
Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
源码下载

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

一、ABP简介

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

二、下载模版

访问：https://aspnetboilerplate.com/Templates 下载自己的项目模版。
这里写图片描述

解压，打开项目
这里写图片描述
其实这个框架很多内容已经封装在dll里面，项目结构大概就是这样。

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

三、赶紧试试能用不

1、选择解决方案-还原NuGet包
这里写图片描述

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

  <connectionStrings>
    <add name="Default" connectionString="Server=.; Database=MyBill; Trusted_Connection=True;" providerName="System.Data.SqlClient" />
  </connectionStrings>

3、数据迁移
将web项目设为启动项目 然后在程序管理控制台默认项目选择EntityFramework，输入无法将update-database 回车。
这里写图片描述
启动看看 用户名admin，密码123qwe
这里写图片描述
界面风格还是很漂亮的。
这里写图片描述

四、添加我们自己的东西

1、添加实体
在core里添加如下两个类：
这里写图片描述

using Abp.Domain.Entities;

namespace MyBill.Bills
{
    /// <summary>
    /// 记账类型
    /// </summary>
    public class BillType : Entity
    {
        /// <summary>
        /// 名称
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// font图标 样式名称
        /// </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>
    /// 账单数据
    /// </summary>
    public class Bill : Entity, IHasCreationTime
    {
        /// <summary>
        /// 创建者
        /// </summary>
        public string CreatorUser { get; set; }
        /// <summary>
        /// 创建时间
        /// </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、添加数据集
在如下文件的最后面添加数据集：
这里写图片描述

        public MyBillDbContext(DbConnection existingConnection, bool contextOwnsConnection)
         : base(existingConnection, contextOwnsConnection)
        {

        }
        public IDbSet<Bill> Bills { get; set; } // 账单数据集
        public IDbSet<BillType> BillTypes { get; set; } // 记账类型数据集

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

using System.Linq;
using MyBill.EntityFramework;
using System.Collections.Generic;
using MyBill.Bills;

namespace MyBill.Migrations.SeedData
{
    /// <summary>
    /// 初始化数据库中 billType数据
    /// </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 = "节日礼物",FontStyle="fa-gift"},
                new BillType { IsCountIn= false, Name = "聚会聚餐",FontStyle="fa-users"},
                new BillType { IsCountIn= false, Name = "医疗健康",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 = "运动",FontStyle="fa-frown-o"},
                new BillType { IsCountIn= false, Name = "培训学习",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();// 添加自己初始数据执行
            context.SaveChanges();
        }

执行 Add-Migration Add_Bills 添加迁移
这里写图片描述
执行 update-database 迁移数据
打开数据库可以看见
新建的表
这里写图片描述
3、写服务
服务写在Application中，创建如下文件
这里写图片描述

using System;

namespace MyBill.Bills.Dto
{
    public class BillDto
    {
        public int Id { get; set; }
        /// <summary>
        /// 创建时间
        /// </summary>
        public DateTime CreationTime { get; set; }
        /// <summary>
        /// 记账金额
        /// </summary>
        public decimal Money { get; set; }
        /// <summary>
        /// 名称
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// font图标 样式名称
        /// </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>
        /// 创建者
        /// </summary>
        public string CreatorUser { get; set; }
        /// <summary>
        /// 创建时间
        /// </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>
        /// 数据类型，0 按年，1按月,
        /// </summary>
        public int Type { get; set; }
        /// <summary>
        /// 分组依据 0，消费类型，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>
        /// 获取消费类型
        /// </summary>
        /// <returns></returns>
        IList<BillType> GetBillType();
        /// <summary>
        /// 获取统计信息
        /// </summary>
        /// <param name="date">时间</param>
        /// <param name="type">类型，0 按年统计，1 按月统计</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，所以一般不用单独写仓储了。

4、写controller
在web项目中添加
这里写图片描述

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]标签，是因为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}]

# asp.net
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue