10 Steps to complete the demo of ABP (. NET core) +vue?

1. Go to ABP website to build the project, select the. NET core1.x version

2.Nuget reduction package, need to install dotnet core1.1 and so on.

3. Add an entity and add it to the context

4. Then the CMD command-line tool switches to the project file Abpcore.entityframewor directory, enter the command dotnet EF migration Add "initdata" command, and then enter dotnet EF Database Update, execution completes the build database.

6. Add the service layer of the entity that you just added, which is a simple incremental change, which is no longer described in detail (dynamically generated API)

7. New controller, view and other pages, introduce Vuejs file

8. Complete data acquisition According to the dynamically generated API, and add, modify

JS file

        var_dailymoneyservice =Abp.services.app.dailyMoney; varApp =NewVue ({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 forEmpty 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"> <divclass="Row"> <divclass="col-md-12"> <button data-toggle="modal"data-target="#MoneyModal" class="btn btn-primary pull-right"><iclass="FA Fa-plus"></i> add consumption records </button> </div> </div> <divclass="Row"> <tableclass="Table"> <thead> <tr> <th> numbering </th> < th> Date </th> <th> amount </th> <th> description </th> & lt;/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> &L t;/tbody> </table> </div> <divclass="Modal Fade"Id="Moneymodal"tabindex="-1"role="Dialog"data-backdrop="Static"> <divclass="Modal-dialog"role="Document"> <divclass="modal-content"> <form name="Moneyform"role="form"Novalidateclass="form-validation"> <divclass="Modal-header"> class="Modal-title"> <span Vif="moneymodel.id"> Edit consumption records </span> <span Vif="!moneymodel.id"> Add consumption Records </span> class="Modal-body"> <input type="Hidden"V-model="moneymodel.id"/> <divclass="Form-group"> <label> Dates </label> <inputclass="Form-control"Type="text"V-model="moneymodel.date"Required> </div> <divclass="Form-group"> <label> Amount </label> <inputclass="Form-control"Type="text"V-model="Moneymodel.moeny"Required> </div> <divclass="Form-group"> <label> Description </label> <inputclass="Form-control"Type="text"V-model="Moneymodel.desc"required> </div> </div> <divclass="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"><iclass="FA Fa-save"></i> <span>@l ("Save") </span></button> </div> </form> </div> </div> </div></div>

9. Effect Demo

10. Doubt, I do not know whether the use of Vue conforms to specifications, I feel a bit of a problem, please enlighten me.

10 Steps to complete the demo of ABP (. NET core) +vue?