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

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

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

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

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

1）

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

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

module.exports = {devServer: {proxy: {'/api': {target: 'http://127.0.0.1：8000/',//这里填入你要请求的接口的前缀ws:true,//代理websockedchangeOrigin:true,//虚拟的站点需要更管originsecure: 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