Dayday up ---- python Day18

 

 

 1、JS 正则

　　test - 判断字符串是否符合规定的正则表达式

　　

　　exec - 获取匹配的数据

　　　　默认只拿第一个，以数组的方式拿到

　　　　

 　　　　分组匹配

　　　　

　　　　全局匹配

　　　　

　　　　/.../  用于定义正则表达式

　　　　/.../g 表示全局匹配

　　　　/.../i 表示不区分大小写

　　　　/.../m 表示多行匹配

　　　　多行匹配解释:

　　　　　　

　登陆注册验证实例:

　

 

　总结:

　　一般验证之类的如果可以在前端实现(浏览器级别做处理),能减少数据库请求

　　js:验证

　　后端: python 来实现

　事件执行顺序:

　　　默认事件(自带)先执行的有: input checkbox

　　　自定义先执行:

　　　　　　a 标签

　　　　　　input submit

2、组件(模板)

　　BootStrap  适用于全站(主站，后台管理)

　　jQueryUI　　js齐全 做后台管理可以使用

　　EasyUI　　 功能齐全,但代价大,存在ajax 操作,适用于后台管理

　　bxslider.com　　轮播图 

3、WEB框架

　　　　本质就是 socket

　　　　model view controller  数据库 模板文件 业务处理 简称MVC 对文件夹的分类，职责的划分

　　　　model template view　数据库 模板文件 业务处理 简称 MTV

4、Django (python 开发的web框架)

　　基于MTV

　　创建django 程序方式

　　　　1、使用命令创建

　　　　　　django-admin.exe startproject 程序名

　　　　2、使用pycharm创建

　　创建app方式

　　　　cd 工程名

　　　　python manage.py startapp app名

　　运行django方式

　　　　python.exe manage.py runserver 默认端口8000

　　　　设置端口: python.exe manage.py runserver 127.0.0.1:8001

　　目录结构:

　　　　mysite

　　　　　　-- mysite　　　　# 对整个程序进行设置

　　　　　　　　-- init

　　　　　　　　-- settings　　# 配置文件

　　　　　　　　-- url　　　　  # url对应关系

　　　　　　　　-- wsgi　　　　# 遵循WSGI规范, uwsgi + nginx

　　　　　　-- manage.py

　　wsgi: 一套规则

　　app目录结构:

　　　　migrations 　　记录数据库修改表结构操作

　　　　admin　　　　django 为我们提供的后台操作

　　　　apps　　　　　配置当前app

　　　　models　　　　orms　写指定的类,通过命令可以创建数据库结构

　　　　views　　　　　业务逻辑代码　

　　django 默认找.html文件目录是temaplates(所以在此目录下写前端页面即可)

　　静态文件(js/css等文件)生效方式:

　　　　在settings.py文件末尾设置

　　　　

　　访问页面的时候如果出现CSRF verification failed . Request aborted

　　将settings.py中MIDDLEWARE中'django.middleware.csrf.CsrfViewMiddleware',注释即可

 　　

 Django 生命周期

 

服务端获取用户提交信息:

　　方式一: 

　　　　request.POST['username']

　　方式二:

　　　　request.POST.get('username')

把数据返回给客户端:

　　return HttpResponse("字符串")

　　return render(request, "HTML 模板路径即*.html")

　　return redirect('只能填URL')

 

前端获取后端数据:

　　使用特殊的模板语言

　　{{ 变量 }}

　　{% for row in list %}

　　{% endfor %}

　　索引使用点(.),字典,列表等

　　判断:

　　　　{% if .. %}

　　　　{% else %}

　　　　{% endif %}

实例:

　　一、程序目录

　　

　　二 、配置文件

　　settings.py

　　模板　

TEMPLATE_DIRS = (
        os.path.join(BASE_DIR,'templates'),
    )

　　静态文件

STATICFILES_DIRS = (
        os.path.join(BASE_DIR,'static'),
    )

　　三、路由系统 urls.py　

from django.conf.urls import url
from django.contrib import admin
from hosts_manage import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login', views.login),
    url(r'^back_mange', views.back),
]

　　四、数据库模块使用sqlalchemy

　　数据库信息写在models.py　　

# Create your models here.
from django.db import models
from sqlalchemy import Table,Column,Integer,String,DATE,ForeignKey,create_engine
from sqlalchemy.orm import relationship
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker
engine = create_engine("mysql+pymysql://username:pwd@mysql_ip/hosts_manage?charset=utf8",
                       encoding='utf-8',)
Base = declarative_base()
class hosts_info(Base):
    __tablename__ = 'hosts_info'
    id = Column(Integer,primary_key=True)
    hostname = Column(String(64))
    ip = Column(String(64))
    port = Column(Integer)
    desc_info = Column(String(128))
    def __repr__(self):
        return self.hostname,self.ip,self.port,self.desc_info
Base.metadata.create_all(engine)  # 创建表结构
session_class = sessionmaker(bind=engine)  # 创建session 对象
session = session_class()  # 生成实例
session.commit()

　　五、视图函数 views.py

from django.shortcuts import render
from django.shortcuts import HttpResponse
from django.shortcuts import redirect
from sqlalchemy.orm import sessionmaker
from hosts_manage import models
# Create your views here.

# def index(request):
#     return HttpResponse("<h1>hosts_manage</h1>")
# def login(request):
#     if request.method == "POST":
#         user = request.POST['username']
#         pwd = request.POST['passwd']
#         print(user,pwd)
#     return render(request,"login.html")
def login(request):
    error_msg = ""
    if request.method == "POST":
        user = request.POST.get("username",None)
        pwd = request.POST.get("passwd",None)
        if user == 'root' and pwd == '123':
            return redirect('/back_mange')
        else:
            error_msg = "用户名或密码错误"
    return render(request,"login.html", {'error_msg': error_msg})
