10步完成Abp(.net core)+Vue的Demo？

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
{
    
}
"moneyApp">
    
class="row">
        
class="col-md-12">
            "modal" data-target="#MoneyModal" class="btn btn-primary pull-right">class="fa fa-plus">添加消费记录
        
    
    
class="row">
        class="table">
            for="moeny in moneyList">
                    

                

                    
编号
                    
日期
                    
金额
                    
描述
                
            
            

                
"javascript:void(0)" v-on:click="editMoney(moeny.id)">{{moeny.id}}
                    
{{moeny.date}}
                    
{{moeny.moeny}}
                    
{{moeny.desc}}
                
            
        
    

    
class="modal fade" id="MoneyModal" tabindex="-1" role="dialog" data-backdrop="static">
        
class="modal-dialog" role="document">
            
class="modal-content">
                
"moneyForm" role="form" novalidate class="form-validation">
                    
class="modal-header">
                        
class="modal-title">
                            if="moneyModel.id">编辑消费记录
                            if="!moneyModel.id">添加消费记录
                        
                    
                    
class="modal-body">
                        "hidden" v-model="moneyModel.id"/>
                        
class="form-group">
                            日期
                            class="form-control" type="text" v-model="moneyModel.date" required>
                        
                        
class="form-group">
                            金额
                            class="form-control" type="text" v-model="moneyModel.moeny" required>
                        
                        
class="form-group">
                            描述
                            class="form-control" type="text" v-model="moneyModel.desc" required>
                        
                    
                    
class="modal-footer">
                        "button" class="btn btn-default" data-dismiss="modal">@L("Cancel")
                        "button" class="btn btn-primary blue" v-on:click="saveMoney" >class="fa fa-save"> @L("Save")
                    
                
            
        
    

 

 9.效果演示

 

 

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

转载于:https://www.cnblogs.com/seejoy/p/6397581.html