1. 程式人生 > >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

相關推薦

Asp.net+Vue2構建簡單記賬WebApp之一設計

一、前言 作為一個asp.net 程式設計師,當發現Vue.js的存在時就愛上它,但是在asp.net應用中使用Vue一時讓我無從上手。直到最近有了點心得。就計劃把之前做的一個記賬應用前端改為Vue2實現。 二、 效果如下 這個是之前做一個小應

Asp.net+Vue2構建簡單記賬WebApp之二使用ABP迅速搭建.Net後臺

一、ABP簡介 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 ASP.NET Boilerplate是一個用最佳實踐和流行技術開發現代WEB應用程式的新起點,它旨在成為一個通用的WEB應用程式框架

Asp.net+Vue2構建簡單記賬WebApp之六vue.js構建記賬統計頁面

import { Toast } from 'mint-ui'; // 按需引入echart模板 let echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/pie'); require('echart

ASP.NET MVC5+EF6+EasyUI 後臺管理系統1-前言與目錄持續更新中...

編碼規範 圖標 pri log 任務 ros 部署 基本 form 開發工具:VS2015(2012以上)+SQL2008R2以上數據庫    您可以有償獲取一份最新源碼聯系QQ:729994997 價格 666RMB 升級後界面效果如下: 日程管理 http://

ASP.NET MVC5+EF6+EasyUI 後臺管理系統65-MVC WebApi 用戶驗證 (1)

screen 屬性 access override jquery true mod 解析 action 系列目錄 前言: WebAPI主要開放數據給手機APP,其他需要得知數據的系統,或者軟件應用,所以移動端與系統的數據源往往是相通的。 Web 用戶的身份驗證,及

ASP.NET MVC5+EF6+EasyUI 後臺管理系統4-創建項目解決方案

構建 文章 數據庫 操作 webapi http 業務 pps 技術分享 系列目錄 前言 為了符合後面更新後的重構系統,文章於2016-11-1日重寫 設計中術語,概念這種東西過於模糊,我們必須學習累積才能認識這些概念模型。 我無法用文章來下詳細解析此系統的深層概念,需要

ASP.NET MVC5+EF6+EasyUI 後臺管理系統87-MVC Excel導入和導出

.net本文示例代碼下載: 鏈接:http://pan.baidu.com/s/1jHBdgCA 密碼:hzh7ps:Vs數據庫腳本在解壓目錄下,修改web.config數據庫鏈接,示例代碼包含:導入,導出,上傳前言:導入導出實在多例子,很多成熟的組建都分裝了導入和導出,這一節演示利用LinqToExcel組

ASP.NET Core 一步步搭建個人網站7_Linux系統移植

window std bce stat 能夠 rpm 設置 with err 摘要 考慮我們為什麽要選擇.NET Core? 因為它面向的是高性能服務器開發,拋卻了 AspNet 的臃腫組件,非常輕量,加上微軟的跨平臺戰略,對 Docker 的親和性,對於開發人員也非常友好

ASP.NET MVC5+EF6+EasyUI 後臺管理系統62-EF鏈接串加密

image title orm mst .... 比較 string類 sin isn 前言:   這一節提供一個簡單的功能,這個功能看似簡單,找了一下沒找到EF鏈接數據庫串的加密幫助文檔,只能自己寫了,這樣也更加符合自己的加密要求 有時候我們發布程序為了避免程序外的

Asp.Net Core 2.0 項目實戰6Redis配置、封裝幫助類RedisHelper及使用實例

命名 redis數據庫 remove per chang open htm lazy 鏈接 本文目錄 1. 摘要 2. Redis配置 3. RedisHelper 4.使用實例 5. 總結 1. 摘要   由於內存存取速度遠高於磁盤讀取的特

Asp.net MVC 搭建屬於自己的框架

C4D pagedlist del tran 6.0 ext 才有 應該 frame 網址:https://www.cnblogs.com/sggx/p/4555255.html 為什麽要自己搭框架?   大家夥別急,讓我慢慢地告訴你!大家有沒有這種感覺,從一家跳槽到另一家

Asp.Net Core 2.0 項目實戰2NCMVC一個基於Net Core2.0搭建的角色權限管理開發框架

ML 用戶 解密 https redis json uil AI 不足 本文目錄 1. 摘要 2. 框架介紹 3. 權限管理之多一點說明 4. 總結 1. 摘要   NCMVC角色權限管理框架是由最近練習Net Core時抽時間整理的

Asp.net MVC中如何實現依賴注入DI

昨天說了一下Castle與Autofac如何在MVC中的使用,今天再來簡單說一下Spring.Net框架在MVC中如何依賴注入的。 官網:http://www.springframework.net/ 專案結構圖:   首先,我們要在專案中新增Spring.Net的類庫引用,我們可以在N

asp.net中呼叫Office來製作各種3D統計圖

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

[乾貨來襲]DevExpress ASP.NET示例資源最全分享!

為解決大家找資源難的問題,EVGET聯合DevExpress控制元件中文網盤點熱門的DevExpress資訊、Demo示例、版本升級及下載,以及各種教程推薦等。更多下載及資訊也可以在DevExpress控制元件中文網中找到,及時瞭解最新動態! 示例Demo(仍在持續更新……) DevE

ASP.NET Core MVC 和 Visual Studio入門 使用 SQL Server LocalDB

ASP.NET Core MVC 和 Visual Studio入門(五)   使用 SQL Server LocalDB Rick Anderson     MvcMovieContext物件操縱連線到資料庫並對映電影物件到資料庫記

ASP.NET Core MVC 和 Visual Studio入門新增模型

ASP.NET Core MVC 和 Visual Studio入門(四)新增模型   Rick Anderson 和Tom Dykstra   在要節中將新增一些在資料庫中管理電影的類,這些類將成為MVC應用的“Model(模型)”部分。 這些類將與Enti

ASP.NET Core MVC 和 Visual Studio入門 新增檢視

ASP.NET Core MVC 和 Visual Studio入門(三)   新增檢視 本節將修改HelloWorldController類,從而使用Razor檢視模板來乾淨利索地封裝產生一個HTML迴應給客戶端的過程。 我們將使用Razor建立一個檢視模板,基於

ASP.NET上傳檔案到遠端伺服器HttpWebRequest

/// <summary> /// 檔案上傳至遠端伺服器 /// </summary> /// <param name="url">遠端服務地址</param> /// <param name="pos

ASP.NET Core 應用程式Startup類介紹 轉載

Startup類配置服務和應用程式的請求管道。     Startup 類 ASP.NET Core應用程式需要一個啟動類,按照慣例命名為Startup。在主程式的Web Host生成器(WebHostBuilderExtensions)的 UseStartup <TSt