第十五 jquery&bootstrap&django
一、关于伪类说明
1.1.添加文字说明
1.1.1.源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WHH</title> <style> </style> </head> <body> <div class=""> 给我一杯忘情水 </div> </body> </html>
1.1.2.页面
1.1.3.增加伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WHH</title> <style> .c2:before{ content: "啊啊"; } .c2:after { content: ",换我一夜不伤悲"; } </style> </head> <body> <div class="c2"> 给我一杯忘情水 </div> </body> </html>
1.1.4.查看伪类后页面
1.2.添加背景样式
1.2.1.源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WHH</title> <style> .lead { background-color: red; } .c2:before{ content: "啊啊"; } .c2:after { content: ",换我一夜不伤悲"; } </style> </head> <body> <div class="c2"> 给我一杯忘情水 </div> <div class="lead"> <div style="float: left;">下起了雨</div> <div style="float: left;">你站在雨里</div> </div> </body> </html>
1.2.2.查看页面
1.2.3.覆盖掉了父类的样式，传统做法
<div class="lead"> <div style="float: left;">下起了雨</div> <div style="float: left;">你站在雨里</div> <div style="clear: both"></div> </div>
1.2.4.查看结果
1.2.5.使用伪类
.lead {
background-color: red;
}
.lead:after {
content: ".";
clear: both;
}
1.2.6.查看结果
1.2.7.照常可以显示，但是多了一个内容“.”，解决如下
.lead {
background-color: red;
}
.lead:after {
content: ".";
clear: both;
visibility: hidden;
}
1.2.8.查看结果
二、web框架初探
1.1.原始框架
#!/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,Future") def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('192.168.2.80', 8000)) sock.listen(5) while True: connection, address = sock.accept() handle_request(connection) connection.close() if __name__ == '__main__': main()
运行访问：
1.2.如果返回一个html形式字符串
#!/usr/bin/env python #coding:utf-8 from wsgiref.simple_server import make_server def RunServer(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')]) return '<h1>Hello, web!</h1>' if __name__ == '__main__': httpd = make_server('', 8000, RunServer) print "Serving HTTP on port 8000..." httpd.serve_forever()
运行结果：
、
1.3.增加一个URL路径
#!/usr/bin/env python #coding:utf-8 from wsgiref.simple_server import make_server def RunServer(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')])
#environ 封装用户相关的所有信息
#environ 读取用户的URL url = environ['PATH_INFO'] if url == "/index/": return "index" elif url == "/home/": return "home" else: return "404" if __name__ == '__main__': httpd = make_server('', 8000, RunServer) print "Serving HTTP on port 8000..." httpd.serve_forever()
查看返回：
1.3.如上写if匹配太麻烦了，可以将路径写到一个字典里
#!/usr/bin/env python #coding:utf-8 from wsgiref.simple_server import make_server def ck1(): return "ck1" def ck2(): return "ck2" routes_url = { "/index/":ck1, "/home/":ck2, } def RunServer(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')]) url = environ['PATH_INFO'] if url in routes_url.keys(): funcName = routes_url[url] res = funcName() return res else: return "404" if __name__ == '__main__': httpd = make_server('', 8000, RunServer) print "Serving HTTP on port 8000..." httpd.serve_forever()
查看结果：
1.4.如上可以返回一个html文件的内容
#!/usr/bin/env python #coding:utf-8 from wsgiref.simple_server import make_server def ck1(): fls = open('templates/index.html','r') data = fls.read() fls.close() return data def ck2(): return "ck2" routes_url = { "/index/":ck1, "/home/":ck2, } def RunServer(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')]) url = environ['PATH_INFO'] if url in routes_url.keys(): funcName = routes_url[url] res = funcName() return res else: return "404" if __name__ == '__main__': httpd = make_server('', 8000, RunServer) print "Serving HTTP on port 8000..." httpd.serve_forever()
查看html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WHH</title> </head> <body> <b>My Heart will go on</b> <hr/> </body> </html>
查看结果：
1.5.使用jinja2进行渲染
1.5.1.python 代码
#!/usr/bin/env python #coding:utf-8 from wsgiref.simple_server import make_server def ck1(): fls = open('templates/index.html','r') data = fls.read() fls.close() return data def ck2(): from jinja2 import Template fls = open('templates/home.html','r') res = fls.read() fls.close() template = Template(res)
#接收值，并进行替换 data = template.render(name='Jone Snow',user_list=['AryaStark','Margaery']) return data.encode('utf-8') routes_url = { "/index/":ck1, "/home/":ck2, } def RunServer(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')]) url = environ['PATH_INFO'] if url in routes_url.keys(): funcName = routes_url[url] res = funcName() return res else: return "404" if __name__ == '__main__': httpd = make_server('', 8000, RunServer) print "Serving HTTP on port 8000..." httpd.serve_forever()
1.5.2.home.html 内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WHH</title> </head> <body> <h1>{{ name }}</h1> <hr/> <ul> {% for item in user_list %} <li>{{ item }}</li> {% endfor %} </ul> </body> </html>
1.5.3.运行结果
2.web框架的常用请求流程
请求说明：
1.请求到WSGI 2.WSGI将请求通过路由系统交给函数 3.函数通过SQL语句，去数据库获取数据 4.获取到数据，通过jinja2进行嵌套 5.jinja2嵌套html内容，返回给函数（模板引擎渲染） 6.函数通过路由系统，将内容发送给响应的URL 7.返回给用户
三、django 初探
1.程序创建之基本
1.创建django程序 a. 命令 django-admin startproject mysite 创建project cd mysite python manage.py startapp app01 创建app b. pycharm 创建Django程序 终端： python manage.py startapp app02 创建app 2.执行django程序 进入project 执行：python manage.py runserver 127.0.0.1:8000 3.Django 依赖数据库 配置，settings 生成数据库表： python manage.py makemigrations #生成配置文件 python manage.py migrate #根据配置文件创建数据库等 4、admin python manage.py createsuperuser
2.基本路由
2.1.普通访问页面
如果要加参数的话，如翻页的情况“https://www.cnblogs.com/#p2”
2.2.配置带参数
2.2.1.配置urls.py
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^home/', views.home), url(r'^news/(\d+)',views.news), //新增news相关的路径 ]
2.2.2.配置views.py
def news(request,nid): //接收两个形参 return HttpResponse(nid)
2.2.3.访问测试
2.3.配置带多个参数
2.3.1.配置urls.py
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^home/', views.home), url(r'^news/(\d+)/(\d+)',views.news), //多个参数 ]
2.3.2.配置views.py
def news(request,n1,n2): //多个形参 nid = n1 + n2 return HttpResponse(nid)
2.3.3.查看页面
2.4.配置顺序参数
2.4.1.配置urls.py
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^home/', views.home), url(r'^news/(\d+)/(\d+)',views.news), url(r'^page/(?P<p1>\d+)/(?P<p2>\d+)',views.page), //页面路径 ]
2.4.2.配置views.py
def page(request,p1,p2): pid = p1 + p2 return HttpResponse(pid)
2.4.3.查看页面
3.二级匹配
3.1.创建一个新的app
python manage.py startapp app02
3.2.在app01添加urls.py
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^home/', views.home), ]
3.3.在app01配置views.py
def home(request): return HttpResponse("app01.home")
3.4.在app02添加urls.py
from django.conf.urls import url from django.contrib import admin from app02 import views urlpatterns = [ url(r'^home/', views.home), ]
3.5.配置总的urls.py
from django.conf.urls import url,include from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^home/', views.home), url(r'^news/(\d+)/(\d+)',views.news), url(r'^page/(?P<p1>\d+)/(?P<p2>\d+)',views.page), url('^app01/',include('app01.urls')), //app01相关 url('^app02/',include('app02.urls')), //app02相关 ]
3.6.访问测试
4.创建数据库
创建一个app01的数据库
4.1.配置创建数据库类
from django.db import models # Create your models here. class UserInfo(models.Model): username = models.CharField(max_length=32) password = models.CharField(max_length=32) age = models.IntegerField()
4.2.配置settings
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'app01', //app01相关 ]
4.3.运行创建命令
4.3.1.创建数据库模板命令
4.3.2.查看结果
4.3.3.查看创建表模板内容
# -*- coding: utf-8 -*- # Generated by Django 1.11.5 on 2017-09-18 08:19 from __future__ import unicode_literals from django.db import migrations, models class Migration(migrations.Migration): initial = True dependencies = [ ] operations = [ migrations.CreateModel( name='UserInfo', fields=[ ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), ('username', models.CharField(max_length=32)), ('password', models.CharField(max_length=32)), ('age', models.IntegerField()), ], ), ]
4.3.4.创建数据库表文件命令
4.3.5.查看结果
4.4.插入一条数据
4.4.1.配置views.py
from django.shortcuts import render from django.shortcuts import HttpResponse from app01 import models # Create your views here. def db_handle(request): models.UserInfo.objects.create(username='ckl',password='893',age='99') return HttpResponse('ok')
4.4.2.配置urls.py
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^home/', views.home), url(r'^db_handle/', views.db_handle), ]
4.4.3.运行
4.4.5.查看结果
4.5.使用第二中方式插入数据
4.5.1.配置views.py
def db_handle(request): #models.UserInfo.objects.create(username='ckl',password='893',age='99') dic = {'username':'zld','password':'629','age':18} models.UserInfo.objects.create(**dic) return HttpResponse('ok')
4.5.2.运行查看结果
4.6.删除数据
4.6.1.删除用户名为ckl的
def db_handle(request): #insert #models.UserInfo.objects.create(username='ckl',password='893',age='99') #dic = {'username':'zld','password':'629','age':18} #models.UserInfo.objects.create(**dic) #delete models.UserInfo.objects.filter(username='ckl').delete()
4.6.2.查看结果
4.7.修改数据
4.7.1.修改内容
def db_handle(request): #insert #models.UserInfo.objects.create(username='ckl',password='893',age='99') #dic = {'username':'zld','password':'629','age':18} #models.UserInfo.objects.create(**dic) #delete #models.UserInfo.objects.filter(username='ckl').delete() #modify dic = {'username':'dan','password':'508'} models.UserInfo.objects.all().update(**dic) return HttpResponse('ok')
4.7.2.查看结果
4.8.查询
4.8.1.查询值内容
def db_handle(request): #查询所有值 all_list_obj = models.UserInfo.objects.all() all_user_list = [] for i in all_list_obj: all_user_list.append(i.username) all_user_list.append(i.password) return HttpResponse(all_user_list)
查看结果：
4.9.通过模板展示后台数据
4.9.1.配置从数据库查询数据
from django.shortcuts import render from django.shortcuts import HttpResponse,render from app01 import models # Create your views here. def db_handle(request): #module all_list_obj = models.UserInfo.objects.all() return render(request,'tab.html',{'mk':all_list_obj})
4.9.2.配置html模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>用户名</th> <th>密码</th> <th>年龄</th> </tr> </thead> <tbody> {% for item in mk %} <tr> <td>{{ item.username }}</td> <td>{{ item.password }}</td> <td>{{ item.age }}</td> </tr> {% endfor %} </tbody> </table> </body> </html>
4.9.3.查看页面
4.10.展示并修改后台数据
4.10.1.配置html模板文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="app01/db_handle/" method="post"> username:<input type="text" name="username"/><br/> password:<input type="text" name="password"><br/> panneage:<input type="text" name="age" /><br/> <input type="submit" name="提交"> </form> <table border="1"> <thead> <tr> <th>用户名</th> <th>密码</th> <th>年龄</th> </tr> </thead> <tbody> {% for item in mk %} <tr> <td>{{ item.username }}</td> <td>{{ item.password }}</td> <td>{{ item.age }}</td> </tr> {% endfor %} </tbody> </table> </body> </html>
4.10.2.配置查询数据
def db_handle(request): #module if request.method == "POST": #print(request.POST) models.UserInfo.objects.create(username=request.POST['username'], password=request.POST['password'], age=request.POST['age']) all_list_obj = models.UserInfo.objects.all() return render(request,'tab.html',{'mk':all_list_obj})
4.10.3.配置settings
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware', //此行注释 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ]
4.10.4.增加数据
