Asp.net+Vue2构建简单记账WebApp之一（设计）
2017-09-11 本文已影响307人
易兒善
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构建记账统计页面）
源码下载
一、前言
作为一个asp.net 程序员，当发现Vue.js的存在时就爱上它，但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一个记账应用前端改为Vue2实现。
二、 效果如下
这里写图片描述
这个是之前做一个小应用，使用asp.net+Mui做的，也算是前后台分离的。
三、新程序的构思
- 依然使用asp.net作为后台，因为就熟悉这个。
- 前台选用Vue2.js。
- ui选用 mint-ui，本考虑用Element UI,但是mint-ui相对简单较小，而且是专为手机web而生。
- 图标依旧选择font-awesome，毕竟没有美工给设计画图，这个库的图标挺多将就用吧。
- 图表选择echart.js，针对vue.js而生的图表控件没有找到，找来找去还是echart好用些。
四、 新程序页面设计如下
-
记账页面
这里写图片描述
因为没有九宫格样式，就简单点排版吧。使用和以前一样。
-
统计页面
这里写图片描述
这里写图片描述
和之前稍微改变了些。感觉更加美观了点。
五、后台接口api设计
- 获取记账类型接口 GetBillTypes
- 记账接口 AddBill
- 删除记录 DeleteBill
- 获取列表 GetBills
- 获取总数 GetTotalCount
- 获取统计值 GetCount
