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

}

Index.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。由于您不在数据库中修改状态，因此可以使用GET代替POST

评论https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.2&tabs=visual-studio中指出，这是开始学习的良好参考

无法通过axios执行发布请求

1 个答案: