C# AJAX與前端Vue.js的無縫對接

要實(shí)現(xiàn)C# AJAX與前端Vue.js的無縫對接，你需要在后端創(chuàng)建一個(gè)API接口，前端通過AJAX請求這個(gè)接口來獲取數(shù)據(jù)。以下是一個(gè)基本的示例，展示了如何在C#中創(chuàng)建一個(gè)Web API，并在Vue.js中使用Axios來發(fā)送請求。

后端：C# Web API

首先，你需要?jiǎng)?chuàng)建一個(gè)ASP.NET Web API項(xiàng)目。這里假設(shè)你已經(jīng)創(chuàng)建了一個(gè)名為MyApi的項(xiàng)目。

1. 在項(xiàng)目中添加一個(gè)新的控制器，例如ValuesController。
2. 在控制器中添加一個(gè)GET方法來返回?cái)?shù)據(jù)。

using System.Collections.Generic;
using System.Web.Http;

namespace MyApi.Controllers
{
    public class ValuesController : ApiController
    {
        // GET api/values
        public IHttpActionResult Get()
        {
            var data = new List<string>
            {
                "Value1",
                "Value2",
                "Value3"
            };
            return Ok(data);
        }
    }
}

確保你的Web API項(xiàng)目運(yùn)行正常，并且可以通過http://localhost:端口號/api/values來訪問這個(gè)接口。

前端：Vue.js

在Vue.js項(xiàng)目中，你可以使用Axios庫來發(fā)送AJAX請求。

1. 安裝Axios：

npm install axios

2. 在Vue組件中引入Axios并使用它來發(fā)送請求：

  <div>
    <h1>Values from API</h1>
    <ul>
      <li v-for="value in values" :key="value">{{ value }}</li>
    </ul>
  </div>
</template><script>
import axios from 'axios';

export default {
  name: 'ValuesComponent',
  data() {
    return {
      values: []
    };
  },
  mounted() {
    this.fetchValues();
  },
  methods: {
    fetchValues() {
      const apiUrl = 'http://localhost:端口號/api/values';
      axios.get(apiUrl)
        .then(response => {
          this.values = response.data;
        })
        .catch(error => {
          console.error('Error fetching values:', error);
        });
    }
  }
};
</script>

在這個(gè)Vue組件中，我們在mounted生命周期鉤子中調(diào)用fetchValues方法，該方法使用Axios向我們之前創(chuàng)建的C# Web API發(fā)送GET請求。請求成功后，我們將返回的數(shù)據(jù)賦值給values數(shù)組，然后在模板中遍歷這個(gè)數(shù)組來顯示數(shù)據(jù)。

確保你的Vue.js應(yīng)用程序能夠訪問到C# Web API的URL，如果它們不在同一個(gè)域上，你可能還需要處理CORS（跨源資源共享）問題。

這樣，你就實(shí)現(xiàn)了C# AJAX與前端Vue.js的無縫對接。當(dāng)然，這只是一個(gè)基本示例，實(shí)際應(yīng)用中你可能需要處理更復(fù)雜的邏輯和錯(cuò)誤處理。