python学习之路 JavaScript正则与Django

JavaScript正则

1、text 　　判断字符串是否符合规定的正则表达式

rep = /d+/;

rep.test('sadkjfh287dadlk') #这个判断后面的字符串符合不符合前面的rep正则表达式符合就返回true反之false

2、exec 　　获取匹配到的数据

rep = /d+/;

rep.exec('asdasd123dasd321') # 结果为　'123' 这个只要找到第一个匹配项就不会继续找下去，返回的也是第一匹配项

正则中的分组

var pattern = /Java(w*)/; # 这个表示的是匹配的是一个单词

# 其中的一般指单词边界（空格、空行、标、tab）相当于单词的分隔符如 dada dadsa aswdx 里面的 'dada'和'dadsa' 'aswdx'认为是一个但是

pattern.exec('JavaScript is more fun than Java or JavaBeans!')

# 结果为['JavaScript', 'Script'] 这个就是分组产生的他会匹配第一个匹配的字符并返回匹配到的字符和分组里面的字符

全局匹配

var pattern = /Javaw*/g; #这个后面加了一个g表示匹配所有

pattern.exec('JavaScript is more fun than Java or JavaBeans!') # 这个执行一次就出一个结果一直到找到空的再从头到为再找

# ['JavaScript'],['Java'],['JavaBeans'] ， ['',''] # 会把整个字符串中符合正则的都匹配出来不像上面的只要匹配到就不匹配

var pattern = /Java(w*)/g # 这个就是匹配出所有并把每一项作为一个列表前面是匹配项后面的分组中的值

pattern.exec('JavaScript is more fun than Java or JavaBeans!') # 这个执行一次就出一个结果一直到找到空的再从头到为再找

#['JavaScript', 'Script']、['Java','']、['JavaBeans','Beans']、['','']

正则表达式的一些意思

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

/…/g 表示全局匹配

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

/../m 表示多行匹配

记住js在默认的情况下是多行匹配的这个多行匹配

上面我们可以看到当我们匹配以什么开头的时候他只认是这个字符串开头，不会管这个字符串是不是多行，以一个字符串为整体

上面这个加了m以后他就会看看这个字符串有没有换行符，有的话，她就会以每行作为开头，去匹配。

时间执行的顺序

很多标签都有自己的事件，同时我们也可以赋予他们事件，这样就会产生顺序的问题。

拥有自己的事件叫做默认事件、我们赋予的叫做自定义事件

默认事件先执行：checkbox标签

自定义事件先执行: a 标签submit标签

下面是一个验证checkbox标签是默认事件先执行的示列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="checkbox">
    <script src="s14django/static/jquery.min.js"></script>
    <script>
        $(':checkbox').click(function () {
            var v = $(this).prop('checked');
            console.log(v)
        })
    </script>
</body>
</html>

上面可以看出当我们点击的时候才会出现true也就是说这个里面的默认事件，如果是自定义事件优先的话，在我们点击它的时候开始应该先显示false然后才是true。

组件的学习

BootStrap --->推荐使用这个

BootStrap是基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前段开发框架，使Web开发更加快捷。

一、响应式：

@media

代码如下

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

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

上面代码就是当我们把浏览器的窗口调到小于 700px的时候就会使.c2生效

上面就是效果图。

二、图标、字体

@font-face

其他两个插件

JQueryUI

EasyUI

不过相对于第一个下面这两个偏向于后台，这三个是常用的也还有其他的一些类似的插件。

WEB框架

MVC

　　Model　　　　 View　　　　　　Controller

　　数据库　　　　模板文件　　　　业务处理

MTV Django就是这个框架

　　Model　　　　 Template　　　　 View

　　数据库　　　　模板文件　　业务处理

Django

我们要使用Django这个框架就要先安装django

1、我们可以使用pip来安装Django

我的电脑上安装了py3和py2所以pip有2个设置了pip2和pip3

我这里使用的是python3

所以安装Django：pip3 install django

2、创建一个Django的project（我这里使用的是命令创建的使用pycharm可以直接创建，可以百度下pycharm如何创建django项目）

django-admin startproject mysite # 我这里给这个项目起名字为mysite，也可以取别的名字

创建好后会有一个项目出现，我们进去目录结构是：

mysite

　　-musite

　　　　 - _init_.py

　　　　-settings.py #这个是配置文件

　　　　 -urls.py # url对应的关系

　　　　 -wsgi.py　　　# 遵循WSGI规范，实际用uwsig+nginx

　　 -manage.py # 管理django程序：项目管理脚本

　　　　　　　　　　　　　　- python manage.py

　　　　　　　　　　　　　　- python manage.py startapp xx 这个是用来创建app

　　　　　　　　　　　　　　- python manage.py makemigrations 这个是用来

　　　　　　　　　　　　　　- python manage.py migrate

当我们创建好django的项目的时候就可以启动这个项目：

启动项目：python3 manage.py runserver

启动好项目后我们就可以通过127.0.0.1:8000来访问这个网页

因为这里默认启动的本地访问也就是127.0.0.1默认端口为8000

如果想要指定端口号就可以：python3 manage.py runserver 8080

如果想要指定端口和ip的话：python3 manage.py runserver 192.168.0.1:8080

我们创建好项目后有时候需要创建app这个时候我们就要进入到这个项目里面（和manager.py同一个目录）

使用：python3 manager.py startapp app01 # 这个里面的python3表示的在doc下输入python3会进到python3的交互界面。

