Vue 与.Net Core WebApi交互时路由初探

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接口不同,方法上可能有差异,这里只是引入一下我的经历作为参考。

相关推荐
用户479492835691520 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在20 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好120 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
麦麦大数据21 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
Boale_H21 小时前
如何获取npm的认证令牌token
前端·npm·node.js
qq_3391911421 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
帅气的花泽类21 小时前
npm error code ERR_SSL_TLSV1_UNRECOGNIZED_NAME
前端·npm·node.js
明仔的阳光午后1 天前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
sorryhc1 天前
Webpack中的插件流程是怎么实现的?
前端·webpack·架构
残冬醉离殇1 天前
原来dom树就是AST!!!
前端