Django 第五次培训 鸿蒙app与Django的简单交互

准备工作

连接数据库

这里不使用Django中的models.py进行数据库的操作。在views.py中直接连接数据库，通过可视化软件建表，并手动添加数据

连接数据库

try:
    con = pymysql.connect(host='127.0.0.1',  # 或者是写localhost
                          port=3306,  # 端口号
                          user='root',  # MySQL登录用户名
                          password='xxxxxxxxx',  # MySQL登录密码
                          db='django',  # 要连接的数据库名称
                          charset='utf8')  # 表的字符集
    print("数据库连接成功")
except pymysql.Error as er:
    print('连接失败'+str(er))   # 打印异常

建表

前端实现

hml

<div id="wrapper">
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <text id="text1">登录测试</text>
            </div>
            <div id="div5">
                <text id="text2">Hello World</text>
            </div>
            <div id="div6">
                <div id="div7">
                    <input id="input1" type="text" placeholder="用户名" name="username" onchange="inputAccount"></input>
                    <input id="input2" type="password" placeholder="密码" name="password" onchange="inputPassword"></input>
                    <button id="onClick" onclick="onClick" value="立即登录"></button>
                    <div id="div8">
                        <button id="button2" type="text" value="立即注册"></button>
                        <button id="button3" type="text" value="忘记密码"></button>
                    </div>
                    <div id="div9"></div>
                </div>
                <div id="div10">
                    <text id="text3">{{winfo}}</text>
                </div>
            </div>
        </div>
    </div>
</div>

css

#wrapper {
    flex-direction: column;
    width: 100%;
}

#div1 {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#div2 {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

#div3 {
    width: 100%;
    height: 7%;
}

#text1 {
    height: 100%;
    width: 360px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 6px;
}

#div5 {
    width: 100%;
    height: 20%;
}

#text2 {
    height: 209.87188612099644px;
    width: 360px;
    text-align: center;
    font-size: 60px;
    font-weight: 700;
    color: #30b6ef;
}

#div6 {
    width: 100%;
    height: 40%;
    flex-direction: column;
}

#div7 {
    width: 100%;
    height: 85%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

#input1 {
    width: 95%;
    height: 22%;
}

#input2 {
    width: 95%;
    height: 22%;
}

#onClick {
    width: 70%;
    height: 18%;
    font-weight: 600;
}

#div8 {
    width: 100%;
    height: 50px;
    align-items: center;
    align-content: center;
    justify-content: center;
}

#button2 {
    width: 30%;
    height: 100%;
}

#button3 {
    width: 30%;
    height: 100%;
}

#div9 {
    width: 100%;
    height: 50px;
}

#div10 {
    width: 100%;
    height: 20%;
    align-items: center;
    align-content: center;
    justify-content: center;
}

#text3 {
    height: 100%;
    width: 100%;
}

js

import router from '@system.router';
import fetch from '@system.fetch';
import qs from 'querystring';

export default {
    data:{
        winfo:"" //定义winfo用于存放后端反馈数据
    },
    inputAccount(a){
        this.username = a.value;
    },
    inputPassword(a){
        this.password = a.value;
    },
    onClick(){
        fetch.fetch({
            url:`http://127.0.0.1:8000/app01/login/`, //后端路径，
            data: qs.stringify({'username':"123",'password':"123"}),//验证，将字符串转发给后端，后端会受到这个请求
            responseType:"json",//请求的参数类型
            method: "POST",
            success:(resp)=>
            {
                this.winfo = resp.data;//将获取到的后端数据赋给winfo
                console.log("返回的数据："+this.winfo);//打印出数据
            },
            fail:(resp)=>
            {
                this.winfo = resp.data;//令获取到的后端数据赋给winfo
                console.log("获取数据失败："+this.winfo)//打印出数据
            }
        });
    }
}

效果

 后端

一级路由

    path('app01/', include(app01_urls, namespace='app01')),

二级路由

from django.urls import path
from app01.views import Appreap1, login
from . import views
app_name = 'app01'

urlpatterns = [
    path('Appreap1/', Appreap1.as_view()),
    path('', views.home, name= "home"),
    path('show/', views.show),
    path('login/', login.as_view())
]

views.py

# 登录界面
class login(APIView):
    def post(self, request):  # 定义post函数
        username = request.data.get("username")  # 通过请求获取数据并赋值
        password = request.data.get("password")
        print(username)
        print(password)
        cur = con.cursor()  # 定义个游标
        sql = "select * from login where username =%s"  # 定义sql语句进行查询
        values = (username)
        try:  # 异常执行部分
            if cur.execute(sql, values):  # 如果匹配
                con.commit()  # 提交事务
                results = cur.fetchall()  # 获取结果集
                for row in results:
                    Pusername = row[1]  # 遍历结果，将第1列赋给username
                    Ppassword = row[2]  # 遍历结果，将第2列赋给username
                    print(Pusername)
                    print(Ppassword)

                if password == Ppassword:  # 匹配
                    print("账号密码验证成功")
                    return HttpResponse('验证成功')
            else:
                print('查无此人')
        except pymysql.Error as e:  # 捕捉异常
            print("查无此人" + str(e))
            return HttpResponse("请求失败")

成果展示