第八章(1)

1.js正册表达式

test

匹配到返回true
rep = /d+/
/d+/
rep.test("asdsdf")
false

rep.test("asd12")
true

^$ 精确匹配
rep = /^d+$/;
/^d+$/
rep.test("112sdf")
false
rep.test("11")
true

exec

分组匹配和匹配所有(W*) g
text = "JavaScript is more fun than 
Java or JavaBeans!"
var rep = /^Java(W*)/g;
rep.exec(text)

匹配所有行m
text = "JavaScript is more fun than 
Java or JavaBeans!"
var rep = /^Java(W*)/gm;
rep.exec(text)

2.提交时间顺序

-登录注册验证
	默认事件先执行
		checkbox
	自定义事件先执行
		a
		submit
		
		<form>
			<input type='type'/>
			<input type='password' />
			<input type='submit' />
		<form>
		
		$(':submit').click(function(){
          $(':text,:password').each(function(){
            retuen false;
          })
          return false;
		})

3.web模板

Ajax操作
http://www.jeasyui.com/

jqyeryui
http://jqueryui.com/

bootstrap
http://www.bootcss.com/
https://v3.bootcss.com/

bootstrap 模板
http://www.cssmoban.com/tags.asp?page=3&n=Bootstrap

bootstrap(响应式)

