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

最新推荐文章于 2024-07-22 16:58:13 发布
最新推荐文章于 2024-07-22 16:58:13 发布
阅读量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
    评论
专栏目录
Asp.net+Vue2构建简单记账WebApp
书写人生
03-16 470
一、前言作为一个asp.net 程序员，当发现Vue.js的存在时就爱上它，但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一个记账应用前端改为Vue2实现。二、 效果如下 这个是之前做一个小应用，使用asp.net+Mui做的，也算是前后台分离的。三、新程序的构思依然使用asp.net作为后台，因为就熟悉这个。前台选用Vue2.js。ui选用 mint-...
Vue.js结合ASP.NET Core构建用户登录与权限验证系统
包子的博客
06-12 850
在本教程中，我将利用Visual Studio 2022的强大集成开发环境，结合Vue.js前端框架和ASP.NET Core后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用Visual Studio的内置工具和模板来简化开发流程。
Asp.net+Vue2构建简单记账WebApp之二（使用ABP迅速搭建.Net后台）
易兒善
09-12 1万+
现在ABP更新到3.0.0 采用了Core2.0 技术。需要vs2017进行编译 一、ABP简介ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点，它旨在成为一个通用的WEB应用程序框架和项目模板。详情可以访问官网：http://www.aspnetb
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
Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
易兒善
09-13 4002
一、添加两个新页面 /components/ MonthCount.vue <template> <div id="MonthCount" > <div class="chart"> <div id="Chart"></div> </div> <ul class="list"> <li v-for="item in listData">
Asp.net+Vue2构建简单记账WebApp之四（vue.js构建记账主页面）
易兒善
09-13 6272
一、安装我们所需要的一些库 cnpm install mint-ui -S // 安装mint-ui库，ui库，cnmp是按照淘宝镜像后的用法，用法和npm一样。-s是将库添加到项目的package.json文件中。 cnpm install echarts -S // 安装echarts库。用于绘制图表 cnpm install vue-resource -S // 相当于
Asp.net+Vue2构建简单记账WebApp之五（vue.js构建记账页面）
易兒善
09-13 4335
一、编辑记账页面hello.vue<template> <div> <div id="TopTitle"> <mt-header v-bind:title="msg"> </mt-header> <mt-field label="￥" placeholder="在此输入记账金额" type="number" v-model="money"></mt-f
使用ASP.NE+VUE开发一款简单记账WebAPP之三（发布部署Web服务）
weixin_40333655的博客
07-18 304
先来看下面一个将ASP.NET MVC部署到本地IIS的方法。 如何把ASP.NET MVC项目部署到本地IIS上运行 默认情况下，在VisualStudio中开发网站，会运行在IISExpress中，如果想把网站部署到本地的IIS服务器上该怎么办呢？ 一、首先，以管理员身份运行VisualStudio，否则在修改项目属性时将弹出如下对话框，阻止我们修改服务器为本地IIS。 然后，选择项目 - ...
使用ASP.NE+VUE开发一款简单记账WebAPP之七（vue.js构建记账统计页面）
weixin_40333655的博客
07-22 270
一、添加两个新页面 /components/ MonthCount.vue <template> <div id="MonthCount" > <div class="chart"> <div id="Chart"></div> </div> <ul class="list"&...
使用ASP.NE+VUE开发一款简单记账WebAPP之六（vue.js构建记账页面）
weixin_40333655的博客
07-22 391
一、编辑记账页面hello.vue <template> <div> <div id="TopTitle"> <mt-header v-bind:title="msg"> </mt-header> <mt-field label="￥" placeholder="在此输入记账金额" t...
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.js 组件实现简单分页效果
热门推荐
易兒善
03-15 3万+
前言 为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。 效果 知识点 components 组件 props 父级
Vue.js 结合bootstrap 前端实现分页效果
易兒善
03-09 8271
Vue.js 结合bootstrap 前端实现分页和排序效果写之前先抱怨几句。本来一心一意做.net开发的，渐渐地成了只做前端。最近项目基本都用java做后台，我们这些.net的就成了前端，不是用wpf做界面，就是用html写web页面。 深知自己前端技术不足，以前虽说用asp.net前后台都做，但是，对于前端都是用现成的js库和页面模板，对于vue.js等框架基本没有接触过。 只怪自己不会写j
ASP.NET MVC
最新发布
weixin_47249500的博客
07-22 688
ViewStart.cshtml是一个全局的布局文件，程序中每个.cshtml页面都会默认使用_ViewStart提供的布局。同时.NET Framework 提供了多种技术框架，ASP.NET MVC是.NET Framework提供的众多技术框架中的一种，用于开发Web应用。ASP.NET MVC框架使用了约定大于配置的思想，按照框架约定的结构组织文件，浏览器请求某个Controller方法时，该方法默认返回与方法同名的.cshtml文件，浏览器接收.cshtml并渲染页面。.cshtml文件同名。
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、付费专栏及课程。

余额充值