【前端学习记录——Vue-cli】4.此篇记录后台获取参数的坑

本文探讨了使用axios.post调用.NetCore3.1接口时,后台无法接收参数的问题。介绍了如何将后台方法参数调整为JsonElement类型,并提供了一个读取JsonElement中属性的具体方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

因为这个是在此学习项目中遇到的问题,所以一并放在这边。

 

前端使用axios.post(url, params) 调用接口后台方法接收不到参数!!! 

后台是.Net Core 3.1的代码。

在使用axios.post(url,params)传值的时候,params语法要求是键值对的对象。

所以在使用axios.post的时候我的后台Login方法原本的两个参数就获取不到值。于是两个参数都是null。

修改参数为一个object对象,调用GetType().Name 后发现是一个JsonElement对象,于是找方法想要读取到里面的值。 

网上找了很久传值获取不到的原因,虽然有好几个解决办法,但本质上几乎全部都是修改前端的调用方式为拼接成https://Get?id=1这种类型。

下面是我自己的代码,尚未封装成通用的方法,先放着,假如以后用的比较多,再说。

 

/// <summary>
/// 在JSOnElement中获取属性
/// </summary>
/// <param name="req">请求传过来的参数</param>
/// <param name="account">需要读取的参数:帐号</param>
/// <param name="pwd">需要读取的参数:密码</param>
private static void ReadFromJsonElement(JsonElement req, ref string account, ref string pwd)
{
    var reqEnumrate = req.EnumerateObject();
    //好像只能通过一次次MoveNext()取值
    while (reqEnumrate.MoveNext())
    {
        switch (reqEnumrate.Current.Name)
        {
            case "account":
                account = reqEnumrate.Current.Value.ToString();
                break;
            case "pwd":
                pwd = reqEnumrate.Current.Value.ToString();
                break;
            default:
                break;
        }
    }
}

 

### Django与Vue集成概述 Django 是一种功能强大的 Python Web 框架,而 Vue.js 则是一种流行的前端框架。两者可以很好地协同工作来构建现代化的单页应用 (SPA) 或混合架构的应用程序。 #### 前端与后端分离模式 为了实现 Django 和 Vue 的集成,通常采用前后端分离的方式开发应用程序。在这种方式下,Django 主要负责提供 API 口以及处理业务逻辑,而 Vue 负责通过这些获取数据并渲染页面[^1]。 #### 设置项目结构 推荐的做法是将 Vue 应用作为独立模块运行在一个单独的服务上或者嵌入到 Django 项目的静态文件夹中。以下是两种常见的方法: 1. **完全分离**: 将 Vue CLI 创建的应用部署在 Nginx 上或者其他 HTTP Server 中, 并让其调用由 Django Rest Framework 提供的数据服务。 2. **半耦合形式**: 把 Vue 构建后的产物放入 Django `static` 文件夹里,在模板中加载它们[^2]。 #### 安装依赖项 无论是哪种方案都需要先安装必要的工具包: - 对于 Django 来说可能需要用到的是 django-rest-framework 可以帮助快速搭建 RESTful APIs; - 如果计划使用 JWT 认证机制,则还需要引入 djangorestframework-simplejwt 插件用于管理令牌验证过程[^3]。 ```bash pip install djangorestframework simple-jwt corsheaders ``` 对于 Vue 方面则需确保已全局安装 vue-cli 工具以便创建新工程实例: ```bash npm install -g @vue/cli ``` 着按照官方文档指引新建一个基础型 VueJS App 实例即可[^4]: ```bash vue create my-vue-app cd my-vue-app npm run serve ``` #### CORS配置 由于跨域资源共享(CORS),当尝试从前端发送请求至后台服务器时可能会遇到权限问题。因此需要调整 settings.py 添加 'corsheaders' 至 INSTALLED_APPS[]列表内,并设置 ALLOWED_HOSTS 参数允许特定域名访问API资源[^5]。 ```python INSTALLED_APPS = [ ... 'rest_framework', 'corsheaders', # Add this line ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', # Place it before CommonMiddleware 'django.middleware.common.CommonMiddleware' ] CORS_ORIGIN_ALLOW_ALL=True # Or specify allowed origins like so: # CORS_ALLOWED_ORIGINS=['http://localhost:8080'] ``` #### 数据交互示例 假设我们已经定义好了一个简单的 Book Model 类型及其序列化器 Serializer ,那么可以通过 DRF 自动生成视图集 ViewSet 来简化 CRUD 操作流程[^6]。 ```python from rest_framework import viewsets from .models import Book from .serializers import BookSerializer class BookViewSet(viewsets.ModelViewSet): queryset = Book.objects.all() serializer_class = BookSerializer ``` 而在 Vue 组件内部就可以利用 axios 发起 GET 请求读图书列表信息了[^7]: ```javascript import axios from 'axios'; export default { data() { return { books: [] } }, mounted(){ axios.get('/api/books/') .then(response => this.books = response.data); } } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值