使用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 关键字，而是使用 export 和 import 来导出和导入模块。

因为我在在一个 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

以下是响应结果。

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