Asp.net+Vue2構建簡單記賬WebApp之五（vue.js構建記賬頁面）

<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中新添的內容實現構建完成執行。更多參看下圖。

這里寫圖片描述