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

最新推荐文章于 2024-06-12 11:58:02 发布
最新推荐文章于 2024-06-12 11:58:02 发布
阅读量1.9w 收藏 52
点赞数 3
分类专栏： asp-net vue-js 文章标签： asp.net vue-js vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiershan1314/article/details/77875679
版权

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设计

  1. 获取记账类型接口 GetBillTypes
  2. 记账接口 AddBill
  3. 删除记录 DeleteBill
  4. 获取列表 GetBills
  5. 获取总数 GetTotalCount
  6. 获取统计值 GetCount
易兒善
关注
  • 3
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
从零开始的VUE项目-02（创建后台ASP.NET Web API项目和连接数据库）
木卯彳亍的博客
04-14 2738
今天我们来创建后台和数据库 1，创建ASP.NET Web API项目 生成完毕，项目结构： 运行看一下 2，数据库建表 我们对数据库的操作就在Controllers里的文件里，想一想这一篇原来是要做读取数据库数据生成菜单和登录登出的，所以要开始创建数据库了，菜单一张表，用户一张表，先做这两张表吧 菜单表的数据 用户表的数据 3，后台构建 在Controllers文件夹里新建MenuController.cs文件(新建控制器)，代码： using Newtonsoft.Json; using S
关于在Asp.net中编写接口并在Vue中进行调用
MoZhaoyun的博客
12-28 859
我们在VisualStudio中新建的是ASP.NET Web 应用程序（.NET Framework）项目。在项目中添加一个类，命名为Login在项目中“右键-添加”一个一般处理程序函数HttpContextJsonStringTo其中，函数的作用是，将httpcontext中的由前端传过来的参数数据经过StreamReader和JavaScriptSerializer类解析赋值到我们的Login类中，并返回一个Login实例。函数ProcessRequest其中，函数。
Vue.js结合ASP.NET Core构建用户登录与权限验证系统
最新发布
包子的博客
06-12 836
在本教程中，我将利用Visual Studio 2022的强大集成开发环境，结合Vue.js前端框架和ASP.NET Core后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用Visual Studio的内置工具和模板来简化开发流程。
Asp.net+Vue2构建简单记账WebApp之三（使用Vue-cli构建vue.js应用）
热门推荐
易兒善
09-13 1万+
一、前提 1、安装好node.js 2、安装好npm 3、安装好vue-cli 如何安装这里就跳过，网上一大推。 当然装上npm的淘宝镜像更好 二、构建项目 1、进入项目文件夹 2、生成项目 执行 vue init webpack MyBill 3、查看 利用vue-cli 构建的文件夹如下 4、初始化项目 cd mybill npm
Vue.js与ASP.NET的结合，实现企业级应用的开发和部署
忧郁的蛋的专栏
07-29 1534
Vue.js和ASP.NET是两个在前端和后端开发中广泛使用的技术，将它们结合起来可以为企业级应用的开发和部署带来诸多优势。Vue.js和ASP.NET结合，可以为企业级应用的开发和部署带来许多好处。通过上述示例，我们可以看到Vue.js和ASP.NET的结合能够快速构建起一个企业级应用，并通过ASP.NET进行开发和部署。上述代码中，我们使用了ASP.NET的“UseStaticFiles”方法来配置ASP.NET使用静态文件，然后通过“Run”方法返回Vue.js的入口文件“index.html”。
使用ASP.NET Core MVC的Vue.Js
寒冰屋的专栏
06-13 1万+
目录 内容主题 VUE.JS简介 DOT NET Core 下载和安装Visual Studio 2017 ASP.NET Core Spa模板 基础知识和设置 Node.js 节点包管理（NPM） Bower, Yarn Web-pack,Grunt或Gulp Gulp/Grunt Web-Pack与Gulp / Grunt Type-Script Babel 安装...
Asp.net+Vue2构建简单记账WebApp
09-13
作为一个asp.net 程序员，当发现Vue.js的存在时就爱上它，但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一个记账应用前端改为Vue2实现。 具体请看我博客里介绍 ...
vue项目demo（asp.net mvc5+vue2.5）
02-13
本项目是asp.net mvc5+vue2.5的项目，花了很长时间做的。 实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的...
IIS部署.NET+Vue项目.docx
05-25
iis 部署 .net + vue 项目知识点总结 在本文中，我们将对 iis 部署 .net + vue 项目的知识点进行总结，涵盖从项目的基本环境到 api 的配置、https 的设置、Swagger 的使用等多个方面。 一、基本环境 首先，我们...
ASP.Net+MVC+Vue管理系统
03-11
ASP.NET MVC + Vue.js 管理系统是一个结合了微软的Web开发框架ASP.NET MVC与前端JavaScript库Vue.js的高效能、可维护性极强的Web应用开发模式。这种组合利用了ASP.NET MVC的服务器端处理能力和Vue.js的轻量级、响应...
基于ASP.NET+MySQL实现待办任务清单系统【100010180】
12-26
本项目“基于ASP.NET+MySQL实现待办任务清单系统”就是一个这样的实例，利用ASP.NET Core API作为后端框架，配合MySQL数据库存储数据，并采用Vue.js作为前端框架实现前后端分离的设计模式。 **ASP.NET Core API** ...
【Vue源码】学习目录
未来可期
04-28 144
目录 第一节Flow、Vue源码目录设计和Rolluo构建Vue.js源码 第二节Vue的入口文件，即Vue的构造函数 第三节数据驱动之_init()方法 第四节数据驱动之$mount方法 第五节数据驱动之_render方法 第六节数据驱动之认识VNode 第七节数据驱动之认识createElement 第八节数据驱动之_update方法 第九节数据驱动总结 参考资料 代码地址：vue2.5....
asp.Net API 获取报文体
weixin_45758710的博客
04-08 216
方法获取报文体 private static string MessageStyle() { byte[] byts = new byte[System.Web.HttpContext.Current.Request.InputStream.Length]; System.Web.HttpContext.Current.Request.InputStream.Read(byts, 0, byts.Length);
Vue在ASP.NET MVC中的进行前后端的交互
weixin_30295091的博客
05-21 1555
Vue在ASP.NET MVC中的进行前后端的交互 Preface： 由于最近在研究前端相关的技术，作为前端非常优秀的框架Vue，个人在学习的过程中遇到一些问题，网上相关资料有限，所以在这这里总结一下个人使用Vue的一点经验，以便后来者借鉴！ 官方文档:Vue.js 使用Vue在ASP.NET MVC中进行前后端交互在阅读下面的文章之前你需要先了解一下Vue官方推荐的...
Asp.net+Vue2构建简单记账WebApp之二（使用ABP迅速搭建.Net后台）
书写人生
03-16 822
一、ABP简介ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点，它旨在成为一个通用的WEB应用程序框架和项目模板。详情可以访问官网：http://www.aspnetboilerplate.com/二、下载模版访问：https://aspnetboi...
使用ASP.NET Core2.2创建WebApp
thankseveryday的专栏
03-07 1288
文章目录使用ASP.NET Core创建WebApp前言创建WebApp尝试dotnet命令 使用ASP.NET Core创建WebApp 前言 官方用的是WebApp这个词，而我还是更喜欢叫做“网站”，也许含义很不一样吧，但至少我认为是一样的，个人接受新事物很慢很慢吧！ 创建WebApp 创建WebApp至少有两种途径： 宇宙最强Visual Studio; 使用命令； 使用1.很方便也很直...
vue2基础总结
m0_46692607的博客
03-20 1万+
Vue2 API Vue2 guide 参考以上资料选择一些常用高频核心的Vue2知识进行总结归纳 1.基础  Vue文件 = template+script+style  创建vue实例 var vm = new Vue({选项对象})  html标签体插值{{xxx}} ，xxxx 会作为js 表达式解析  单向数据绑定data–>html:v-bind:href ="xxx" 或简写为:href  双向数据绑定data<–>html:v-mode:value="xxx" 或简写为v-
Asp.net+Vue2构建简单记账WebApp之四（vue.js构建记账主页面）
易兒善
09-13 6271
一、安装我们所需要的一些库 cnpm install mint-ui -S // 安装mint-ui库，ui库，cnmp是按照淘宝镜像后的用法，用法和npm一样。-s是将库添加到项目的package.json文件中。 cnpm install echarts -S // 安装echarts库。用于绘制图表 cnpm install vue-resource -S // 相当于
【vue】webapp移动端模板
hello world_
06-14 4677
今天突发奇想，想自己搭建一套移动端的模板来方便自己以后写项目的时候不用再花费无用的时间去搭建项目。 先说下这套模板的项目配置，主要使用 vw 适配移动端 webpack + vue + vue-router + axios + mint-ui + sass + postcss + normalize.css 具体依赖懒得打字了，直接贴 pacage.json 代码 "dependenci...
asp.net+vue2
09-29
ASP.NET Vue2 是一种结合使用 ASP.NET 和 Vue2 技术的开发框架。ASP.NET 是由微软开发的一种服务器端应用程序开发技术，而 Vue2 则是一种用于构建用户界面的前端开发框架。 ASP.NET 是一种强大的服务器端开发技术，它可以使用多种编程语言进行开发，如C#、VB.NET等，它提供了许多功能和工具，可以帮助开发者快速构建强大的Web应用程序。ASP.NET 提供了许多功能丰富的控件，如网格视图、表单视图等，使得开发者可以轻松地创建数据驱动的网站。 Vue2 是一种轻量级的前端开发框架，它可以将应用程序的界面和数据进行分离，使得开发者可以更灵活地处理用户界面。Vue2 提供了一系列的指令和组件，可以帮助开发者构建强大的前端应用程序。通过使用 Vue2，开发者可以将应用程序的界面划分为不同的组件，每个组件负责一个特定的功能，这样可以使得开发更加模块化和可维护。 ASP.NET Vue2 的结合使用可以充分发挥 ASP.NET 和 Vue2 的优势。在开发过程中，可以使用 ASP.NET 提供的丰富的控件和工具来处理服务器端逻辑和数据交互，同时使用 Vue2 来构建用户界面和处理前端逻辑。ASP.NET Vue2 的组合可以实现前后端的分离，提高开发效率和应用程序的可维护性。 总而言之，ASP.NET Vue2 是一种集成了 ASP.NET 和 Vue2 技术的开发框架，它可以帮助开发者快速构建强大的Web应用程序，同时充分发挥前后端技术的优势，提高开发效率和应用程序的可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值