下载bootstrap
bootstrap是一个前端框架，有很多已经做好的比较好看的css js效果，如果你前端想快点写好（或者你前端写的不是很漂亮），可以借助这个框架
bootstrap (http://www.bootcss.com/）下载bootstrap源码，放到djagno的static目录
引入bootstrap css
然后在你需要使用bootstrap精美效果的html文件中去使用这些样式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"> <title>Title</title> <style> body { background-color: #eee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 100px"> <h1 class="text-center">请登录</h1> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> <input type="" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <button type="submit" class="btn btn-primary btn-block">登录</button> </div> </div> </form> </div> </div> </div> </body> </html>
你会发现，很多class for 属性使用的不是你自己写的css样式，对，它们是bootstrap样式，如果你想深入学习bootstrap常用效果，可以去官网学习这些样式如何使用
配置django url/view
效果图
启动django，页面返回成功了
但是，这只是一个页面，你还不能登陆
用户登陆
准备好三个页面
有三个页面：首页 index.html、登陆页login.html、登陆成功后的页面 vippage.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/commons.css" /> </head> <body> <h2><a href="/login/">登陆</a></h2> <h1>Hello Django</h1> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"> <title>mysite-登录页面</title> <style> body { background-color: #eee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 100px"> <h1 class="text-center">请登录</h1> <form class="form-horizontal" action="/login/" method="post"> {% csrf_token %} <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> <input type="" name="username" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input type="password" name="pwd" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <button type="submit" class="btn btn-primary btn-block">登录</button> </div> </div> <p class="text-danger text-center">{{ error }}</p> </form> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2><a href="/">首页</a></h2> <h1>VIP界面...</h1> </body> </html>
补充
action 表单提交给哪个url methon 提交方式 csrf_token csrf 表单安全机制 name 提交的字段
用户操作
request.POST输出信息为
<QueryDict:
{'csrfmiddlewaretoken': ['9avjvBpq4kChezl1DTjR0cCq467DccMfaguQrQB23rDTL51xH5gUElX0Bi8bqxrq'],
'username': ['admin'], 'pwd': ['admin123']}
>
QueryDict是django自定义类型（说白了就是定义了一个类...）
django源码
因此，当你发现一些你不知道的数据类型，那就是django定义的类
用户账号判断
这里的"admin" "admin123" 应该从数据库中取出来，由于还没有设计数据库，因此用模拟数据
render 用于返回html，第三个参数可以是一个字典，用于html接收 redirect 用于重定向到某个url HttpResponse 用于返回一个字符串（说白了功能比render少呗）
提交方式
1.浏览器默认的提交方式是GET
2.GET 得到，表达的是获取数据，POST 提交，表达的是输入数据，不过这只是一种规范。
你也可以通过GET提交，POST获取，但是要注意的是，GET方式提交的数据大小有限制，且安全性不高（数据会出现在地址栏）
最后，其实提交方式有这些： GET、POST、PUT、PATCH（修改）、DELETE（删除）、OPTIONS、HEAD、TRACE，
一般只用get post就够了，查用get,剩下的操作可以交给post