python全栈 part2 - 004 前端补遗,Django

作者: drfung | 来源:发表于2018-01-09 14:49 被阅读35次

前端基础知识补遗

JS正则

test: 判断字符串是否符合规定;

rep = /\d+/;
rep.test("sdfasdfasdfs");
# true

rep = /^d+$/;
rep.test("sdfasdfa");
# true

exec: 获取匹配的数据;

rep = /\d+/;
str = "wangshen_67_houyafa_20"
rep.exec(str)
# ["67"]

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/;
# ["JavaScript", "Script"]

JavaScript is more fun than Java or JavaBeans!
var pattern = \bJava(\w*)\b/g;
# ["JavaScript"]
# ["Java"]
# ["JavaBeans"]
# null

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/g;
# ['JavaScript','Script']
# ['Java', ""]
# ["JavaBeans", "Beans"]
# null

多行匹配: 默认就是多行匹配 ^$

登录注册验证

默认事件先执行: checkbox
自定义先执行: a submit

<form>
    <input type='type' />
    <input type='password' />
    <input type='submit' />
</form>

$(':submit').click(function(){
    $(':text,:password').each(function(){
        ...
        return false;
    })
    return false;
})

input, checkbox

JS: 验证

$(":submit").click(function(){
    $(":text, :password").each(function()
    {
        ...
        return false;
    })
    return false;
})

后端: python实现

业务处理

常用组件

BootStrap
- css
- js
  学习BootStrap规则:

响应式布局 @media

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
        }

        @media (min-width:700px){
            .c2 {
            background-color: grey;
        }
        }
    </style>
</head>
<body>
<div class="c1 c2"></div>
</body>
</html>

基于字体存放图片,图标以\uuid形式出现 @font-face
基本使用

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css"/>
</head>
<body>
<span class="glyphicon glyphicon-plus-sign"></span>
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider">
        </li>
        <li><a href="#">Separated 1ink</a></li>
    </ul>
</div>

<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>
</body>
</html>

bootstrip默认所有园角,强制无圆角样式代码:

<style>

.no-radus{
    border-radius:0 !important;
}
</style>

后台管理

jQueryUI *
- css
- js
  学习jQueryUI规则
EasyUI
- css
- js
- Ajax操作

学习jQueryUI规则

其他插件示例

利用bxslider写轮播图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css"/>
</head>
<body>
<ul class="bxslider">
    <li><img src="/images/pic1.jpg"/></li>
    <li><img src="/images/pic2.jpg"/</li>
    <li><img src="/images/pic3.jpg"/></li>
    <li><img src="/images/pic4.jpg"/></li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script>
<script>
    $(document).ready(function () {
        $('.bxslider').bxSlider();
    })
</script>
</body>
</html>

WEB框架

MVC模型和MTV模型:

Model   View    Controller
数据库  模板文件    业务处理

Model   Template    View
数据库  模板文件    业务处理

Django

安装django模块
pip3 install django

创建Django工程:

django-admin startproject [工程名称]

mysite
    mysite # 对整个程序进行配置
        init
        settings    # 配置文件
        url # URL对应关系
        wsgi    # 遵循WSIG规范, uwsgi + nginx
    manage.py   # 管理Django程序
        python manage.py
        python manage.py startapp xx
        python manage.py makemigrations
        python manage.py migrate

运行Django功能: python manage.py runsever 127.0.0.1:8001

chouti框架

chouti
    配置
主站
    app
后台管理
    app

创建app:

python manage.py startapp cmdb
python manage.py openstack
python mange.py startapp xxoo...

app:
- migrations 数据修改表结构
- admin Django为我们提供的后台管理
- apps  配置当前app
- models    ORM,写指定的类,通过命令可以创建数据库结构
- tests 单位测试
- views 业务代码

配置模板的路径:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.djange.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'],
        'APP_DIRS': True,
        'OPTINS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

配置静态目录:

目录static

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

<link rel="stylesheet" href="/static/commons.css" />

总结

创建Django工程 django-admin startproject 工程名
创建APP python manage.py startapp cmdb
静态文件

project.settings.py

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

模板路径 DIRS ==> [os.path.join(BASE_DIR, 'templates'),]
settubgs中 middleware # 注释 csrf
定义路由规则 url.py "login" --> 函数名
定义视图函数:

app下view.py

def func(request):
    # request.method GET/POST
    # http://127.0.0.1:8009/home?nid=123&name=alex
    # request.POST.get('', None)
    # return HttpResponse("字符串")
    # return render(request, "HTML模板路径")
    # return redirect('/只能填URL')

模板渲染,特殊的模板语言:

-- {{ 变量名 }}
def func(request):
    return render(request, "index.html", {'current_user': "alex"})
    
# index.html
<html>
    <body>
        <div> {{current_user}}</div>
    </body>
</html>

==>最后生成的字符串
<html>
    <body>
        <div>alex</div>
    </body>
</html>

-- For循环
def func(request):
    return render(request, "index.html", {'current_user': "alex", "user_list", ["alex", "eric"]})
    
# index.html
<html>
    <body>
        <div>{{current_user}}</div>
        <ul>
            {% for row in user_list %}
                {% if row == "alex" %}
                    <li>{{row}}</li>
                {% endif %}
            {% endfor %}
        </ul>
    </body>
</html>

-- 索引
def func(request):
    return render(request, "index.html",{
        'current_user': "alex",
        "user_list": ["alex", "eric"],
        "user_dict": {'k1': "v1", "k2": "v2"}
    })
    
# index.html
<html>
    <body>
        <div>{{current_uesr}}</div>
        <a>{{ user_list.1 }}</a>
        <a>{{user_dict.k1}}</a>
        <a>{{user_dict.k2}}</a>
    </body>
</html>

-- 条件
def func(request):
    return render(request, "index.html",{
        "current_user": "alex",
        "age": 18,
        "user_list": ["alex", "eric"],
        "user_dict": {"k1": "v1", "k2": "v2"}
    })
    
# index.html
<html>
    <body>
        <div>{{current_user}}</div>
        <a>{{user_list.1}}</a>
        <a>{{user_dict.k1}}</a>
        <a>{{user_dict.k2}}</a>
        
        {% if age %}
            <a>有年龄</a>
            {% if age > 16 %}
                <a>老男人</a>
            {% else %}
                <a>小鲜肉</a>
            {% endif %}
        {% else %}
            <a>无年龄</a>
        {% endif %}
    </body>
</html>

作业

xxoo管理:

- MySQL
- SQLAlchemy
- 主机管理(8列):
    - IP
    - 端口
    - 业务线
    - ...
- 用户表:
    - 用户名
    - 密码
- 功能:
    - 登录
    - 主机管理页面
        - 查看所有主机信息(4列)
        - 增加主机信息(8列) ** 模态对话框
    - 查看详细
        - url: "detail" -> detail
        def detail(request):
            nid = request.GET.get("nid")
            v = select * from tb where id = nid
            ...
    - 删除:
        - del_host -> delete_host
        def delete_host(request):
            nid = request.POST.get('nid')
            delete from tb where id = nid;
            return redirect('/home')

网友评论

本文标题：python全栈 part2 - 004 前端补遗,Django

本文链接：https://www.haomeiwen.com/subject/huawnxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！