Day17 表单验证、滚动菜单、WEB框架

时间 2019-12-18

标签 day17 day 表单验证滚动菜单 web 框架栏目 HTML 繁體版

原文原文链接

1、表单验证的两种实现方式javascript

一、DOM绑定css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(DOM绑定)</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交" onclick="return CheckValid();" />
             <!--<input type="submit" value="提交" />-->
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckValid() {
            //找到form标签下的全部须要验证的标签
            //$('form .c1')
            //$('form input[type="text"],form input[type="password"]')
            //循环全部须要验证的标签，获取内容
            //移除错误提示
            $('form .item span').remove();
            var flag = true;
            $('form .c1').each(function () {
                //每个元素执行一次匿名函数
                //this：当前元素
                //console.log(this,$(this));
                var val = $(this).val();
                if(val.length <=0){
                    var label = $(this).attr('label');
                    var tag = document.createElement('span');
                    tag.innerText = label + "不能为空";
                    $(this).after(tag);
                    flag = false;
                }
            });
            return flag;
        }
    </script>
</body>
</html>

View Code

二、jQuery绑定html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(jQuery绑定)</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //当页面加载完成后自动执行
            BindCheckValid();
        });

        function BindCheckValid() {
            $('form :submit').click(function() {
                //只要点击submit按钮，执行此处内容，找到form标签下的全部须要验证的标签
                $('form .item span').remove();
                var flag = true;
                $('form .c1').each(function () {
                    //每个元素执行一次匿名函数
                    //this：当前元素
                    //console.log(this,$(this));
                    var val = $(this).val();
                    if (val.length <= 0) {
                        var label = $(this).attr('label');
                        var tag = document.createElement('span');
                        tag.innerText = label + "不能为空";
                        $(this).after(tag);
                        flag = false;
                        return false;
                    }
                });
                return flag;
            });
        }
    </script>
</body>
</html>

View Code

2、jQuery补充前端

一、jQuery中each返回值java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中each返回值</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        function BindCheckValid(){

            $.each([11,22,33,44],function(k,v){
                if(v == 22){
                    //return ; // continue
                    return false; //break
                }
                console.log(v);
            })
        }

        BindCheckValid();

    </script>
</body>
</html>

View Code

二、jQuery扩展python

扩展1：jquery

extend1.jsweb

/**
 * Created by WangHuafeng on 2016/10/15.
 */
(function (jq) {
    jq.extend({
        'radar' : function (arg) {
            console.log(arg);
        }
    });
    function f1() {

    }
})(jQuery);
//一、自执行；二、闭包
/*
a = function (jq) {
    //调用时没有选择器
    jq.extend({
        'radar' : function (arg) {
            console.log(arg);
        }
    });
    function f1() {

    }
};
a(jQuery);
    */

View Code

extend1.html正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展1</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="extend1.js"></script>
    <script>
        $.radar('welcome radar 扩展1');
    </script>
</body>
</html>

View Code

扩展2：数据库

extend2.js

/**
 * Created by WangHuafeng on 2016/10/15.
 */

(function (jq) {
    //调用的时候能够有选择器
    $.fn.extend({
        'radar1' : function (arg) {
            //this：代指前面的选择器
            console.log(arg);
        }
    });
    function f2() {

    }
})(jQuery);

/*
b = function () {
    //调用的时候能够有选择器
    $.fn.extend({
        'radar1' : function (arg) {
            //this：代指前面的选择器
            console.log(arg);
        }
    });
    function f2() {
        
    }
};
b(jQuery);
*/

View Code

extend2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展2</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="extend2.js"></script>
    <script>
        $('form').radar1('welcome radar1 扩展2');
    </script>
</body>
</html>

View Code

三、表单验证jQuery扩展

commons.js

/**
 * Created by WangHuafeng on 2016/10/15.
 */
(function (jq) {
    jq.extend({
        valid:function (form) {
            //#form1    $('#form1')
            jq(form).find(':submit').click(function () {
                jq(form).find('.item span').remove();
                var flag = true;
                jq(form).find(':text,:password').each(function () {
                    var val = $(this).val();
                    if (val.length <= 0) {
                        var label = $(this).attr('label');
                        var tag = document.createElement('span');
                        tag.innerText = label + "不能为空";
                        $(this).after(tag);
                        flag = false;
                        return false;//至关于break
                    }
                });
                return flag;
            });
        }
    });
})(jQuery);

View Code

