Asp.net+Vue2构建简单记账WebApp之五(vue.js构建记账页面)

一、编辑记账页面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-field>
    </div>
    <div id="BillTypes" >
      <div v-for="item in billType" :key="item.id" class="item" v-on:click="Add(item.id)">
        <div class="item_img">
          <i class="fa fa-3x" v-bind:class="item.fontStyle"></i>
        </div>
        <span>{{item.name}}</span>
      </div>

      <div style="clear: both"></div>

    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'; // 引入mint-ui弹窗,对于js要调用的还需要这样引用一下。不知道为什么
  export default {
    name: 'hello',
    data() {
      return {
        msg: '理财从记账开始',
        billType: [], // 账单数据
        money: '',   // 记账的金额
      }
    },
    created() {
      this.$http.get('/bill/GetBillType').then(response => {
        this.billType = response.body.result.data;
      }, response => {
        Toast("获取数据出错")
      });
    },
    methods: {
      Add(m) {
        if (this.money == '') {
          Toast('请先输入记账金额,再选择资金去向');
          return;
        }
        ;
        this.$http.post('/bill/AddBills', {
          Money: this.money,
          BillTypeId: m,
        }).then(r => {
          if (r.body.result.result) {
            Toast({
              message: '记账成功',
              iconClass: 'icon icon-success'
            });
            this.money = '';
          } else {
            Toast(r.body.result.data);
          }
        }, r => {
          Toast("数据传输失败");
        })


      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #TopTitle{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #eee;
    z-index: 1;
  }
  #TopTitle div *{
    border-style: none;
  }
  #BillTypes{
    margin-top: 88px;
    position: relative;
    height: auto;
    background-color: #eee;
  }
  #BillTypes .item{
    height: 100px;
    padding: 11px 15px;
    vertical-align: top;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: relative;
    float: left;
    width: 33.33333%;
    box-sizing: border-box;
  }
  #BillTypes .item .item_img{
    clear: both;
    padding-bottom: 8px;
  }
</style>

二、发布查看效果

因为用到了后台数据,所以要在asp.net端配合后台才能查看效果。 我调试时,直接在本地部署了一个网站,网站地址指向的就是项目的web文件夹。然后浏览器输入地址即可。为了方便,我将asp.net中homeControler进行了修改。

using System.Web.Mvc;
using Abp.Web.Mvc.Authorization;

namespace MyBill.Web.Controllers
{
   // [AbpMvcAuthorize]
    public class HomeController : MyBillControllerBase
    {
        public ActionResult Index()
        {
            Response.Redirect("/mybill/dist/index.html");
            return View();
        }
    }
}

这里写图片描述

三、总结

1、使用vue-resource 来获取/传输数据,更多方法参看官网 2、created() 不同vue2中新添的内容实现构建完成执行。更多参看下图。

这里写图片描述

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏坚毅的PHP

mysql 高并发更新计数问题

问题:功能为链接的点击计数,其他两个计数更新 还有两个内容表的插入,只插入链接对应的id,分4个库,共128个表,mysql每天有5000万次插入和5000万次...

5228
来自专栏Android开发指南

6.网络编程

34313
来自专栏yang0range

Android面试

要想知道如何使用多进程,先要知道Android里的多进程概念。一般情况下,一个应用程序就是一个进程,这个进程名称就是应用程序包名。我们知道进程是系统分配资源和调...

2674
来自专栏Android-JessYan

看到如此多的MVP+Dagger2+Retrofit+Rxjava项目,轻松拿star,心动了吗?

原文地址: http://www.jianshu.com/p/4bbecd0bb027

8543
来自专栏向治洪

android事件总线

如果你不知道事件总线是什么,那么没有关系,下面我们先来看这么一个场景: 你是否在开发的过程中遇到过想在Activity-B中回调Activity-A中的某...

20010
来自专栏月牙寂

k8s源码分析-----kubectl(3)主要框架

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

6824
来自专栏我的博客

安卓开发之调试程序

一、DDMS中LogCat(这样就能调试程序了) 代码下方显示LogCat,windows/show view/other选中logcat点击ok就会在代码下面...

3578
来自专栏Android干货

xUtils类库的使用

3064
来自专栏郭耀华‘s Blog

Android 安全退出应用程序的方法总结

正常关闭应用程序: 当应用不再使用时,通常需要关闭应用,可以使用以下三种方法关闭android应用: 第一种方法:首先获取当前进程的id,然后杀死该进程。 an...

2876
来自专栏向治洪

LeakCanary使用手册

demo 一个非常简单的 LeakCanary demo: https://github.com/liaohuqiu/leakcanary-demo 开始使用 ...

2728

扫码关注云+社区

领取腾讯云代金券