梅科尔工作室-Django学习笔记（二次学习）（3）

本次学习的是如何用django实现前端鸿蒙OS登录

下面介绍一下本次的操作过程。

1.首先创立MySQL数据并将数据库导入到django当中

 其中：导入数据库的操作：

2.配置urls

对应新建的person这个APP中的url

from django.contrib import admin
from django.urls import path
from . import views

app_name = 'app01'

urlpatterns = [
    path('login/', views.login.as_view(), name='login'),
]

跳转到person.view界面

# from django.shortcuts import render,HttpResponse
# from person import models
# def add_person(request):
#     books = models.Person.objects.create(username="tf", password="1230806")
#     print(books, type(books)) # Book object (18)
#     return HttpResponse("<p>数据添加成功！</p>")


import pymysql
from django.shortcuts import HttpResponse
from rest_framework.views import APIView
# def add_book(request):
#     books = models.Book.objects.filter(pk__in=[7,8]).update(price=888)
#     return HttpResponse(books)

from person.models import Person

try:
    con = pymysql.connect(host='127.0.0.1',
                          port=3306,
                          user='*******',
                          password='*******',
                          db='aaa',
                          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)
        print(password)  # 打印输出
        cur = con.cursor()  # 创建游标
        sql = "select * from person_person where username=%s"  # sql语句查询person数据库username的数据
        values = username  # 命令值=username
        try:
            if cur.execute(sql, values):
                con.commit()  # 提交到数据库当中
                results = cur.fetchall()   # 查询表中所有符合条件的值
                for row in results:   # for循环遍历查找
                    Pusername = row[1]  # 第二列的username
                    Ppassword = row[2]  # 第三列的password
                    print(Pusername)  # 打印查看是否获取到
                if password == Ppassword:  # 比较前端获取的密码和数据库当中的值是否一致
                    print("账号密码验证通过")
                    return HttpResponse("验证成功")  # 返回前端的值
            else:
                print("查无此人")
        except pymysql.Error as e:
            print("查无此人:" + str(e))
            return HttpResponse("请求失败")

同时对于from rest_framework.views import APIView，记得要先安装APIView接口，具体操作在上一篇笔记当中：

(33条消息) 梅科尔工作室-Django学习笔记（二次学习）（2）_冰潔的博客-CSDN博客

3.鸿蒙OS前端代码

login.hml：

<div class="container">
    <div class="title">
        <text>Welcome To Maker</text>
    </div>
    <div class="middle">
        <div class="row1">
            <div class="input-block">
                <input id="username" class="input" type="text" maxlength="10" placeholder="用户名" onchange="inputUsername"></input>
            </div>
        </div>
        <div class="row2">
            <div class="input-block">
                <input id="password" class="input" type="text" maxlength="10" placeholder="密码" onchange="inputPassword"></input>
            </div>
        </div>
    </div>
    <div class="div-button">
        <button class="btn"  onclick="onClick">立即登录</button>
    </div>
    <div>
        <text class="text1">忘记密码？</text>
        <text class="text1">|</text>
        <text class="text1">立即注册</text>
    </div>
    <div>
        <text>{{winfo}}</text>
    </div>
</div>

记得在引用qs库：通过npm install querystring获取，nmp由node.js自带

 login.js

import fetch from '@system.fetch';
import router from '@system.router';
import qs from 'querystring'
export default {
    data: {
        fit:"cover",
        winfo:"",
    },
//    docRegist(){
//        router.push({
//            uri:'pages/register/register',
//        })
//    },
    inputAccount(e) {
        this.username = e.value;
    },
    inputPassword(e){
        this.password = e.value;
    },
    onClick(){ // 发起网络请求
        fetch.fetch({
            url:'http://127.0.0.1:8000/person/login/',  // 获取地址
            data: qs.stringify({'username': "abc", 'password': "123abc"}),  //反馈给后端的数据
            responseType:"json",  //请求的参数类型
            method:"POST",
            success:(resp)=>  // 如果成功
            {
                this.winfo = resp.data;
                console.log("返回的数据："+this.winfo)  // 打印输出
//                if(this.winfo=="验证成功"){
//                    router.push({
//                        uri:'pages/index/index',
//                    })
//                }
            },
            fail:(resp)=>  // 如果获取失败
            {
                this.winfo = resp.data,
                console.log("获取数据失败："+this.winfo)
            }
        });
    },
}

css格式不作具体要求，可根据自己的情况自由发挥，现在给出参考代码：

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 440px;
    height: 800px;
    background-color: aquamarine;
}
.title{
    margin-top: 150px;
    margin-left: 50px;
}
.txt{
    font-size: 60px;
    color: white;
}
.up{
    flex-direction: column;
    height: 200px;
}
.middle{
    flex-direction: column;
    margin-top: 60px;
}
.form-text{
    font-size: 17px;
}
.button1{
    width: 150px;
    height: 70px;
    box-shadow: 1 2px 4px 0 rbga(0,0,0,2);
    font-size: 30px;
    background-color: #0ea9ff;
    color: #fff;
    margin-left: 110px;
    margin-top: 40px;
}
.button2{
    width: 150px;
    height: 70px;
    box-shadow: 1 2px 4px 0 rbga(0,0,0,2);
    font-size: 30px;
    background-color: #0ea9ff;
    color: #fff;
    margin-left: 110px;
    margin-top: 10px;
}

.input-form{
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.form-text{
    font-size: 20px;
}
.row1{
    margin-top: 15px;
    flex-direction: row;
}
.row2{
    width: 500px;
    margin-top: 15px;
    flex-direction: row;
}
.laebel {
    font-size: 14px;
    width: 120px;
    text-align: right;
    margin-left: 10px;
}
.input-block {
    width: 100%;
    left: 15%;
}
.input {
    border-bottom: 1px solid ;
    border-right: 1px solid ;
    width: 70%;
    height: 50px;
    font-size: 20px;
    placeholder-color: beige;
    font-weight: 200;
}
.password-tip{
    font-size: 50px;
}
.sex{
    font-size: 10px;
    margin-right: 10px;
}
.favorite{
    font-size: 10px;
}
.text1{
    font-size: 20px;
    justify-content: center;
    left: 90px;

}
.div-button{
    height: 70px;
}
.btn{
    width: 50%;
    height: 30px;
    margin-left: 25%;
    margin-end: 20px;
    margin-top: 20px;
}

4.运行

首先在django终端中输入

python manage.py runserver + 端口号

接着跳转到前端，打开preview，点击登录

显示登录成功

 

 后端同样成功获取到数据。

最后感谢潘子涵学姐耐心的讲解！