@media

   <style>
        .c1{
            background-color:red;
            height:50px;
        }
        @media(min-900px){
            .c2{
                background-color:grey;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>

!important(强制样式生效)

<style>
	.no-radus{
      border-radius: 0 !important;
	}
<style>
<link rel="stylesheet" href="bootstrap-3.3.0-dist/bootstrap.css"/>

图标字体

@font-face

轮播图

1下载bxslider插件
2 https://bxslider.com/
3复制代码https://www.helloweba.net/demo/bxslider/demo3.html

<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery.bxslider.css"/>
</head>
<body>
     <ul class="bxslider">
         <li><img src="images/1.jpg" /></li>
         <li><img src="images/2.jpg" /></li>
         <li><img src="images/3.jpg" /></li>
         <li><img src="images/4.jpg" /></li>
     </ul>

    <script src="jquery.js"></script>
    <script src="jquery.bxslider.js"></script>
    <script>
        // $(document).ready(function(){
        //     $('.bxslider').bxSlider();
        // });

        $(function(){
            $('.bxslider').bxSlider({
                auto: true,
                autoControls: true
            });
        });
    </script>
</body>

WEB：mvc mtv

MVC
    Model   View     Controller
    数据库   模板文件 业务处理
    
MTV 
	Model    temolates    views
    数据库    模板文件 业务处理

Django

1.pip3 install dango 

2.设置环境变量
D:ProgramsPythonPython35Scripts

3.创建django
django-admin startproject mysite

4.启动django 
cd mysite
python manage.py runserver 127.0.0.1:8001

mysite文件说明

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

from django.contrib import admin
from django.urls import path
from django.shortcuts import HttpResponse

def home(request):
    return HttpResponse('<h1>Hello</h1>')
urlpatterns = [
    path('admin/', admin.site.urls),
    path('h.html/', home),
]

创建APP

python manage.py startapp cmdb

from django.contrib import admin
from django.urls import path
from cmdb import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('h.html/', views.home),
]

APP文件说明

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

urls.py

 1 from django.contrib import admin
 2 from django.urls import path
 3 from cmdb import views
 4 from django.conf.urls import url
 5 urlpatterns = [
 6     # path('admin/', admin.site.urls),
 7     # path('h.html/', views.home),
 8     url(r'login',views.login),
 9 ]
10 
11 cmdb/views.py
12 
13 from django.shortcuts import HttpResponse
14 from django.shortcuts import render
15 
16 def login(request):
17     return render(request,'login.html')
18 
19 templates/login.html

View Code

Django静态文件以及模板文件调用顺序

1.urls.py

1 from django.contrib import admin
2 from django.urls import path
3 from cmdb import views
4 from django.conf.urls import url
5 urlpatterns = [
6     # path('admin/', admin.site.urls),
7     # path('h.html/', views.home),
8     url(r'login',views.login),
9 ]

View Code

2.cmdb/views.py

1 from django.shortcuts import HttpResponse
2 from django.shortcuts import render
3 
4 def login(request):
5     return render(request,'login.html')

View Code

3.templates/login.html

 1  <title>Title</title>
 2     <link rel="stylesheet" href="/static/commons.css">
 3     <style>
 4         label{
 5              80px;
 6             text-align: right;
 7             display: inline-block;
 8         }
 9     </style>
10 </head>
11 <body>
12     <form action="/login" method="post">
13         <p>
14             <label for="username">用户名</label>
15             <input id="username" type="text"/>
16         </p>
17         <p>
18             <label for="password">密码:</label>
19             <input id="password" type="text" />
20             <input type="submit" value="提交" />
21         </p>
22     </form>
23     <script src="/static/jquery.js"></script>
24 </body>

View Code

4.settings.py

 1 TEMPLATES = [
 2     {
 3         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 4         'DIRS': [os.path.join(BASE_DIR, 'templates')]    ####
 5         ,
 6         'APP_DIRS': True,
 7         'OPTIONS': {
 8             'context_processors': [
 9                 'django.template.context_processors.debug',
10                 'django.template.context_processors.request',
11                 'django.contrib.auth.context_processors.auth',
12                 'django.contrib.messages.context_processors.messages',
13             ],
14         },
15     },
16 ]
17 
18 
19 
20 
21 STATICFILES_DIRS = (
22     os.path.join(BASE_DIR,'static'),
23 )

View Code

django验证用户密码是否正确

1.settings.py

1 MIDDLEWARE = [
2     'django.middleware.security.SecurityMiddleware',
3     'django.contrib.sessions.middleware.SessionMiddleware',
4     'django.middleware.common.CommonMiddleware',
5     #'django.middleware.csrf.CsrfViewMiddleware',   注释掉
6     'django.contrib.auth.middleware.AuthenticationMiddleware',
7     'django.contrib.messages.middleware.MessageMiddleware',
8     'django.middleware.clickjacking.XFrameOptionsMiddleware',
9 ]

View Code

2.templates/login.html

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <link rel="stylesheet" href="/static/commons.css">
 5     <style>
 6         label{
 7              80px;
 8             text-align: right;
 9             display: inline-block;
10         }
11     </style>
12 </head>
13 <body>
14     <form action="/login" method="post">
15         <p>
16             <label for="username">用户名</label>
17             <input id="username" name="user" type="text"/>
18         </p>
19         <p>
20             <label for="password">密码:</label>
21             <input id="password" name="pwd" type="password" />
22             <input type="submit" value="提交" />
23             <span style="color: red;">{{ error_msg }}</span>  ####
24         </p>
25     </form>
26     <script src="/static/jquery.js"></script>
27 </body>

View Code

3.cmdb/views.py

 1 def login(request):
 2 
 3     error_msg = ""
 4     if request.method == "POST":
 5         user = request.POST.get('user',None)
 6         pwd = request.POST.get('pwd',None)
 7         if user == "root" and pwd == "123":
 8             return redirect('http://www.baidu.com')
 9         else:
10             error_msg = "用户名或密码错误"
11 
12     return render(request,'login.html', {'error_msg': error_msg})

View Code

input添加示例

1.urls.py

1 urlpatterns = [
2     url(r'home',views.home),

View Code

2.templates/home.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body style="margin: 0">
 8     <div style="height: 48px;background-color: #dddddd"></div>
 9     <div>
10         <form action="/home" method="post">
11             <input type="text" name="username" placeholder="用户名"/>
12             <input type="text" name="email" placeholder="邮箱"/>
13             <input type="text" name="gender" placeholder="性别"/>
14             <input type="submit" value="添加"/>
15         </form>
16     </div>
17     <div>
18         <table>
19             {% for row in user_list %}
20                 <tr>
21                     <td>{{ row.username }}</td>
22                     <td>{{ row.gender }}</td>
23                     <td>{{ row.email }}</td>
24                 </tr>
25             {% endfor %}
26         </table>
27     </div>
28 </body>
29 </html>

View Code

3.cmdb/views.py

 1 USER_LIST = [
 2     {'username': 'zhang','email': 'zhang@163.com','gender': 'man'},
 3     {'username': 'li','email': 'li@163.com','gender': 'man'},
 4     {'username': 'wang','email': 'wang@163.com','gender': 'man'}
 5 ]
 6 def home(request):
 7     if request.method == "POST":
 8 
 9         u = request.POST.get('username')
10         e = request.POST.get('email')
11         g = request.POST.get('gender')
12         temp = {'username': u, 'email': e,'gender': g}
13         USER_LIST.append(temp)
14     return render(request,'home.html',{'user_list': USER_LIST})

View Code

内容整理

1.创建Django工程

django-admin startproject 工程名

2.创建APP

cd 工程名
python manage.py startapp cmdb

3.静态文件

project.setting.py

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

4.模板路径

DIRS ==> [os.path.join(BASE_DIR,'templates'),]

5.settings中

url.py
	"login" --> 函数名

7.定义视图函数

app下views.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')

8.模板渲染

特殊的模板语言

--- {{变量名}}

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 %}
				<li>{{ row }}</li>
			{% endfor %}
		</ul>
	</body>
<html>

索引

def func(request):
	return render(request,"index.html",{
        'current_user':'alex',
        'user_list':['alex','eric'],
        'user_list':{'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>
	</body>
</html>

def func(request):
	return render(request,"index.html",{
        'current_user':'alex',
        'user_list':['alex','eric'],
        'user_list':{'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>
        {% else %}
        	<a>无年零</a>
        {% endif %}
	</body>
</html>

6.Django请求生命周期

   -> URL对应关系(匹配) -> 试图函数 -> 返回用户字符串
   -> URL对应关系(匹配) -> 试图函数 -> 打开一个HTML文件，读取内容

第八章(1)

目录

1.js正册表达式

2.提交时间顺序

3.web模板

图标 字体

Django

django验证用户密码是否正确

input添加示例

内容整理

6.Django请求生命周期

图标字体