def back(request):
    Session_class = sessionmaker(bind=models.engine)  # 创建与数据库的会话session class ,注意,这里返回给session的是个class,不是实例
    session = Session_class()  # 生成session实例 #cursor
    if request.method == "POST":
        # 获取用户提交的数据 POST请求中
        ua = request.POST.get('hostname')
        # ua = request.POST['hostname']
        ea = request.POST.get('ip')
        ga = request.POST.get('port')
        da = request.POST.get('desc_info')
        print(ua,ea,ga,da)
        info_obj = models.hosts_info(hostname=ua,ip=ea,port=ga,desc_info=da)
        session.add(info_obj)
        session.commit()
    date_all = session.query(models.hosts_info.id, models.hosts_info.hostname, models.hosts_info.ip,
                             models.hosts_info.port, models.hosts_info.desc_info).all()
    return render(request,"back_mange.html",{'hosts_all': date_all})

　　六、html文件 在templates目录中　　

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/css/style.css" rel='stylesheet' type='text/css'/>
    <script src="/static/js/jquery-1.12.4.js"></script>
</head>
<body>
    <div class="login-form">
            <div class="close"></div>
            <div class="head-info">
                <label class="lbl-1"> </label>
                <label class="lbl-2"> </label>
                <label class="lbl-3"> </label>
            </div>
            <div class="clear"></div>
            <div class="avtar">
                <img src="/static/images/avtar.png"/>
            </div>
            <form action="/login" method="POST">
                <input type="text" class="text" value="Username" onfocus="this.value = '';"
                       name="username" onblur="if (this.value == '') {this.value = 'Username';}">
                <input type="password" value="Password" onfocus="this.value = '';" name="passwd"
                       onblur="if (this.value == '') {this.value = 'Password';}">
                {#     onblur 当用户离开输入字段时验证 onfocus当用户获取焦点时触发        #}
                <div><span>{{ error_msg }}</span></div>
                <div class="signin">
                    <input type="submit" value="Login">
                </div>
            </form>
    </div>
    <div class="copy-rights"></div>
    <script>
        $(document).ready(function (c) {
            $('.close').on('click', function (c) {
                $('.login-form').fadeOut('slow', function (c) {
                    $('.login-form').remove();
                });
            });
        });
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
            }, false);
        function hideURLbar() {
            window.scrollTo(0, 1);
    }
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manager</title>
    <link rel="stylesheet" href="/static/css/back_style.css"/>
    <link rel="stylesheet"  href="/static/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <!-- link:css -->
</head>
<body>

    <div class="page_header">
        <div class="left logo">
            <img src="/static/images/logo.png" alt="logo" >
        </div>
        <div class="user right">
            <a href="#" class="a">
                <img src="/static/images/avtar.png" alt="头像" />
            </a>
            <div class="b">
                <a href="#">我的资料</a>
                <a href="#">注销</a>
            </div>
        </div>
        <div class="icons right">
            <i class="fa fa-commenting-o" aria-hidden="true"></i>
            <span class="message">5 </span>
        </div>
        <div class="icons right">
            <i class="fa fa-bell-o" aria-hidden="true"></i>
        </div>
    </div>
    <div class="page_content">
        <div class="menu left">
        </div>
        <div class="content left">
            <div class="inp_sty">
                <input type="button" value="添加" class="add"/>
            </div>
            <div class="list_sty">
                <table border="1px;">
                    <thead>
                        <tr>
                            <th>选择</th>
                            <th>主机名</th>
                            <th>ip</th>
                            <th>端口</th>
                            <th>描述信息</th>
                        </tr>
                    </thead>
                        <tbody id="tb">
                            {% for row in hosts_all %}
                                <tr class="h">
                                    <td><input type="checkbox"></td>
                                    <td target="hostname">{{ row.hostname }}</td>
                                    <td target="ip_addr">{{ row.ip }}</td>
                                    <td target="port">{{ row.port }}</td>
                                    <td target="desc">{{ row.desc_info }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
            </div>
            <div class="inp_sty">
                <input type="button" value="全选" id="checkAll"/>
                <input type="button" value="反选" id="reverseAll"/>
                <input type="button" value="取消" id="cancleAll"/>
                <input type="button" value="删除" id="deliem"/>
            </div>
        </div>
        </div>
    <div class="hide_mode hide"></div>
    <div class="add_mode hide">
        <div style="margin: 20px;">
            <form action="/back_mange" method="POST" target="_blank">
                <table>
                    <tr>
                        <td>主机名:</td>
                        <td><input type="text" name="hostname"/></td>
                    </tr>
                    <tr>
                        <td>ip:</td>
                        <td><input type="text" name="ip"/></td>
                    </tr>
                    <tr>
                        <td>端口:</td>
                        <td><input type="text" name="port"/></td>
                    </tr>
                    <tr>
                        <td>描述:</td>
                        <td><input type="text" name="desc_info"/></td>
                    </tr>
                </table>
                <input type="submit" value="确认" class="confirm" id="submitInput">
                <input type="button" value="取消" class="cancle">
            </form>
        </div>
    </div>
    <div class="page_footer">
        <div class="info"><span>onlyone 制作</span></div>
    </div>
    </form>
    <script src="/static/js/jquery-1.12.4.js"></script>
    <script src="/static/js/back_js.js"></script>
</body>
</html>

　　七、静态文件 static目录(css,js)