DevEco + Django 前后端数据库连接实验五

bioioid_song

已于 2022-08-05 23:35:26 修改

阅读量488

点赞数

文章标签： django 数据库 css harmonyos

于 2022-08-05 22:12:48 首次发布

本文链接：https://blog.csdn.net/m0_49786709/article/details/126185280

版权

1.涉及相关知识点

2.实验内容

2.1 实验目标

结合之前的实验三，这次完成登录部分的样例。当登录时输入的用户名和密码与后端数据库中一样时，将内容显示在输入框下面。

2.2 相关代码

前端

<!--login.hml-->
<div class="container">
    <div class="title">
        <text class="txt">Welcome</text>
    </div>
    <div class="middle">
        <div class="row1">
            <div class="input-block">
                <input id="username" class="input" type="text" maxlength="10" placeholder="用户名"
                        onchange="inputAccount" ontranslate="translate"/>
            </div>
        </div>
        <div class="row2">
            <div class="input-block">
                <input id="password" class="input" type="password" maxlength="10" placeholder="密码"
                       onchange="inputPassword"/>
            </div>
        </div>
        <div class="login">
            <button class="btn" onclick="onClick">立即登录</button>
        </div>
        <div class="regist">
            <text class="txt1">忘记密码？</text>
            <text class="txt2">|</text>
            <text class="txt2" onclick="docRegist">立即处理</text>
        </div>
        <div class="back">
            <text>{{winfo}}</text>
        </div>
        </div>
</div>

//login.css
.container{
    display:flex;
    flex-direction: column;
    align-items: center;
    width: 440px;
    height:800px;
}
.title{
    margin-top: 150px;
}
.txt{
    font-size:60px;
    color:blueviolet;
}
.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 rgba(0,0,0,2);
    font-size:30px;
    background-color: #0ea9ff;
    color:#ffffff;
    margin-top: 170px;
    margin-top: 40px;
}
.button2{
    width:150px;
    height:70px;
    box-shadow:1 2px 4px 0 rgba(0,0,0,2);
    font-size:30px;
    background-color: #0ea9ff;
    color:#ffffff;
    margin-top: 110px;
    margin-top: 10px;
}
.input-form{
    width:100%;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.form-text{
    font-size:20px;
}
.row1{
    width:350px;
    margin-top: 15px;
    flex-direction: row;
}
.row2{
    width:350px;
    margin-top: 15px;
    flex-direction: row;
}
.label{
    font-size:14px;
    width:120px;
    text-align: right;
    margin-left: 15px;
}
.input-block{
    width:100%;
}
.input{
    border-bottom: 1px solid rgba(0,0,0,0.2);
    border-right:1px solid rgba(0,0,0,0.2);
    margin-left: 10%; /*使居中*/
    width:80%;
    height:50px;
    font-size:20px;
    placeholder-color: rgb(160,160,160);
    font-weight: 200;
}
.password-tip{
    font-size:30px;   
}
.sex{
    font-size:10px;
    margin-right:10px;
}
.favorite{
    font-size:10px;
}
.button{
    margin-top: 70px;
    width:150px;
    background-color:#17A98E;
}
.btn{
    background-color:#3399FF;
    margin-top: 10%;
    width:70%;
    margin-left: 15%;
    height:50px;
    font-weight:600;
    text-align: center;
    font-size:22px;
}
.login{
    height:70px;
}
.regist{
    flex-direction: row;
    width:50%;
    margin-left:25%;
}
.txt1{
    font-size: 15px;
    text-align: center;
}
.txt2{
    font-size: 15px;
    margin-left: 5px;
}

// login.js
import router from '@system.router';
import fetch from '@system.fetch';
import qs from 'qs';
export default {
    data: {
//        fit:"cover",
        winfo:"",
    },
//    docRegist(){
//        router.push({
//            uri:'pages/registUser/registUser',//指定要跳转的页面
//        })
//    },
    inputAccount(e){
        this.username = e.value;
    },
    inputPassword(e){
        this.password = e.value;
    },
    onClick(){
        //发起网络请求
        fetch.fetch({
            url:`http://127.0.0.1:8000/train/login/`,
            data: qs.stringify({'username':111,'password':222}),
            //验证，转为字符串发给后台，与自己输入的用户名和密码进行匹配
            responseType:"json",
            method:"POST",

            success:(resp)=>{
                this.winfo = resp.data;//令获取到的数据赋给
                console.log("返回到数据："+this.winfo)//打印出数据
//                if(this.winfo=="验证成功"){
//                    router.push({
//                        uri:'pages/nav/nav'
//                    })
//                }
            }
        })
    }
}

后端

class login(APIView):
    def post(self, request):
        username1 = request.data.get("username"); # 跟前端对应
        password1 = request.data.get("password");
        # "username"和"password"是前端发送给后端的数据 data: qs.stringify所对应的键
        print(username1);
        cur = con.cursor() # 创建游标

        sql = "select * from login3 where name =%s"
        # 执行查询操作
        # 这里=%s千万不能分开
        values = (username1)

        try:
            # cur.excute(sql,args)
            # excute()执行sql
            # 用python内置的方法可以对sql语句传入的参数进行校验，在一定程度上屏蔽掉sql注入，提升了SQL的安全性
            # 类似于其他语言社区query函数，excute是python中的执行查询函数
            if cur.execute(sql,values):
                # 上面if是 如果if后面的执行成功了
                # con.commit()表示提交确认
                # 想让insert 语句 插入数据库里面去需要加上这个
                con.commit()
                # 获取所有符合查询要求的记录列表
                # cur在里面起到
                # .fetchall() 返回多个元组，即返回多个记录(rows)，查的是参数sql，即login3这个表
                # 元组是有序且不可修改的集合，用圆括号
                results = cur.fetchall()
                for row in results:
                    # 获取到的列表对应列
                    Pusername1 = row[1]
                    Ppassword1 = row[2]
                    print(Pusername1)
                    print(Ppassword1)
                if password1 == Ppassword1:
                    print("账号密码验证跳过")
                    return HttpResponse(Pusername1+','+Ppassword1)
                    # return HttpResponse('验证成功')
            else:
                    print('查无此人')
        except pymysql.Error as e: # e就是except
            print("查无此人" + str(e))
            return HttpResponse("请求失败") # 返回到前端显示的内容