无法通过 axios 执行发布请求

Question

我正在尝试在 Visual Studio 中使用 vue.js 和 axios 填充表格。 当我调试我的解决方案时，我得到一个空表，标题为 Title。

我尝试了另一种 POST 请求的方法，但没有奏效：

https://github.com/axios/axios?fbclid=IwAR0qTUEwV4k1PK40ocQF7PBSNg5xJR5PWw5CbwIAgRmlwLcLxbzmW1OcB5Y

型号：

namespace MovieList.Models
{
public class Movie
{
    public string Title { get; internal set; }
}
}

控制器：

namespace MovieList.Controllers {

public class MoviesController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetMovies()
    {
        var movieService = new MovieService();
        List<Movie> movies = movieService.GetMovies();
        return Json(movies);
    }
}
}

我还建立了一个支持服务类：

namespace MovieList.Controllers
{
public class MovieService
{
    public List<Movie> GetMovies()
    {
        var movieRepo = new MovieRepo();
        var movies = movieRepo.GetMovies();
        return movies;
    }
}
}

.. 和一个存储库：

namespace MovieList.Controllers
{
public class MovieRepo
{
    private List<Movie> movieList = new List<Movie>
    {
        new Movie {
            Title = "Movie"
        },
        new Movie {
            Title = "Movie II"
        },
        new Movie {
            Title = "GMovie III"
        }
    };

    public List<Movie> GetMovies()
    {
        return movieList;
    }
}

}

索引.html：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" 
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
    <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Search" 
class="form-control"/>
    </div>
    <br>
    <div class="wrapper">
        <div class="card" >
            <table style="width:100%" class=" table movie-table">
                <tr>
                    <th>Title</th>
                </tr>
                <tr v-for="post in movieList">
                    <td>{{ post.Title }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Javascript：

const app = new Vue({
el: '#app',
data: {
    search: '',
    movieList: []
},
computed: {
    filteredList() {
        return this.movieList.filter(post => {
            return 
post.title.toLowerCase().includes(this.search.toLowerCase())
        })
    }
},
mounted() {
    axios.post("http://localhost:60103/Movies", {}).then((data) => {
        console.log(data)
    });
}
})

Answer 1

尝试将[HttpPost] 属性添加到控制器中的操作方法。

更新

namespace MovieList.Controllers {

[Route("api/[controller]")]
[ApiController]
public class MoviesController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetMovies()
    {
        var movieService = new MovieService();
        List<Movie> movies = movieService.GetMovies();
        return Json(movies);
    }
}
}

这将允许您通过 /api/Movies 和 GET 请求访问 api。由于您没有修改 DB 中的状态，因此您可以使用 GET 而不是 POST

正如cmets中指出的https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.2&tabs=visual-studio是一个很好的入门参考