技巧5 vue3中用户账号密码登录功能的实现|axios接收后端返回的数据处理|vue3+axios+python

vue3中用户账号密码登录功能的实现|axios接收后端返回的数据处理|vue3+axios+python

一、后端数据

因为用户注册的时候，已经把注册信息递交到后端数据库里了，所以在用户登录的时候，后端直接读取数据库里的注册信息，看看登陆的用户名和密码匹不匹配即可。

这里我就简写，直接判断用户名=张三，密码等于123456了。

后端接收到登录数据后，需要给前端返回成功与否的信息，这里就直接返回一个对象数组。

# 接收用户名和密码,返回登录信息
def v3baiuserlogin(request, response=None):
    _name = request.GET.get("userName")
    _pwd = request.GET.get("pwd")
    if _name != "张三":
        response = HttpResponse('[{"id":"1","content":"用户名错误","judge":"Error"}]')
    elif _pwd !="123456":
        response = HttpResponse('[{"id":"2","content":"密码错误","judge":"Error"}]')
    else:
        response = HttpResponse('[{"id":"3","name":"张三","pwd":"123456","content":"登录成功","judge":"Success"}]')
    response["Access-Control-Allow-Origin"] = "*"
    return response

二、vue中用户账号密码登录功能

此需求未做表单验证。

**需求：**用户在登录页面输入账号密码，点击登录，后端验证登录成功与否。并弹出提示信息。

所用插件：

​ 1.axios axios安装与使用链接

​ 2.vue3的elementPlus。 vue3中elementPlus安装与使用

不影响此功能，仅用了它里面的alert框。

逻辑：用户用户名密码提交到后端，后端返回了数据，提示前端该怎么判断。

也可以把提示信息也写到后端，前端直接读取。在调用elementplus的提示函数时传参即可。

<template>
  <div>
      <div class="header">