首页 > 代码库 > 10步完成Abp(.net core)+Vue的Demo？
10步完成Abp(.net core)+Vue的Demo？
1.去abp官网生成项目，选择.net core1.x版本
2.Nuget还原包，需装dotnet core1.1等。
3.新增一个entity，并加入到上下文中
4.然后cmd命令行工具切换到项目文件AbpCore.EntityFramewor目录下，输入命令dotnet ef migration 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=http://www.mamicode.com/"~/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=http://www.mamicode.com/"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？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。