Api:
cs
/// <summary>
/// 根据id获取文章
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpGet, Route("GetArticleById")]//api/article/GetArticleById
public async Task<IActionResult> GetArticleById( int id)
{
ApiResult<Article> apiResult = await _articleService.GetArticleById(id);
return Ok(apiResult);
}
/// <summary>
/// 通过文章编号,获取文章详情信息
/// </summary>
/// <param name="id">文章编号</param>
/// <returns></returns>
[HttpGet, Route("{id}")] //api/article/12
public async Task<IActionResult> GetArticle(long id)
{
Article article = await _articleService.FindAsync(id);
ApiResult<Article> apiResult = new();
apiResult.Data = article;
apiResult.Code = article == null ? 404 : 200;
apiResult.Message = article == null ? "文章详情信息不存在!" : "获取文章详情信息";
return Ok(apiResult);
}
我的接口中定义了两个方法,实现了同样的功能,但是对外提供的访问路由不同。
第一个是://api/article/GetArticleById 然后接收一个int类型的参数,
第二个是://api/article/12 12就是需要调用者直接提供的参数,12只是演示,当然也可以其他数字。
请求:
针对上方Api在Vue中对应的请求方式也有两种:
第一种:
javascript
//定义参数
const correctedParams = {
id: articleId ,
};
const response = await request.get('/Article/GetArticleById', {
params: correctedParams
});
这种方法实际请求的url是:
/Article/GetArticleById?id=123
(123也是演示用的)
然后就可以手动拼接:
request.get(`/Article/GetArticleById?id=${articleId }`);
注意这里是反引号 ` 而不是单引号 ' 。
但是手动拼接的话有一些隐患:
问题1:参数编码问题
javascript
// 如果文章ID包含特殊字符
const id = "123&type=test";
request.get(`/Article?id=${id}`);
// → /Article?id=123&type=test (错误解析为两个参数)
// 正确的方式会自动编码:
request.get('/Article', { params: { id: "123&type=test" } });
// → /Article?id=123%26type%3Dtest (正确编码)
问题2:多个参数时很麻烦
javascript
// 手动拼接很繁琐且容易出错
request.get(`/Article?id=${id}&category=${category}&page=${page}`);
// 使用params对象更清晰
request.get('/Article', {
params: { id, category, page }
});
第二种:
javascript
const response = await request.get(`/Article/${articleId}`);
这种方法就直接把id当作路由的一部分来调用。
根据项目封装的axios接口不同,方法上可能有差异,这里只是引入一下我的经历作为参考。