Asp.net+Vue2构建简单记账WebApp之一(设计)

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好用些。

四、 新程序页面设计如下

  • 记账页面


    Asp.net+Vue2构建简单记账WebApp之一(设计)_第1张图片
    这里写图片描述

因为没有九宫格样式,就简单点排版吧。使用和以前一样。

  • 统计页面


    Asp.net+Vue2构建简单记账WebApp之一(设计)_第2张图片
    这里写图片描述

    Asp.net+Vue2构建简单记账WebApp之一(设计)_第3张图片
    这里写图片描述

和之前稍微改变了些。感觉更加美观了点。

五、后台接口api设计

  1. 获取记账类型接口 GetBillTypes
  2. 记账接口 AddBill
  3. 删除记录 DeleteBill
  4. 获取列表 GetBills
  5. 获取总数 GetTotalCount
  6. 获取统计值 GetCount

你可能感兴趣的:(Asp.net+Vue2构建简单记账WebApp之一(设计))