Mei cole studios - fifth training DjangoWeb application framework + MySQL database

目录

前言

1.App 登录请求与实现

1.1.views.py连接数据库

1.2.前端编程

1.2.建表（不依赖DJango）

1.3.后端编程

2.效果展示

总结

---

前言

本文记录梅科尔工作室IoT组DjangoWeb 应用框架+MySQLDatabase of fifth training notes,Mainly including Hongmeng app 登录请求与实现（另外一种方式：不使用 model.py 文件,Table migration is not performed）And dynamically read the data content in the text box 2．Django 后端数据验证（MySQL 数据库数据查询）

这里感谢潘学姐的讲解！辛苦啦！

---

1.App 登录请求与实现

1.1.views.py连接数据库

代码如下：

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

1.2.前端编程

Hml代码如下：

<div class="cb-container">
    <div class="cb-title">
        <text class="cb-title-text">
            登录测试
        </text>
    </div>
    <image src="../../common/images/123.png"></image>
    <div class="container1">
        <div>
            <input name="username" class="input" type="text" maxlength="10" placeholder="用户名" onchange="inputAccount"/>
        </div>
    </div>
    <div class="container2">
        <div>
            <input name="password" class="input" type="password" maxlength="10" placeholder="密码" onchange="inputPassword"/>
        </div>
    </div>
    <div class="container">
        <button onclick="onClick" class="btn-map" style="background-color: darkturquoise; height: 50px;">立即登录</button>
    </div>
    <div>
        <text>
            {
   {winfo}}
        </text>
    </div>
</div>

效果如下： 

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:8007/student/AppReq1/`, //后端路径,一定不能错,用的是反单引号
            data: qs.stringify({'username':'123456','password':'12345'}),//验证,将字符串转发给后端,后端会受到这个请求
            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)//打印出数据
            }
        });
    }
}

---

css代码不再展示,Badly written hahaha,头疼！

1.2.建表（不依赖DJango）

 这里使用的是Navicat,在左侧栏,Select the database where you want to create the table,Right-click and select New Table,原理就是跳过DjangoOperate directly on the database,不需要代码,如下所示：

注意,建好表之后,The back-end code should correspond to the table name and the data in the table.

1.3.后端编程

new path login

from django.urls import path
from . import views
from student.views import AppReq1,login
app_name ='student'
urlpatterns = [
    path('AppReq1/', AppReq1.as_view()),
    path('login/', login.as_view()),
]

views.py新增login类

class login(APIView):  # login类视图
    def post(self,request):  # 创建post方法
        username = request.data.get("username")  # Get frontend feedback valueusername
        password = request.data.get("password")  # Get frontend feedback valuepassword
        print(username)
        cur = ct.cursor()  # 创建游标
        sql = "select * from login where name =%s"  # sqlStatement to query data table data,to be the same as the datasheet
        values = (username)
        try:
            if cur.execute(sql, values):  # 执行sql语句
                ct.commit()
                results = cur.fetchall()
                for row in results:
                    # The obtained list corresponds to the column,注意id为第0列
                    Pusername = row[1]  # 获取数据name
                    Ppassword = row[2]  # 获取数据pwd
                    print(Pusername)  # 打印PusernameVerify whether to get it
                    print(Ppassword)  # 打印PpasswordVerify whether to get it

                if password ==Ppassword:  # 验证密码是否正确
                    print("账号密码验证通过")
                    return HttpResponse('Welcome honorable'+Pusername)
            else:
                print('查无此人！')
        except pymysql.Error as e:
            print("查无此人："+str(e))
            return HttpResponse("请求失败")

 注意点：The data key-value pair that the front end feeds back to the back end“键”,Must correspond to the backend,The data in the table obtained by the backend must correspond to the data in the table.

2.效果展示

 前端展示：

后端展示： 

---

总结

The above is the content of the notes and effects of the fourth training to show this article,The main thing is the correspondence between the front and back ends and the data,Thank you Miss Pan！！！