创建完app后在这个目录里面有一些文件，分别是：

app01

　　migrations 　　　　数据修改表结构（是一个文件夹）

　　admin　　　　　　 Django为我们提供的后台管理

　　apps 配置当前的app

　　models　　　　　　ORM，写指定类，通过命令可以创建数据库结构

　　tests　　　　　　　单元测试

　　views　　　　　　　业务代码

我们在mysite/app01/views.py文件中，编写一个视图：代码为

from django.shortcuts import render,HttpResponse

# Create your views here.
def index(request):
    return HttpResponse('hello world')

为了使用该视图我们需要编写一个路由系统所以我们可以在mysite/mysite/urls.py

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

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

我们运行这个项目然后到到浏览器打开127.0.0.1:8000/index就会出现上面我们写的‘hello world’

上面只是一个简单的例子没有用到html的模板，一般模板都会放到manager.py同级目录下面的templates目录下面

同时我们现在把项目下的setting.py里面的配置找到 'django.middleware.csrf.CsrfViewMiddleware'并把它注释掉，后面会说相关的事。

这个templates目录需要我们自己创建。同时我们还要创建static目录用来放置静态文件等同时我们要在项目目录里面的settings.py文件中最后一行设置

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

这里的static目录一般放置css和js的文件。

下面我么做一个关于登陆界面

我们的在路由系统里面这样写

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

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

在试图函数里面我们编写一个视图

def login(request):
    # 包含用户提交的所有信息
    # 获取用户提交方法
    # print(request.method)
    error_msg = ""
    if request.method == "POST":
        # 获取用户通过POST提交过来的数据
        user = request.POST.get('user', None)
        pwd = request.POST.get('pwd', None)
        if user == 'root' and pwd == "123":
            # 去跳转到
            return redirect('/login')
        else:
            # 用户密码不配
            error_msg = "用户名或密码错误"
    return render(request, 'login.html', {'error_msg': error_msg})

里面的login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/commons.css" />
    <style>
        label{
            width: 80px;
            text-align: right;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form action="/login" method="post">
        <p>
            <label for="username">用户名：</label>
            <input id="username" name="user" type="text" />
        </p>
        <p>
            <label for="password">密码：</label>
            <input id="password" name="pwd" type="password" />
            <input type="submit" value="提交" />
            <span style="color: red;">{{ error_msg }}</span>
        </p>
    </form>
    <script src="/static/jquery.min.js"></script>
</body>
</html>

上面的示列我们可以看出当我们需要我们做的是定义路由规则、定义视图函数、模板渲染

定义路由规则

我们在创建项目的时候最外层和内层的有一个相同的名字的目录，在外层的目录与django无关只是项目的容器，可以任意命名

内层的目录是真正的项目文件包裹目录，它的名字是内部文件的包名。下面我们说的项目名称就是指的是内部的这个目录

项目名称/url.py

url(r'^login', views.login), 这里面的login访问的就会寻找views里面的login函数

定义图函数

我们定义app01/views.py里面的函数

def login(request):

　　request.method 判断前段是以何种方式把数据传到后台的，这里只是简单说一下 GET/POST方式

　　request.GET.get('',None) 获取以GET的方式提交的数据

　　request.POST.get('',None) 获取以POST的方式提交的数据

　　以何种方式返回页面的请求

　　　　return HttpResponse('字符串') 直接返回一个字符串

　　　　return render(request,'HTML模板',{key:value,key1:value1...}) 这里面后面是一个字典是把数据传输到HTML模板中进行模板渲染，这个可以有可以没有

　　　　return redirect('/只能填URL')

模板渲染

　　是一个特殊的模板语言。

　　我们在HTML中通过{{views传过来的变量名 }}使用从views传过来的数据

def func(request):

　　return render(request, "index.html", {'current_user': "alex"}

index.html

<html>

　　<body>

　　　　<div>{{current_user}}</div> # 获取到上面传入的'alex',相当于<div>alex</div>

　　</body>

</html>

如果我们传入的是一堆数据我们就可以在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>       #  相当于<div>alex</div>
      
      <ul>
         {% for row in user_list %}  # user_list为 ['alex','eric']
         
            {% if row == "alex" %}   # 判断语句
               <li>{{ row }}</li>
            {% endif %}
            
         {% endfor %}
      </ul>
      
   </body>

</html>
上面的for循环在HTML里面必须是 开始为{% for i in user %}  结束为 {% endfor %}
判断语句在HTML的使用也是一样的我们有多个if语句的时候：

   {% if age %}
      <a>有年龄</a>
      {% if age > 16 %}
         <a>老男人</a>
      {% else %}
         <a>小鲜肉</a>
      {% endif %}
　 {% elif age%}
　　　　<a>有年龄</a>
　　{% else %}
　　　　<a>无年龄</a>
　　{% endif %}



如果我们传入的是一个列表，字符串等我们可以通过索引的方式取值
...
　　return render(request, 'index', {'current_user': "alex",
　　　　　　　　　　　　　　　　　　　　 'user_list': ['alex','eric'], 
　　　　　　　　　　　　　　　　　　　　　　'user_dict': {'k1': 'v1', 'k2': 'v2'}}})

...
<div> {{user_list.1}}</div>   # 列表取值 取列表中的数据和python一样，索引也是从0开始的。这里和python使用的方式不一样不是用list[]方式取得而是用list.的方式把[]换为 .

<div> {{user_dict.k1}}</div>   # 字典取值

...