使用axios进行前后端数据传输

最近在和朋友合作写一个新的项目,前后端进行了分离,既然是分离的,肯定需要交互,今天这篇文章详细介绍一下数据交互的一种常见方式:使用axios,希望对大家有所帮助。

前端:以LoginPage.vue登录页面为例,后端,使用python的djanjo框架

首先,需要在前端进行一些基本的配置,保证数据能够传过去,

在vite,config.js中添加如下配置:

1)

复制代码
 configWebpack: {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://192.168.234.22:8000/',//这里填入你要请求的接口的前缀
          ws:true,//代理websocked
          changeOrigin:true,//虚拟的站点需要更管origin
          secure: true,                   //是否https接口
          pathRewrite:{
              '^/api':''//重写路径
          }
        }
      }
    }
  }

这里,我最初在配置的时候遇到了一些问题,比较典型的是ECMAScript 模块(ES module)的作用域中使用了 module 关键字,但是该关键字在 ES 模块中并不被支持的问题,上面是修改之后的代码,改之前的代码如下所示:

复制代码
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8000/',//这里填入你要请求的接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                secure: true,                   //是否https接口
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }

分析其原因:我们发现,在 ECMAScript 模块中,没有 module 关键字,而是使用 exportimport 来导出和导入模块。

因为我在在一个 Vue 单文件组件中的 <script> 标签中尝试使用了 module 关键字,而这是不正确的。Vue 单文件组件中的 <script> 标签应该使用 export default {...} 导出组件,或者使用 import 导入其他模块。

这种方法是可以解决问题的,我尝试的是另外一种,如同代码1)

然后,接下来是前端向后端传输数据的相关配置,目的是点击登录按钮的时候,让它执行登录操作,然后跳转到首页。

复制代码
const doLogin = () => {
  // // router.push('/layout')
  // console.log('登录成功,页面即将跳转到首页')
  // 发送 GET 请求
axios({
	url:'http://192.168.234.22:8000/query/',
	method:'GET',
	data:{
		name:form.value.name,
		pswd:form.value.password,
	},
	headers:{
		"Access-Control-Allow-Origin":"*",
		Accept:"*/*"
	}
})
  .then(response => {
    console.log('Response:', response.data);
    console.log('请求成功!');
    router.push('/layout'); // 在请求成功后跳转页面
  })
  .catch(error => {
    console.error('Error:', error);
  })

}

以上内容配置好之后,前端就可以向后端传送数据了。

接下来,看看后端的逻辑:

复制代码
def query(request):
    query_set = userInfo.objects.all()  # 查询所有数据相当于seleclt *
    for item in query_set:
        print(item.name, item.pswd)
    name = request.GET.get("name")
    pswd = request.GET.get("pswd")
    query_set = userInfo.objects.filter(name=name)  # 查询id=1的数据
    query_set = userInfo.objects.filter(pswd=pswd).first()  # 查询第一条数据
    return HttpResponse("1")请求成功后台为什么会返回1

在登录页面,需要用户输入账号和密码,然后点击登录按钮,服务器收到了前端传过来的数据,进行查询,返回一个对象,因为后端虽然执行了相关的操作,但没有明确返回一个 HttpResponse 对象,因此Django默认会返回一个空响应体,并且状态码为 200

以下是响应结果。

好啦,本期文章就到这里,下期见~

相关推荐
Full Stack Developme18 小时前
java.net 包详解
java·python·.net
paopaokaka_luck19 小时前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风19 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
江太翁19 小时前
Kotlin 与 Java 互操作中常用注解
java·python·kotlin
星期天要睡觉19 小时前
深度学习——基于ResNet18迁移学习的图像分类模型
人工智能·python·分类·迁移学习
小钱c719 小时前
Python使用 pandas操作Excel文件并新增列数据
python·excel·pandas
AI数据皮皮侠19 小时前
中国博物馆数据
大数据·人工智能·python·深度学习·机器学习
Southern Wind19 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树20 小时前
Vue3优化指南:少写代码,多提性能
vue.js
90后的晨仔20 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js