Django&sql_lite

2018-11-12 本文已影响0人山高路远_海深不蓝

Django&base

项目背景:

创建两个网页完成:

注册和登录,注册信息放到json数据库中
注册完成后跳转到登录页面
登录时若输入的用户名不存在则给出注册提示

创建应用

创建项目

打开命令行进入项目的根目录(例如C:\Python_Project\Django>)输入命令
django-admin startproject project1

创建应用

进入创建的项目的目录(cd project1)下,输入命令:
python manage.py startapp app1

创建模板文件夹

在pycharm中的project1\app1中新建文件夹templates

Django默认的模板文件夹,将来进行网页渲染时从此文件夹里查找HTML文件(查找深度包含其子集目录)
注意文件名不能写错
创建静态文件夹

在project1\app1中创建文件夹static

用来存放一些网页外部引用的资源(app1私有),如果是其他应用也需要的文件应放到项目下的公共文件夹,公共文件夹见下方
注意文件名static不能写错
创建项目公共目录

在project1中创建文件夹public

用以存放同一项目中各应用所需要的公共资源
此文件名可以自定义
移动路由

1.拷贝project1\project1中的urls.py文件到app1中,只保留如下内容

from django.urls import path
urlpatterns = []

2.同时修改原urls.py文件(project1\project1\urls.py)

from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('app1/', include('app1.urls')),
]

修改设置文件

1.在project1\project1\setting.py中添加应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app1',
]

2.修改DATABASE设置(此项忽略,这是mysql的设置)

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'UserInfo',
        'USER': 'root',
        'PASSWORD': 'lztv',
        'HOST': '127.0.0.1',
        'PORT': 3306
    }
}

3.在此文件末尾添加静态文件和公共文件的路径

# 设置静态文件路径
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# 设置公共文件路径
STATICFILES_DIRS = (os.path.join(BASE_DIR,'public'),)

注意STATICFILES_DIRS为元组类型的数据,添加单项时必需加','

目录结构

考虑到多人共建项目防止命名重复,在static和templates文件夹中新建与自己应用同名的文件夹(也可以使用其他名字,但建议使用自己的应用名)

image.png

数据库创建

创建模型

在app1\models.py文件中创建表格信息

class Accounts(models.Model):
    username = models.CharField(primary_key=True, max_length=20)
    password = models.CharField(max_length=20)

primary_key: 设置主键
max_length: 数据的最大长度

在app1\admin.py文件中添加

# 导入所有使用from .models import *
from .models import Accounts
# 该文件是管理员文件,用来完成数据库数据模型的注册保证服务器端数据库和数据模型实现数据同步
admin.site.site_header = 'App1'
admin.site.site_title = 'app1'
# 将account数据模型注册进入数据库
admin.site.register(Accounts)

数据库表格迁移

迁移初始化
python manage.py makemigrations

image.png

执行迁移：
python manage.py migrate

创建超级管理员
python manage.py createsuperuser

输入相应信息

image.png

使用管理员信息登录

127.0.0.1:8000/admin

修改表格信息

修改user的数据类型
password = models.CharField(max_length=20)
更新修改

C:\Python_Project\Django\database>python manage.py makemigrations
C:\Python_Project\Django\database>python manage.py migrate

Options

前端部分

{% load static %}

加载项目的静态文件,使得网页中可以通过{% static path%}的形式访问项目中的static文件或公共文件

例如:
{%static 'JS/jquery.js'%}
可以访问static或者公共目录下的JS文件夹下面的文件

注意:
如果访问的是公共目录下的文件,需要先在setting.py中添加如下字段(public为自建的公共目录)
STATICFILES_DIRS = (os.path.join(BASE_DIR,'public'),)
{% csrf_token %}

生成csrf验证,用于form表单通过post向后台发送数据时标识表单有csrf验证(实际还未有)

{% static 'JS/csrf.js'%}

csrf.js为生成csrf验证码的文件,内置有一个create_csrf()函数

$('form').serialize()

form表单序列化,

网页&数据库

实现前端和后台数据库间的通信

1.在templates中创建两个网页login和regist

在views.py中实现网页的渲染

from django.shortcuts import render
# 渲染登录页面
def show_login(request):
    return render(request, 'app1/login.html')
# 渲染注册页面
def show_regist(request):
    return render(request, 'app1/regist.html')

2.在app1/urls.py中设置路由

写法有两种:

方式一:

from .views import *
urlpatterns = [
    path('show_login/', show_login, name='show_login'),
    path('show_regist/', show_regist, name='show_regist'),
]

方式二:

from app1 import views
urlpatterns = [
    path('show_login/', views.show_login, name='show_login'),
    path('show_regist/', views.show_regist, name='show_regist'),
]

3.编辑登录页面

HTML文件内容

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="{% static 'app1/CSS/login.css'%}">
</head>
<body>
    <form>
      <!--{% csrf_token %}-->
        <div>
            用户名: <input type="text" name="user">
        </div>
        <div>
            <span style="letter-spacing: 1em">密</span>码:
            <input type="password" name="passw">
        </div>
        <div>
            <input type="submit" value="登录">
        </div>
        <div>
            <a href="{%url 'show_regist'%}" target="_blank">新用户注册</a>
        </div>
    </form>
</body>

内容解读:

{% load static %}

为网页提供访问工程目录中的静态文件夹的权限
<link rel="stylesheet" href="{% static 'app1/CSS/login.css'%}">

访问工程目录下的app1文件夹下的css文件

 注意: 
格式必需为{% static 'path'%};
潜在坑点:
'%'号必需紧贴'{}',否则会导致路径解析失败
{% csrf_token %}

生成csrf_token验证
<a href="{%url 'show_regist'%}" target="_blank" >

{%url 'show_regist'%}:
访问app1/urls.py中设置的name为show_regist的路由所对应的views.py中相关方法

app1/CSS/login.css文件内容

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}
form{
    width: 300px;
    margin: 100px auto;
    border: 1px solid cornflowerblue;
    border-radius: 10px;
    text-align: center;
}
input{
    width: 180px;
    height: 30px;
    outline: none;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 0 10px;
}
input:focus{
    border: 2px solid cornflowerblue;
}
input[type='submit']{
    width: 260px;
    height: 40px;
    color: white;
    border: 1px solid cornflowerblue;
    background: cornflowerblue;
}
div{
    margin: 20px 0;
}
a{
    font-size: 14px;
}
a:hover{
    color: red;
    text-decoration: underline;
}

当前页面效果

image.png

JS代码段:

$("input[type='submit']").on('click', function (event) {
        event.preventDefault();
    //    获取form表单数据
        let paras = $('form').serialize();
        create_csrf();
    //    发送ajax请求
        $.ajax({
            url: '{%url "login_account"%}',
            type:"post",
            data: paras,
            success:function (res) {
                res  = JSON.parse(res);
                console.log(res.code);
                if(res.code==200){
                //    登录成功
                    alert('登录成功!');
                }
                else if(res.code == 300) {
                    let btn = confirm('用户名不存在,立即注册!');
                    if (btn) {
                        window.location.href = '{%url "show_regist"%}';
                    }
                    else {
                        alert('登录失败!');
                    }
                }
                else if(res.code == 400){
                    alert('密码错误!');
              }
          }
      })
  })

Django&sql_lite

Django&base

创建应用

目录结构

数据库创建

创建模型

数据库表格迁移

Options

前端部分

网页&数据库

猜你喜欢

热点阅读