项目7-加法运算-前后端分离-AspNetMvcApi&Vue实现
后台核心代码:
public JObject Get(int a, int b) { var jo = new JObject(); jo.Add("sum", a + b); return jo; }
前台核心代码：
@{ Layout = null; } DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Vue Add Testtitle> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js">script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js">script> head> <body> <div id="app"> <input v-model="a">+<input v-model="b">=<input v-model="c"> <button v-on:click="cal">本地计算button> <br /> <br /> <input v-model="aa">+<input v-model="bb">=<input v-model="cc"> <button v-on:click="calcal">远程计算button> div> <script> var app = new Vue({ el: '#app', data: { a: 0, b: 0, c: 0, aa: 0, bb: 0, cc:0 }, methods: { cal: function () { this.c = parseInt(this.a) + parseInt(this.b) }, calcal: function () { var _this = this axios.get('http://localhost:51649/api/Add?a='+this.aa+'&b='+this.bb) .then(function (res) { _this.cc = parseInt(res.data.sum) console.log(res.data.sum) }) .catch(function (error) { console.log(error) }) } } }) script> body> html>