djangoWeb应用框架+MySQL数据5

最新推荐文章于 2022-09-26 22:53:22 发布

辞浔

最新推荐文章于 2022-09-26 22:53:22 发布

阅读量350

点赞数

文章标签： django python 后端

本文链接：https://blog.csdn.net/m0_62945870/article/details/126356729

版权

1. models.py文件设置相关变量类型
- 1.1 存数据库类型
  - CharField是字符串类型，所以特殊符号、数字都可以保存（必须设置max_length参数）
  - BooleanField是布尔类型，布尔类型=tinyint(1)（不能为空，可添加Blank=True）
  - IntegerField是整型
  - django框架模型之models常用字段、属性及异常处理：(43条消息) Django 05. django框架模型之models常用字段、属性及异常处理_weixin_30402085的博客-CSDN博客
2.迁移数据库
- 2.1 创建app（Django必须依赖app才能创建表）
  - 创建app输入终端命令：
    - python manage.py startapp web(web为创建app的名字）
- 2.2 settings.py中添加创建的app
  - 在settings.py文件中配置刚刚创建的app信息
- 2.3 迁移
  - 执行命令，迁移数据库到Mysql

3.相关代码讲解

3.1 append( )函数使用详解
- 基本用法：
  - append() 函数可以向列表末尾添加元素
  - 语法：
    - list.append( element )为任何类型元素
  - 用法：
    - 列表末尾添加任意类型元素
    - 输出：
  - 注意： append() 函数添加的元素在列表的末尾而不是任意位置

3.2 前端页面代码：

hml文件：

<div class="container">
    <div class="title">
        <text>Welcome!</text>
    </div>

    <div class="touxiang">
        <image class="images" src="common/images/pic1.jpg"></image>
    </div>

    <div class="middle">
        <div class="input-block">
            <input id="username" class="input" type="text" maxlength="10" placeholder="用户名" onchange="inputAccount"></input>
        </div>
    </div>

    <div class="down">
        <div class="input-block">
            <input id="password" class="input" type="text" maxlength="10" placeholder="密码" onchange="inputPassword"></input>
        </div>
    </div>

    <div class="denglu-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>

css文件代码：

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

.input{
    width: 70%;
    height: 6%;
    font-size: 15px;
    margin-top: 10px;
    border-radius: 20px;
}

.btn{
    margin-top: 10px;
    height: 7%;
    width: 35%;
}

.text1{
    font-size: 20px;
    justify-content: center;
    margin-top: 10px;
    font-size: 20px;
}

.images{
    height: 30%;
    width: 90%;
    border-radius: 50px;
}

js文件代码：

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

export default {
    data:{
        winfo:"" //定义winfo用于存放后端反馈数据
    },
    inputAccount(e){
        this.username = e.value;
    },
    inputPassword(e){
        this.password = e.value;
    },
    onClick(){
        fetch.fetch({
//            url:`http://127.0.0.1:8007/Person/login/`,
            url:`http://127.0.0.1:8000/Person/login/`,  //路径
            data: qs.stringify({'username':'123','password':'*******'}),//验证，向后端发送请求
            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)//打印出数据
            }
        });
    }
}

效果展示：