第一个坑,跨域问题,由于.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;
}
}