Vue前台请求后台数据采坑日志，包含传递json数据

第一个坑，跨域问题，由于.net webapi与Vue服务器不在同一机器上ip端口都不一样，需要配置跨域，但总说找不到.devServer

解决过程异常艰辛，原因诡异，解决办法如下

需要将xxxx.config.js修改名称为vue.config.js
还要用管理员运行PowerShell然后输入
set-ExecutionPolicy RemoteSigned
输入Y
回车才可以

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.prototype.$axios = axios;
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div class="hello">
    <div>
      {{title}}
    </div>
    <hr>
    <button @click="convert">点击获取数据</button>
  </div>
</template>
 
<script> 
  export default {
    name: 'HelloWorld',
    data() {
      return {
        title: "静态数据"
      }
    },
    //在这里调用ajax请求方法
    created(){
      this.convert();
    },
    methods: {
      convert: function () {
       this.$axios.get("/api/values/page",{
            params:{
              index:0,
              number:10
            }
          }).then(res=>{
            for(var i=0;i<res.data.length;i++){
                 console.log(res.data[i].id);
            }
          })
      }
    }
  }
</script>

第二个坑，axios需要设置成post否则后台body中没有数据，而postman用get和post后台都没有问题

[HttpPost("velocity")]

第三个坑，前台通过body传递json参数，后台用实体接收，postman没有问题，vue死活不行，原因是json数据的格式不对称

前台可以通过下面输出来看是不是想要的格式

console.log(JSON.stringify(obj));
console.log(this.$qs.stringify(obj));
console.log(this.$qs.parse(obj));

后台直接用流接收，然后看输出是不是想要的

        [HttpPost("velocity")]
        public ActionResult<double> GetVelocity()
        {
            Stream stream = Request.Body;
            FlowVelocity flowVelocity = new FlowVelocity();
            string data = "";
            if (stream != null)
            {
                using (var reader = new StreamReader(stream, Encoding.UTF8))
                {
                    data = reader.ReadToEnd();
                }
            }
            Console.WriteLine(data);
            return 1;
        }

可以正常交汇的代码示例

前端

<template>
  <div class="hello">
    <div>
      {{title}}
    </div>
    <p>半径(米)：</p>
    <input v-model="thisR" placeholder="">
    <p>流量(立方米每秒)：</p>
    <input v-model="thisQ" placeholder="">
    <p>流速(米每秒)：</p>
    <input v-model="thisV" placeholder="">
    <hr>
    <button @click="convert">点击计算流速</button>
  </div>
</template>
 
<script> 
  export default {
    name: 'HelloWorld',
    data() {
      return {
        thisR:0,
        thisQ:0,
        thisV:0,
        title: "计算流速"
      }
    },
    //在这里调用ajax请求方法,初始化调用
    // created(){
    //   this.convert();
    // },
    methods: {
      convert: function () {
       this.$axios.post("/api/general/velocity",
          this.$qs.parse({R: this.thisR,
          Q: this.thisQ})
          ).then(res=>{
            this.thisV = res.data
          })
      }
    }
  }
</script>

后端

[HttpPost("velocity")]
public ActionResult<double> GetVelocity(FlowVelocity flowVelocity)
{
    return flowVelocity.GetV();
}

实体类

   public class FlowVelocity
    {
        public double R { get; set; }//半径（米）
        public double Q { get; set; }//流量（立方米每秒）
        public double V { get; set; }//流速（米每秒）
        public double GetV()
        {
            double v = (Q / (Math.PI * Math.Pow(R, 2))) / 3600;
            return v;
        }
    }