内容目录：
- jQuery示例
- 前端插件
- web框架
- Django框架
jQuery示例
- dom事件绑定，dom绑定在form表单提交按钮地方都会绑定一个onclick事件，所有查看网站的人都能看到代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom表单验证</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 200px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"/> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> <!--<span>密码不能为空</span>--> </div> <input type="submit" value="提交" onclick="return CheckValid();" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script> $('form .c1 span').remove(); function CheckValid() { //找到form标签下的所有需要验证的标签 //$('form .c1') //$('form input[type="text"],form input[type="password"]') //循环所有需要验证的标签，获取内容 var flag = true; $('form .c1').each(function () { //每一个元素执行匿名函数 //this //console.log(this,$(this)); var val = $(this).val(); if (val.length <=0 ){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText=label+"不能为空"; $(this).after(tag); flag=false; return false; } }); return flag; } </script> </body> </html>dom表单提交事件绑定demo
- jQuery事件绑定，使用jquery方式绑定的事件通过浏览器的调试模式也看不到绑定的事件，使网站的代码更安全。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery表单验证</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 200px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"/> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> <!--<span>密码不能为空</span>--> </div> <input type="submit" value="提交" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //当页面框架加载完成之后，自动执行 BindCheckValid(); }); function BindCheckValid() { $('form :submit').click(function () { var flag=true; //只要一点击submit按钮，执行此处内容，找到form标签下的所有需要匹配的标签 $('form .item span').remove(); $('form .c1').each(function () { //每一个元素执行匿名函数 //this //console.log(this,$(this)); var val = $(this).val(); if (val.length <=0 ){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText=label+"不能为空"; $(this).after(tag); flag=false; return false; } }); return flag; }) } </script> </body> </html>jQuery表单提交事件绑定demo
- jQuery循环break,在jQuery中return false 表示中断循环
$.each([11,22,33,44],function(k,v){ if(v == 22){ //return ; // continue return false; //break } console.log(v); - jQuery扩展方法
- jQuery.extend(object):扩展jQuery对象本身
//在jQuery命名空间上增加两个函数 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); //调用方式 $.min(2,3); // => 2 $.max(4,5); // => 5 - jQuery.fn.extend(object):扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
//增加两个插件方法 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); //调用方式 $("input[type=checkbox]").check(); $("input[type=radio]").uncheck();
- jQuery.extend(object):扩展jQuery对象本身
- jQuery自定义扩展的方法
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery扩展</title> </head> <body> <script src="jquery-1.12.4.js"></script> <script src="extend1.js"></script> <script> $.jabe1('123'); </script> </body> </html>HTML代码
//普通函数方式 a = function(jq){ jq.extend({ 'jabe1': function(arg){ console.log(arg); alert(arg); } }); function f1(){ } }; a(jQuery); //自执行函数方式 (function (jq) { jq.extend({ 'jabe1':function(arg) { // console.log(arg); alert(arg); } }); })(jQuery);js代码
- jQuery扩展实现基本验证
- 支持是否为空验证
- 文本长度验证
- 正则匹配验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入文本长度和手机号验证</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 200px; } </style> </head> <body> <div> <form id="form1"> <div class="item"> <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> </div> <div class="item"> <input class="c1" type="text" name="phone" label="手机" require="true" phone="true"/> </div> <input type="submit" value="提交" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script src="commons.js"></script> <script> $(function(){ $.valid('#form1'); }); </script> </body> </html>手机号和长度匹配验证demo-HTML代码
(function(jq){ function ErrorMessage(inp,message){ var tag = document.createElement('span'); tag.innerText = message; inp.after(tag); } jq.extend({ valid:function(form){ // #form1 $('#form1') jq(form).find(':submit').click(function(){ jq(form).find('.item span').remove(); var flag = true; jq(form).find(':text,:password').each(function(){ var require = $(this).attr('require'); if(require){ var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); ErrorMessage($(this),label + "不能为空"); flag = false; return false; } var minLen = $(this).attr('min-len'); if(minLen){ var minLenInt = parseInt(minLen); if(val.length<minLenInt){ var label = $(this).attr('label'); ErrorMessage($(this),label + "长度最小为"+ minLen); flag = false; return false; } //json.stringify() //JSON.parse() } var phone = $(this).attr('phone'); if(phone){ // 用户输入内容是否是手机格式 var phoneReg = /^1[3|5|8]\d{9}$/; if(!phoneReg.test(val)){ var label = $(this).attr('label'); ErrorMessage($(this),label + "格式错误"); flag = false; return false; } } // 1、html自定义标签属性 // 增加验证规则+错误提示 } // 每一个元素执行次匿名函数 // this //console.log(this,$(this)); /* var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + "不能为空"; $(this).after(tag); flag = false; return false; } */ }); return flag; }); } }); })(jQuery);手机号和长度匹配验证demo-js代码
正则匹配
1、定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配，类似生成器，每次执行exec取一个结果，全部匹配完成后返回null
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)var pattern = /^Java\w*/gm; var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; result = pattern.exec(text) result = pattern.exec(text) result = pattern.exec(text)
注：定义正则表达式也可以 reg= new RegExp()
2、匹配，JavaScript中支持正则表达式，其主要提供了两个功能：
- test(string) 检查字符串中是否和正则匹配
n = 'uui99sdf' reg = /\d+/ reg.test(n) ---> true # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
- exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组
//获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。 //非全局模式 //获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配） var pattern = /\bJava\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) //全局模式 //需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 var pattern = /\bJava\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text)
3、字符串中相关方法
obj.search(regexp) //获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效) obj.match(regexp) // 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部 obj.replace(regexp, replacement) //替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号
var text = "JavaScript is more fun than Java or JavaBeans!";
text.search(/\b(Java)\w*\b/g)
0//结果返回第一个的位置
text.match(/\b(Java)\w*\b/g)
["JavaScript", "Java", "JavaBeans"]//返回匹配的所有存放在列表中
text.replace('Java','Python')
"PythonScript is more fun than Java or JavaBeans!"//Java替换为Python
滚动菜单实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content">
<div menu="function1" class="section" style='background-color:green;'>
<h1>第一章</h1>
</div>
<div menu="function2" class="section" style='background-color:yellow;'>
<h1>第二章</h1>
</div>
<div menu="function3" class="section" style='background-color:red;'>
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
// 自动执行
Init();
});
function Init(){
$(window).scroll(function() {
// 监听窗口滚动事件
// 获取滚动条高度
var scrollTop = $(window).scrollTop();
// 当滚动到50像素时，左侧带菜单固定
if(scrollTop > 50){
$('.catalog').addClass('fixed');
}else{
$('.catalog').children().removeClass('active');
$('.catalog').removeClass('fixed');
}
// 循环所有的内容
$('.content').children().each(function(){
// 当前标签距离顶部高度
var offSet = $(this).offset(); // 高度，左边有多远
// offSet.top
// offSet.left
// 自身高度
var height = $(this).height();
//offSet<滚动高度<offSet+height
// 当前内容位于用户阅览区
if(scrollTop>offSet.top && scrollTop< offSet.top + height){
// $(this) 当前内容标签
/*
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
return false;
*/
var docHeight = $(document).height();
var winHeight = $(window).height();
// 如果，滚轮到达底部，则显示最后一个菜单
if(docHeight == winHeight+scrollTop)
{
$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
}else{
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
}
return false;
}
});
});
}
</script>
</body>
</html>
滚动菜单--demo
注：以上demo需要下载jquery，配合使用
前端插件
- fontawsome 小图片插件
- easyui 基于jQuery的UI插件集合体
- jqueryui 是jQuery插件，专指由jQuery官方维护的UI方向的插件
- bootstrap 模板使用
- -- 引入css
- -- 引入jQuery（2.x，1.12）
- -- 引入js
- bxslider 滚动图片插件
- jquery.lazyload 延迟加载图片滚动多少加载多少
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0 auto; } .pg-header{ height: 48px; background-color: #3b5998; } .w{ width: 980px; margin: 0 auto; } .clearfix:after{ clear: both; content: '.'; visibility: hidden; height: 0; display: block; } .product-list .item{ float: left; height: 240px; width: 184px; overflow: hidden; border: 1px solid red; padding: 5px; } .product-list .item .lazy{ height: 200px; width: 184px; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="w"> <div class="product-list clearfix"> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> </div> </div> </div> <div class="pg-footer"></div> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery.lazyload.js"></script> <script> $(function(){ $('img.lazy').lazyload({ //container: $('.product-list'), // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片） threshold: 100, //当图片顶部距离显示区域还有100像素时，就开始加载 placeholder : "img/grey.gif", // 图片未加载时，占位 effect: "slideDown", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉) effect_speed: 1000, // 效果出现的时间 event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等 data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original skip_invisible: true, // 是否跳过已经隐藏的图片（display:none） failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行 // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载 // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止 appear: function(){ // 当图片位置刚出现在视图时，触发此事件 $(this).attr('src'); }, load: function(){ // 当图片路径加载之后，触发此事件 $(this).attr('src'); } }); }) </script> </body> </html>lazyload--demo_HTML
$(function(){ $('img.lazy').lazyload({ //container: $('.product-list'), // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片） threshold: 100, //当图片顶部距离显示区域还有100像素时，就开始加载 placeholder : "img/grey.gif", // 图片未加载时，占位 effect: "slideDown", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉) effect_speed: 1000, // 效果出现的时间 event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等 data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original skip_invisible: true, // 是否跳过已经隐藏的图片（display:none） failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行 // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载 // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止 appear: function(){ // 当图片位置刚出现在视图时，触发此事件 $(this).attr('src'); }, load: function(){ // 当图片路径加载之后，触发此事件 $(this).attr('src'); } }); })参数说明
web框架
对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
WEB框架前面有WSGI或者是自己写的SOCKET，然后交给URL路由系统处理，然后交给某个函数或某个类，然后在模板里拿到模板然后模板和数据进行混合然后返回给用户！
WSGI用来接收请求，然后封装请求。对于Django来说都封装到了request里面。
MVC/MTV架构的不同主要是他们处理请求不同内容来放到不同的目录
请求周期
处理用户请求 放置HTML模版 操作数据库
Controllers Views Modals
Views Template Modals
其中Django属于MTV架构
Django框架
1、安装
pip3 install django
2、创建项目(前提环境变量配置好)
django-admin startproject HelloWorld
pycharm中可以直接进行创建project选择django项目
3、创建应用
python3 manage.py startapp cmdb
4、修改urls
from cmdb import views
url(r'^index/', views.index),
5、添加index函数在views
from django.shortcuts import HttpResponse
def index(request):
return HttpResponse("Hello World")
6、启动django
python manage.py runserver 127.0.0.1:8000
在pycharm中可以直接点击启动，访问http://127.0.0.1:8000/index/
7、修改setting中添加默认模板位置配置
TEMPLATES
'DIRS': [os.path.join(BASE_DIR, 'templates')],
项目目录下面添加创建templates目录，如果存在则不用创建，再在templates下创建index.html
8、 访问html文件
views下面用render返回
from django.shortcuts import render
def index(request):
return render(request,'index.html')
重新启动访问http://127.0.0.1:8000/index/就能看到index.html中的内容了
9、配置静态文件目录js、css、图片等目录
setting中最后添加如下配置
STATICFILES_DIRS = (
os.path.join(BASE_DIR,"statics"),
)
配置之后在项目project的目录下添加statics目录，并将jquery文件放入到该目录
STATIC_URL = '/static/' 表示引用的前缀
index.html中调用jquery地址如下：
<script src="/statics/jquery-1.12.4.js"></script>
10、浏览网页时候点击提交提示403的报错，需要将如下注释掉
MIDDLEWARE_CLASSES
#'django.middleware.csrf.CsrfViewMiddleware',
由于版本不同， MIDDLEWARE_CLASSES可能不相同，只需要注释'django.middleware.csrf.CsrfViewMiddleware'，这一行即可
11、配置提交的请求views，获取提交上来的数据并处理views
# 处理用户请求
USER_INPUT = [
{'user':'u1', 'email': 'e1'},
{'user':'u2', 'email': 'e2'},
]
def index(request):
# ...
# 判断用户是否是POST请求
if(request.method == 'POST'):
user = request.POST.get('user',None)
email = request.POST.get('email',None)
temp = {'user': user, 'email': email}
USER_INPUT.append(temp)
# request.POST.get('pwd',None)
# return HttpResponse('123')
# 模版引擎
# 获取index.html模版 + {'data': USER_INPUT } ==》 渲染
# 字符串
return render(request, 'index.html', {'data': USER_INPUT })
# def index(request):
# # return HttpResponse("Hello World")
# return render(request,'index.html')
views配置
12、在实际的环境中我们需要将提交和读取的数据放到数据库中的，相关sqllite配置如下：
- views配置，获取收到的数据和返回处理后的数据，setting中注册APP（在settings里面注册，如果没有注册不能忘记要不然不能创建数据表）
from django.shortcuts import render from django.shortcuts import HttpResponse from cmdb import models # Create your views here. # 处理用户请求 def index(request): # ... # 判断用户是否是POST请求 if(request.method == 'POST'): # user = request.POST.get('user',None) # email = request.POST.get('email',None) u = request.POST.get('user',None) e = request.POST.get('email',None) models.UserInfo.objects.create(user=u,email=e) data_list = models.UserInfo.objects.all() return render(request, 'index.html', {'data': data_list })views配置
//INSTALLED_APPS 中添加创建的应用名称 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'cmdb' ]setting配置
-
from django.db import models # Create your models here. class UserInfo(models.Model): user = models.CharField(max_length=32) email = models.CharField(max_length=32)models配置
models配置完之后需要执行创建表，两条命令
python3 manage.py makemigrations
python3 manage.py migrate 读取这个数据库结构生成数据库表，执行之后在应用名/migrations/0001_initial.py这个文件 - 重新启动就能看到效果了，将所有读取和写入的数据都进入到sqllite中了，不会重启之后数据就显示不出来了。
13、在实际应用中可能会涉及到跳转，django配置跳转的话
在views配置导入模块from django.shortcuts import redirect
返回跳转后的地址，可以是外部的地址也可以是自己做的页面地址return redirect('http://baidu.com')