Vue + WebApi项目(一)

<template>
<button @click="getWeather">点击</button>
</template>

<script>
export default {
  data(){
        return{
        
        };
    },
	methods: {
		getWeather:function(){
        var that = this;
		this.axios.get("https://localhost:44326/api/values?id=5")
		.then(function(response){
			console.log(response);		
		}),
		function(err){
			console.log(err);
		}
	 	}
	}		
}   
</script>

vue项目main.js文件
打开终端:
npm i element-ui -S //安装elementUI
npm install axios //安装axios

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'; //引入 axios

//element-UI
import ElementUI from 'element-ui' //引入 ElementUI
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

Vue.prototype.axios = axios; //axios 注册全局

Vue.config.productionTip = false

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

webApi 要处理跨域问题
web.config里面的system.webservice加入

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>

global文件里面加入

 protected void Application_BeginRequest()
        {
            //OPTIONS请求方法的主要作用(预请求,判断是否能够请求成功):
            //用来检查服务器的性能。如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                //表示对输出的内容进行缓冲,执行page.Response.Flush()时,会等所有内容缓冲完毕,将内容发送到客户端。
                //这样就不会出错,造成页面卡死状态,让用户无限制的等下去
                Response.Flush();
            }
        }

不要问为什么,我是个菜鸡,记录贴,有问题的的地方请大神指出

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一个基于Vue3和webApi的简单XtraReport报表查看案例。 首先,您需要安装并使用DevExpress报表工具来创建XtraReport报表。然后,您需要将报表导出为HTML格式,并将其作为WebApi中的静态文件进行部署。 接下来,您可以使用Vue3来创建一个报表查看器组件。在这个组件中,您需要使用Axios或其他HTTP客户端来调用WebApi,并获取报表HTML文件的内容。 以下是一个示例代码: ```html <template> <div> <iframe :src="reportUrl" frameborder="0" width="100%" height="800"></iframe> </div> </template> <script> import axios from 'axios' export default { name: 'ReportViewer', data() { return { reportUrl: '' } }, mounted() { this.loadReport() }, methods: { async loadReport() { const response = await axios.get('/api/report.html') this.reportUrl = `data:text/html;base64,${btoa(response.data)}` } } } </script> ``` 在这个组件中,我们使用了一个iframe元素来显示报表内容。在mounted生命周期方法中,我们调用loadReport方法来获取并加载报表。 loadReport方法使用Axios库来调用WebApi,并获取报表HTML文件的内容。然后,我们将HTML内容编码为Base64字符串,并将其设置为iframe的src属性值,以显示报表内容。 请注意,这只是一个简单的示例代码,您需要根据您的具体要求进行修改和定制。 希望这能帮助您开始构建基于Vue3和webApi的XtraReport报表查看应用程序!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值