j1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(jQuery扩展)</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form id="form1">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
            </div>
            <input type="submit" value="提交" />
        </form>
        <form id="form2">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
            </div>
            <input type="submit" value="提交" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script src="commons.js"></script>
    <script>
        $(function () {
            $.valid('#form1');
            //valid:$('#form1')
        });
    </script>
</body>
</html>

View Code

四、表单验证自定义属性

commons2.js

/**
 * Created by WangHuafeng on 2016/10/15.
 */
(function (jq) {
    function ErrorMessage(inp,message) {
        var tag = document.createElement('span');
        tag.innerText = message;
        inp.after(tag);
    }
    jq.extend({
        valid:function (form) {
            jq(form).find(':submit').click(function () {
                jq(form).find('.item span').remove();
                var flag = true;
                jq(form).find(':text,:password').each(function () {

                    var require = $(this).attr('require');
                    if(require){
                        var val = $(this).val();
                        if (val.length <= 0) {
                            var label = $(this).attr('label');
                            ErrorMessage($(this),label + "不能为空");
                            flag = false;
                            return false;//至关于break
                        }
                        var minLen = $(this).attr('min-len');
                        if(minLen){
                            var minLenInt = parseInt(minLen);
                            if(val.length<minLenInt){
                                var label = $(this).attr('label');
                                ErrorMessage($(this),label + "最小长度为"+ minLen);
                                flag = false;
                                return false;//至关于break
                            }
                            //json.stringfy()
                            //JSON.parse()  字典转换为字符串
                        }
                        var phone = $(this).attr('phone');
                        if(phone){
                            //用户输入内容是否为手机号码格式
                            var phoneReg = /^1[3|5|8]\d{9}$/;
                            if(!phoneReg.test(val)){
                                var label = $(this).attr('label');
                                ErrorMessage($(this),label + "格式错误");
                                flag = false;
                                return false;//至关于break
                            }
                        }
                        //自定义标签格式
                        //验证
                    }
                });
                return flag;
            });
        }
    });
})(jQuery);

View Code

j2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(自定义属性)</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form id="form1">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6" />
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
            </div>
            <div class="item">
                <input class="c1" type="text" name="tel" label="手机号码" require="true" phone="true" />
            </div>
            <input type="submit" value="提交" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script src="commons2.js"></script>
    <script>
        $(function () {
            $.valid('#form1');
            //valid:$('#form1')
        });
    </script>
</body>
</html>

View Code

3、滚动菜单

scroll_menu.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }
        
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            
            <div class="content">
                <div menu="function1" class="section" style='background-color:green;'>
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section" style='background-color:yellow;'>
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section" style='background-color:red;'>
                    <h1>第三章</h1>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        
        $(function(){
            // 自动执行
            Init();
        });
        
        
        function Init(){
        
            
            $(window).scroll(function() {
                // 监听窗口滚动事件
                
                
                // 获取滚动条高度
                var scrollTop = $(window).scrollTop();
                
                
                // 当滚动到50像素时，左侧带菜单固定
                if(scrollTop > 50){
                    $('.catalog').addClass('fixed');
                }else{
                    $('.catalog').children().removeClass('active');
                    $('.catalog').removeClass('fixed');
                }

                // 循环全部的内容
                $('.content').children().each(function(){
                    // 当前标签距离顶部高度
                    var offSet = $(this).offset(); // 高度，左边有多远
                    // offSet.top 
                    // offSet.left
                    
                    // 自身高度
                    var height = $(this).height();
                    
                    //offSet<滚动高度<offSet+height
                    

                    // 当前内容位于用户阅览区
                    if(scrollTop>offSet.top && scrollTop< offSet.top + height){
                        // $(this) 当前内容标签
                        /*
                        var target = $(this).attr('menu');
                        $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
                        return false;
                        */
                        
                        var docHeight = $(document).height();
                        var winHeight = $(window).height();
                        // 若是，滚轮到达底部，则显示最后一个菜单
                        if(docHeight == winHeight+scrollTop)
                        {
                            $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
                        }else{
                            var target = $(this).attr('menu');
                            $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
                        }
                        return false;
                        
                    }
                });

            });


        }

    </script>
</body>
</html>

View Code

总结：

