HarmonyOS+Django登录页面

目录

前端配置

config.json

CSS与HML

 JS文件编写

后端配置

编写路由配置

建表连接数据库

编写views.py

前端配置

config.json

在DevEco中config.json文件中添加如下代码,作用是为了让priviewer可以连接本地Django服务器

"reqPermissions": [      { "name": "ohos.permission.GET_NETWORK_INFO"      },      { "name": "ohos.permission.SET_NETWORK_INFO"      },      { "name": "ohos.permission.INTERNET"      }]

"deviceConfig": {    "default": {      "process": "com.huawei.hiworld.example",      "supportBackup": false,      "network": { "cleartextTraffic": true      }    }  

CSS与HML

    
 
      
    
    
 
      
    
    立即登录    {{winfo}}

.container {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    left: 0px;    top: 0px;    width: 100%;    height: 100%;}.title {    font-size: 60px;    text-align: center;    width: 100%;    height: 40%;    margin: 10px;}@media screen and (orientation: landscape) {    .title { font-size: 60px;    }}@media screen and (device-type: tablet) and (orientation: landscape) {    .title { font-size: 100px;    }}

效果如下

 JS文件编写

因为priviewer中的输入框不支持输入，所以直接在js中填写好向后端法送的数据。编写之前要提前引用“querystring”。

npm install querystring

import router from '@ohos.router';import qs from "querystring";import fetch from '@system.fetch';export default {    data: { winfo: "llll"    },    inputAccout(e) { this.username = e.value    },    inputPassword(e) { this.password = e.value    },    onClick(){ // 发送网络请求 fetch.fetch({     url: `http://127.0.0.1:8000/login/homepage/`, // 网络请求的路径     data: qs.stringify({'username': "lqc404",'password': "123"}), //将数据转化为字符串，向后端发送的数据     responseType:"json", //请求的参数类型     method: "POST", //发送的网络请求类型     success:(resp)=> //发送成功后进行的操作     {  this.winfo = resp.data; // 将获取的数据赋值给winfo  console.log("返回的数据："+this.winfo) //在日志中打印  if(this.winfo = "验证成功"){ //如果验证成功跳转的页面      router.push({   uri:'#',      })  }     },     fail:(resp)=> // 发送失败后进行的操作     {  this.winfo = resp.data; // 将获取的数据赋值给winfo  console.log("获取数据失败："+this.winfo) //在日志中打印     } })    }}

后端配置

编写路由配置

主路由文件

from django.urls import path, includefrom login import viewsfrom login import urls as login_urlsurlpatterns = [    path('login/', include(login_urls, namespace="login"))]

app中的路由文件

from django.urls import pathfrom login.views import loginapp_name = "login"urlpatterns = [    path('homepage/', login.as_view())]

建表连接数据库

在models.py中编写如下代码

from django.db import models# Create your models here.class User(models.Model):    name = models.CharField('用户名', max_length=30,unique=True)    # 用户名不允许重复    password = models.CharField('密码', max_length=30)    def __str__(self): return "用户:" + self.name

然后在启用manage.py任务编写下面两行代码，依次运行

这里我在创建app的时候设置的名称是login

makemigrations login

migrate login

可以使用可视化工具Navicat写一下数据库中的数据

编写views.py

import pymysqlfrom rest_framework.views import APIViewfrom django.http import HttpResponsefrom login import modelsfrom login.models import Userclass login(APIView):    def post(self, request): # 获取前端数据 username = request.data.get("username") password = request.data.get("password") # 打印出前端数据 print(username) print(password) cur = con.cursor()  # 创建游标 sql = "select * from login_user where name =%s"  # 在数据库中查找符合要求的数据 values = (username) try:     if cur.execute(sql, values):  con.commit()  # 获取所有符合要求的记录列表  results = cur.fetchall()  # 获取到的列表对应列  for row in results:      Pusername = row[1]      Ppassword = row[2]      print(Pusername)      print(Ppassword)      # 如果前端的数据与后端的数据一样，返回验证通过      if password == Ppassword:   print("验证通过")   return HttpResponse("验证成功")      # 如果前端的数据与后端的数据不一样，返回验证失败      else:   print("验证失败") # 当数据库中找不到对应的账号名称时，打印错误信息并返回请求失败 except pymysql.Error as e:     print("查无此人" + str(e))     return HttpResponse("请求失败")

完成之后运行项目，在前端界面上发送请求得到如图 

 后端界面