VSCode+Vue+Axios编写HelloWorld项目源码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import Routers from './router'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Vue.config.productionTip = false
Vue.prototype.axios = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: Routers,
  components: {
    App
  },
  template: '<App/>'
})

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <div id="test">
      <span>通过Axios调用Api接口返回数据：</span>
      <div>
       Code: {{code}}<br>
       Name: {{name}}
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "hello",
  data() {
    return {
      code: "",
      name: "",
      msg: "HELLO WORLD!,this is my first project!",
    };
  },
  created() {
    this.loadData();
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    loadData() {
      var _T = this;
      this.axios
        .post("/api/get.aspx")        
        .then(function (res) {
          _T.code = res.data.code;
          _T.name = res.data.name;
        })
        .catch(function (res) {
          console.log(res);
        });
    },
  },
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

}module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:4618', //请求域名
        //secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //如果是跨域访问，需要配置这个参数
        pathRewrite: {
          '^/api': ''
        }
      }
    }
}

<script>
/* eslint-disable */
export default {
  name: "hello",
  data() {
    return {
      code: "",
      name: "",
      msg: "HELLO WORLD!,this is my first project!",
    };
  },
  created() {
    this.loadData();
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    loadData() {
      var _T = this;
      this.axios
        .post("/api/get.aspx")        
        .then(function (res) {
          _T.code = res.data.code;
          _T.name = res.data.name;
        })
        .catch(function (res) {
          console.log(res);
        });
    },
  },
};
</script>

public partial class cscode_get : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack) return;

        if (this.Request.RequestType == "POST")
        {
            try
            {
                MyPerson p = new MyPerson
                {
                    code = "C000001",
                    name = "VUE",
                };

                var json = JsonConvert.SerializeObject(p);
                this.Response.ContentType = "application/json";
                this.Response.Write(json);

            }
            catch (Exception ex)
            {
                this.DoResponse("PageLoad:内部异常!");
            }
        }
    }
}