jQuery示例：
    表单验证，jQuery扩展
    一、回顾基础内容
    
    二、dom事件绑定
    
    三、jquery事件绑定
    
    四、$.each     return false 表示break;
    
    五、jquery扩展方法：
        两种方式：
            
    六、自定义jQuery扩展的正确方法：
        a. 自执行
        b. 闭包
    
    七、jquery扩展实现基本验证
    
        a. 支持是否容许为空
        
        b. 长度
        
        c. 正则表达式
            定义正则表达式
                reg = /正则表达式/  *****
                g
                i
                m ==> 特殊
                
            利用正则匹配
                reg.test(字符串)   *****
                reg.exec(字符串)
                    全局
                    非全局
            字符串三个方法：
                search
                match
                replace
                    -- 特殊符号

    滚动菜单
        页面布局（absolute）
        监听滚动事件：
            若是滚动>60,菜单固定
            若是滚动<60,菜单固定取消
    
前端插件：
    fontawsome
    
    easyui    
    jqueryui
    bootstrap
    -- 引入css
    
    -- 引入jQuery（2.x，1.12）
    -- 引入js

    -- bootstrap模版
    
    bxslider
    jquery.lazyload

View Code

4、WEB框架

#!/usr/bin/env python
#coding:utf-8
  
import socket
  
def handle_request(client):
    buf = client.recv(1024)
    client.send("HTTP/1.1 200 OK\r\n\r\n")
    client.send("Hello, Seven")
  
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8000))
    sock.listen(5)
  
    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()
  
if __name__ == '__main__':
    main()

View Code

WSGI（Web Server Gateway Interface）是一种规范，它定义了使用python编写的web app与web server之间接口格式，实现web app与web server间的解耦。

python标准库提供的独立WSGI服务器称为wsgiref。

经过python标准库提供的wsgiref模块开发一个本身的Web框架

#!/usr/bin/env python
#coding:utf-8
from wsgiref.simple_server import make_server
 
def index():
    return 'index'
 
def login():
    return 'login'
 
def routers():
     
    urlpatterns = (
        ('/index/',index),
        ('/login/',login),
    )
     
    return urlpatterns
 
def RunServer(environ, start_response):
    start_response('200 OK', [('Content-Type', 'text/html')])
    url = environ['PATH_INFO']
    urlpatterns = routers()
    func = None
    for item in urlpatterns:
        if item[0] == url:
            func = item[1]
            break
    if func:
        return func()
    else:
        return '404 not found'
     
if __name__ == '__main__':
    httpd = make_server('', 8000, RunServer)
    print "Serving HTTP on port 8000..."
    httpd.serve_forever()

View Code

框架demo

#!/usr/bin/env python
#coding:utf-8
# Author: wanghuafeng

from wsgiref.simple_server import make_server

def i1():
    return 'i1'

def i2():
    return 'i2'

def RunServer(environ, start_response):
    start_response('200 OK', [('Content-Type', 'text/html')])
    #获取用户url，根据用户url响应不一样内容
    #environ，封装了用户全部请求内容
    #路由系统
    if environ.url == 'index':
        return i1()
    elif environ.url == 'login':
        return i2()
    else:
        return "404"

    return '<h1>Hello,Web!</h1>'
if __name__ == '__main__':
    httpd = make_server('', 8000, RunServer)    #IP、端口、函数名
    print("Serving HTTP on port 8000...")
    httpd.serve_forever()

View Code

处理用户请求      放置HTML模板           操做数据库
 Controller      Views                 Models
 MVC框架

Views            Template              Models
 MTV框架

5、Django

一、安装Django

python -m pip install django 
python3 -m pip install django
添加环境变量
C:\SourceForge\Python35\Lib\site-packages\django\bin

二、建立Project

django-admin startproject D:\Django\mysite

mysite目录

mysite
    - settings.py    #配置文件
    - urls.py        #路由系统
    - wsgi.py        #WSGI
    - manage.py      #django程序启动文件

三、建立APP(一个Project下能够建立多个APP)

cd mysite
python3 manage.py startapp cmdb

四、配置路由映射和服务请求

from django.conf.urls import url
from django.contrib import admin
from cmdb import views

urlpatterns = [
    #url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
]

urls.py

from django.shortcuts import render
from django.shortcuts import HttpResponse
# Create your views here.
def index(request):
    return HttpResponse('123')

views.py

五、启动Django程序

python3 manage.py runserver 127.0.0.1:8000

访问：http://127.0.0.1:8000/index/

显示：123

六、返回html

templates中建立index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="color: red;font-size: 50px;">Django</h1>
</body>
</html>

index.html

from django.shortcuts import render
from django.shortcuts import HttpResponse
# Create your views here.
def index(request):
    #return HttpResponse('123')
    return render(request,'index.html')

views.py

七、静态文件配置

