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

一、前言

作为一个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设计

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

4255
来自专栏知晓程序

开发 | 小程序不够「高级」?那是因为你没用上这 3 个特效!

最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成。

1243
来自专栏吴裕超

点击穿透原理及解决

一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行...

6466
来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

2907
来自专栏腾讯社交用户体验设计

移动H5前端性能优化指南 - 腾讯ISUX

4401
来自专栏河湾欢儿的专栏

03-保存

存储所需内容 ctrl+c ctrl+n ctrl+v 或者直接拖动文件至新文件

882
来自专栏Material Design组件

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

2394
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

2130
来自专栏逸鹏说道

前端常用插件

插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 Thea...

5686
来自专栏iKcamp

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

2698

扫码关注云+社区

领取腾讯云代金券