1.去abp官网生成项目,选择.net core1.x版本 

2.Nuget还原包,需装dotnet core1.1等。

3.新增一个entity,并加入到上下文中

4.然后cmd命令行工具切换到项目文件AbpCore.EntityFramewor目录下,输入命令dotnet ef migrations add "initdata" 命令,接着输入dotnet ef database update,执行完成生成数据库.

6.添加刚才添加的entity对应的service层,就是简单的增改查,这里不再详细描述(会动态生成api)

7.新建控制器,view等页面,引入vuejs文件

 8.根据动态生成的api完成数据的获取,以及添加,修改

 js文件

        var _dailyMoneyService = abp.services.app.dailyMoney;
var app = new Vue({
el: "#moneyApp",
data: {
moneyModel: {
id:null,
date:"",
moeny: 0,
desc:""
},
moneyList: []
},
methods: {
getMoneyList:function() {
var _this = this;
_dailyMoneyService.getDailyMoneyList().done(function(result) {
_this.moneyList = result;
});
},
saveMoney: function () {
var _this = this;
_dailyMoneyService.createOrUpdateMoney(_this.moneyModel).done(function () {
location.reload();
});
},
editMoney: function (id) {
var _this = this;
abp.ui.setBusy();
_dailyMoneyService.getMoneyForEdit(id).done(function (result) {
_this.moneyModel = result;
}).always(function () {
abp.ui.clearBusy();
});
$('#MoneyModal').modal();
}
}
});
app.getMoneyList();

 view

@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
Layout = "~/Views/Shared/_VLayout.cshtml";
}
@section scripts
{
<script src="~/view-resources/Views/Money/Index.js" asp-append-version="true"></script>
}
<div id="moneyApp">
<div class="row">
<div class="col-md-12">
<button data-toggle="modal" data-target="#MoneyModal" class="btn btn-primary pull-right"><i class="fa fa-plus"></i>添加消费记录</button>
</div>
</div>
<div class="row">
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>日期</th>
<th>金额</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr v-for="moeny in moneyList">
<td><a href="javascript:void(0)" v-on:click="editMoney(moeny.id)">{{moeny.id}}</a></td>
<td>{{moeny.date}}</td>
<td>{{moeny.moeny}}</td>
<td>{{moeny.desc}}</td>
</tr>
</tbody>
</table>
</div> <div class="modal fade" id="MoneyModal" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form name="moneyForm" role="form" novalidate class="form-validation">
<div class="modal-header">
<h4 class="modal-title">
<span v-if="moneyModel.id">编辑消费记录</span>
<span v-if="!moneyModel.id">添加消费记录</span>
</h4>
</div>
<div class="modal-body">
<input type="hidden" v-model="moneyModel.id"/>
<div class="form-group">
<label>日期</label>
<input class="form-control" type="text" v-model="moneyModel.date" required>
</div>
<div class="form-group">
<label>金额</label>
<input class="form-control" type="text" v-model="moneyModel.moeny" required>
</div>
<div class="form-group">
<label>描述</label>
<input class="form-control" type="text" v-model="moneyModel.desc" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">@L("Cancel")</button>
<button type="button" class="btn btn-primary blue" v-on:click="saveMoney" ><i class="fa fa-save"></i> <span>@L("Save")</span></button>
</div>
</form>
</div>
</div>
</div>
</div>

 9.效果演示

 10.疑问,不知道这样使用vue是否符合规范,我感觉有点问题,请各位赐教。

10步完成Abp(.net core)+Vue的Demo?的更多相关文章

  1. #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验

    #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验 一.续上前言 关于这个小玩意的产品思考,假设我暂时把他叫我是月老热心人 这是一个没有中心的关系链,每个人进入以后都是以自己为中 ...

  2. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理六(二十四)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理八(二十六)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  4. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之一(三十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  5. abp(net core)+easyui+efcore实现仓储管理系统——出库管理之一(四十九)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  6. ABP (.Net Core 3.1版本) 使用MySQL数据库迁移启动模板项目(1)

    最近要搭建新项目,因为还没有用过.net core,所以想用.net core的环境搭建新项目,因为不熟悉.net core的架构,所以就下载了abp项目先了解一下. 因为自己太菜了,下载了模板项目, ...

  7. abp(net core)+easyui+efcore实现仓储管理系统——出库管理之二(五十)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...

  8. 一步一步使用ABP框架搭建正式项目系列教程之本地化详解

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...

  9. Docker 发布 Abp net core web 服务

    Docker 发布 Abp net core web 服务 准备工作:Abp 项目,这个是模板下载地址 https://aspnetboilerplate.com/Templates (本例使用的是S ...

随机推荐

  1. Salesforce开发者学习笔记之二:Salesforce开发平台应用场景

    Salesforce作为一个全方位的CRM系统可以应用于企业中的各个不同部门以取代手工的,耗时的以及低效的业务流程,例如 基于报表的数据管理和分析 基于电子邮件的协同合作 本地的文件共享 各种手工操作 ...

  2. 如何成为一名优秀的UI设计师

    zccst整理 因为我自己就是一个 0 美术基础.非计算机.非艺术类科班出身,但从事视觉设计工作的同学,所以很多和题主一样大学里学着不喜欢的专业,想要转设计但又不知从何开始的朋友都来问过我类似的问题, ...

  3. photoshop如何快速切图

    作为业余爱好,之前都是用比较笨的方法切图,甚至用裁剪工具一张一张的切. 后来知道用切片工具,但也仅限于互不重叠的图片. 在工作中实际使用时才发现实在是太慢了,慢到上级自己说你不用做了,我来吧. 其实, ...

  4. STM32串口寄存器操作(转)

    源:STM32串口寄存器操作 //USART.C /************************************************************************** ...

  5. iOS越狱包

    编译完了的程序是xxx.app文件夹,我们需要制作成ipa安装包,方便安装 找一个不大于500*500的png图片(程序icon图标即可),改名为:iTunesArtwork,注意不能有后缀名. 建立 ...

  6. 了解HTML/HTML5中的download属性

    一.download属性是个什么鬼? 首先看下面这种截图: 如果我们想实现点击上面的下载按钮下载一张图片,你会如何实现? 我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片,类似下面这样: ...

  7. 安卓selector

    定义styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> < ...

  8. Python3基础 在print中用 %d 输出一个整数

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  9. QGis(三)查询矢量图层的要素属性字段值(转载)

    QGis(三)查询矢量图层的要素属性字段值 https://github.com/gwaldron/osgearth/issues/489 当加载一个矢量图层后,如果要查看要素的属性字段值,则需要实现 ...

  10. iOS 之 UIStackView

    UIStackView是iOS9新推出的布局控件,它的出现,可以说颠覆了以往的布局方式. 问题时,如果我使用UIStackView,它能用在iOS7.8系统中吗? 我要测试一下.测试程序我放到gith ...