鸿蒙os连接Django后端实现登录

前端

1.代码

login.hml

<div class="container">
    <div class="title">
        <text class="txt">Django 5</text>
    </div>
    <div class="middle">
        <input id="username" class="input" maxlength="10" placeholder="用户名" onchange="inputAccount" ontranslate="translate"/>
        <input id="password" class="input" maxlength="10" placeholder="密码" onchange="inputPassword"/>
    </div>
    <div class="login">
        <button class="btn" onclick="onclick">登录</button>
    </div>
    <div class="reginst">
        <text class="txt1">忘记密码</text>
        <text class="txt2">|</text>
        <text class="txt2" onclick="doregist">立即注册</text>
    </div>
    <div class="back">
        <text>{{winfo}}</text>
    </div>
</div>

login.css

.container{
    background: linear-gradient(120deg, #3498db, #8e44ad);
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    margin-top: 100px;
}
.txt{
    color: white;
    font-size: 40px;
}
.middle{
    flex-direction: column;
}
.input{
    width: 300px;
    height: 60px;
    color: white;
}
.btn{
    width: 150px;
    height: 45px;
}
.reginst{
    font-size: 20px;
}

login.js

import fetch from '@system.fetch';
import router from '@system.router';
import qs from 'querystring'
export default{
    data:{
        fit:"cover",
        winfo:"",
    },
    onclick(){
        //        发起网络请求
        fetch.fetch({
            url:`http://127.0.0.1:8000/tt/login/`,
            data:qs.stringify({'username':'1','password':'123'}),
            responseType:"json",
            method:"POST",
            success:(resp)=>
            {
                this.winfo=resp.data;
                console.log("返回数据："+this.winfo)
            },
            fail:(resp)=>{
                console.log("获取数据失败")
            }
        });
    },
}

运行效果

预览时无法向输入框里输入内容，所以传给后端的用户名和密码在login.js中是写死状态

 后端

views.py文件中代码

try:
    con = pymysql.connect(
        host='127.0.0.1',
        port=3306,  # 端口号
        user='root',  # 数据库用户名
        password='123456',  # 数据库密码
        database='test',  # 连接的数据库
        charset='utf8'  # 数据库字符集
    )
    print("连接成功")
except pymysql.Error as e:
    print("连接失败" + str(e))

class login(APIView):
    def post(self, request):
        username = request.data.get("username")  # 获取从前端传来的变量名为username的值
        password = request.data.get("password")  # 获取从前端传来的变量名为password的值
        print("前端"+username)
        cur = con.cursor()  # 建立游标
        sql = "select * from login where username=%s"
        values = username
        try:
            if cur.execute(sql, values):  # 使用 execute()  方法执行 SQL 查询
                con.commit()  # 数据表内容有更新，必须使用到该语句
                res = cur.fetchall()  # 获取符合查询条件的记录
                for row in res:
                    p_username = row[0]
                    p_password = row[1]
                    print("后端 用户名:"+p_username+"密码:"+p_password)
                if password == p_password:
                    print("账号密码正确")
                    return HttpResponse("验证成功")
                else:
                    print("无次记录")

        except pymysql.Error as e:
            print("查无此人" + str(e))
            return HttpResponse("请求失败")