Vue + WebApi项目（一）-CSDN博客

本文链接：https://blog.csdn.net/qq_39523527/article/details/105473182

<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();
            }
        }