建立statics目录将jquery-1.8.2.min.js文件放置到该目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="color: red;font-size: 50px;">Django</h1>
    <script src="/fff/jquery-1.8.2.min.js"></script>
</body>
</html>

index.html

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/

#静态文件引入时的前缀
STATIC_URL = '/fff/'
#静态文件目录
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'statics'),
)

settings.py

八、模板引擎

from django.shortcuts import render
from django.shortcuts import HttpResponse
# Create your views here.

#先设置默认值
USER_INPUT = [
    {'user':'u1','email':'e1'},
    {'user':'u2','email':'e2'},
]
def index(request):

    #判断用户是不是POST请求
    if(request.method == 'POST'):
        user = request.POST.get('user',None)
        email = request.POST.get('email',None)
        #print(user, email)
        temp = {'user':user,'email':email}
        #将用户输入的数据加入全局列表中
        USER_INPUT.append(temp)
        #request.POST.get('pwd',None)
    #return HttpResponse('123')
    #模板引擎
    #获取index.html模板 + {'data' : USER_INPUT} ==》渲染（把for循环转换为python的for循环）
    #最终获得一个替换完成的字符串
    return render(request,'index.html',{'data' : USER_INPUT})

views.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户输入：</h1>
    <form action="/index/" method="POST">
        <input type="text" name="user">
        <input type="text" name="email">
        <input type="submit" value="提交">
    </form>
    <h1>数据展现：</h1>
    <table border="1">
        {% for item in data %}
            <tr>
                <td>{{ item.user }}</td>
                <td>{{ item.email }}</td>
            </tr>
        {% endfor %}
    </table>
    <script src="/fff/jquery-1.8.2.min.js"></script>
</body>
</html>

index.html

九、数据库操做

from django.db import models

# Create your models here.
class UserInfo(models.Model):
    #字符串类型必须指定长度
    user = models.CharField(max_length=32)
    email = models.CharField(max_length=32)

models.py

执行命令建立数据库表结构：

python3 manage.py makemigrations
python3 manage.py migrate

注册APP

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #注册APP
    'cmdb',
]

settings.py

from django.shortcuts import render
from django.shortcuts import HttpResponse
from cmdb import models
# Create your views here.

def index(request):

    #判断用户是不是POST请求
    if(request.method == 'POST'):
        u = request.POST.get('user',None)
        e = request.POST.get('email',None)
        #添加数据到数据库
        models.UserInfo.objects.create(user=u, email=e)


    #获取数据库的数据
    data_list = models.UserInfo.objects.all()
    #[UserInfo对象，UserInfo对象，UserInfo对象，UserInfo对象，...]
    # for item in data_list:
    #     print(item.user,item.email)
    return render(request,'index.html',{'data':data_list})

views.py

从新启动服务，登陆访问：http://127.0.0.1:8000/index

十、总结

安装：
        python -m pip install django 
        python3 -m pip install django
        添加环境变量
        C:\SourceForge\Python35\Lib\site-packages\django\bin
        
    1、建立mysite项目
    django-admin startproject D:\Django\mysite
    mysite
        mysite
            - settings.py    #配置文件
            - urls.py    #路由系统
            - wsgi.py    #WSGI
        manage.py    #django程序启动文件

    2、建立APP
    cd mysite
    python3 manage.py startapp cmdb

    3、编写代码
     urls.py
     view.py 函数

    4、启动Django程序
     python3 manage.py runserver 127.0.0.1:8000

    5、使用模板
     settings配置
     render(request,'路径')

    6、静态文件的配置(自定义目录)
     STATIC_URL = 'fff'
     STATICFILES_DIRS = (
         os.path.join(BASE_DIR,'statics'),
     )
     statics目录放置静态文件
     <script src="/fff/jquery-1.8.2.min.js"></script>

    CSRF:跨栈请求伪造

    7、ORM
    models.py
    from django.db import models

    # Create your models here.
    class UserInfo(models.Model):
        #字符串类型必须指定长度
        user = models.CharField(max_length=32)
        email = models.CharField(max_length=32)

    注册APP
    # Application definition

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        #注册APP
        'cmdb',
    ]

    执行命令：
    python3 manage.py makemigrations
    python3 manage.py migrate
    ====>数据库已建立

    8、操做数据库
    建立:
         models.类.objects.create(user=u, email=e)
         models.类.objects.create(user=u, email=e)
         models.类.objects.create(user=u, email=e)
         models.类.objects.create(user=u, email=e)
    操做：
        models.类.objects.all()