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构建记账统计页面）
源码下载
一、编辑记账页面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中新添的内容实现构建完成执行。更多参看下图。
这里写图片描述
