专栏首页挖坑填坑Asp.net+Vue2构建简单记账WebApp之一(设计)

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 条评论
登录 后参与评论

相关文章

  • 关于职业发展的思考

    转眼间毕业四年有余,大学所学专业是冶金,毕业后看冶金行业机械化程度较高,但是自动化、智能化程度与想象的还是有差距。就有想法学习自动化,软件编程方面的知识,用机械...

    易兒善
  • Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)

    官方文档 :https://github.com/angular/angular-cli

    易兒善
  • nvm管理nodejs版本。

    访问:https://github.com/coreybutler/nvm-windows/releases页面直接点击 nvm-setup.zip进行下载 ...

    易兒善
  • 习近平:国家安全工作归根结底是保障人民利益

    2月17日,中共中央总书记、国家主席、中央军委主席、中央国家安全委员会主席习近平在北京主持召开国家安全工作座谈会并发表重要讲话。 2月17日电 中共中央总书记、...

    安恒信息
  • RSAC 2019 | 2049年,世界会更好吗?

    在RSA 2019大会上,“信任”二字被反复提及。RSA总裁Rohit Ghai与安全战略专家Niloofar Razi Howe更是在开场致辞中展望2049的...

    FB客服
  • 如何简便快捷使用python抓爬网页动态加载的数据

    最近朋友需要让我帮忙设计能抓取网页特定数据的爬虫,我原以为这种程序实现很简单,只要通过相应的url获得html页面代码,然后解析html获得所需数据即可。但在实...

    望月从良
  • 【可视化】一篇文章深入浅出解读大数据分析

    新媒体管家 ? ? ? ? ? ? ? ? ? ? ? ?

    钱塘数据
  • 家装互联网化:趋势之下的必然之路

    孟永辉
  • [ 后端篇 ] 05 - AWS DynamoDB 入门教程

    DynamoDB 属于AWS 专有的 NoSQL 数据库服务。其实和Mongod类似。

    程序手艺人
  • 很多程序员都不知道的事,把GitHub放简历上可以加分!

    社区光环,众所众知,GitHub 是开发者的“同性交友社区”。Google、Facebook、Alibaba 都在通过它来贡献自己的开源项目。如果你留心关注,公...

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券