博客系统_注册页面知识点备忘

一、编写forms组件，以便检验各项是否符合要求：

      1、Django 中的forms组件的三大优势：

　　　　1.1、对用户提交的数据进行验证

　　　　1.2、 保留上次输入内容

　　　　1.3、 生成HTML标签

　　2、Django 中forms组件的使用流程：

　　　　 2.1、html文件中使用模板语法

 1 <body>
 2 {#背景图片#}
 3 <div style="position:absolute;z-index:-1;height:100%;width:100%;top:0px;left:0px;">
 4     <img src="http://pic1.win4000.com/wallpaper/9/5481482b9a599.jpg?tupianxiaozhan.jpg" height="100%" width="100%"/>
 5 </div>
 6 
 7 <div class="container">    <div class="row">
 8         <div class="col-md-4  col-md-offset-3">
 9 
10             <form>
11                 {% csrf_token %}
12                 <div class="form-group">
13                     <label for="username">用户名</label>
14                    {{ form_obj.username }}
15                 </div>
16                 <input type="button" value="提交" class="btn btn-primary" id="subBtn"><span class="error"></span>
17             </form>
18         </div>
19     </div>
20 </div>
21 
22 </body>
html文件

　　　　 2.2、在form组件中接收前端发回的数据，并且给通过指定类来渲染样式：　

1 class RegForm(forms.Form):
2 
3     username=forms.CharField(max_length=12,min_length=5,required=True,error_messages={
4         "required":"不能为空",      # 约束条件
5          },widget=widgets.TextInput(    # 接收前端发回的数据，注意类型
6         attrs={"class":"form-control","placeholder":"username"}))      # 给页面增加类，以达到bootstrap能够渲染页面
form组件

二、上传图像新增小人，以及小人覆盖input框细节：

　　1、将上传图片的框用小人图标替换掉　　

　　　　备注：把input框与图像重合后，将input框的透明度设置为0，以此来达到显示图像的目的。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <script src="/static/dist/js/jquery-3.1.1.js"></script>
 9     <script src="/static/dist/js/bootstrap.js"></script>
10     <link rel="stylesheet" href="/static/dist/css/bootstrap.css">
11     <link rel="stylesheet" href="/static/css/register.css">
12 </head>
13 <body>
14 {#背景图片#}
15 <div style="position:absolute;z-index:-1;height:100%;width:100%;top:0px;left:0px;">
16     <img src="http://pic1.win4000.com/wallpaper/9/5481482b9a599.jpg?tupianxiaozhan.jpg" height="100%" width="100%"/>
17 </div>
18 
19 <div class="container">    <div class="row">
20         <div class="col-md-4  col-md-offset-3">
21 
22             <form>
23                 {% csrf_token %}
24                 <div class="form-group">
25                     <label for="username">用户名</label>
26                     <input type="text" class="form-control" id="username" placeholder="username">
27                 </div>
28                 <div class="form-group">
29                     <label for="password">密码</label>
30                     <input type="password" class="form-control" id="password" placeholder="password">
31                 </div>
32                 <div class="form-group">
33                     <label for="password">确认密码</label>
34                     <input type="password" class="form-control" id="password" placeholder="password">
35                 </div>
36                 <div class="form-group">
37                     <label for="email">邮箱</label>
38                     <input type="email" class="form-control" id="email" placeholder="password">
39                 </div>
40                 <div class="form-group avatar">
41                     <label for="avatar">头像</label>
42                     <img src="/static/img/default.png" alt="" id="avatar_img">
43                    <input type="file" class="form-control" id="avatar_file"> {# 点击按钮#}
44                 </div>
45 
46                 <input type="button" value="提交" class="btn btn-primary" id="subBtn"><span class="error"></span>
47             </form>
48         </div>
49     </div>
50 </div>
51 
52 </body>
53 </html>
register.html
 1 .container{
 2     margin-top: 100px;
 3   }
 4 
 5 .avatar{
 6     position: relative;     /* 相对定位*/
 7     width: 60px;
 8     height: 60px;
 9 }
10 
11 #avatar_img,#avatar_file{
12     position: absolute;     /* 绝对定位*/
13     top: 0;
14     left: 40px;
15     width: 30px;
16     height: 20px;
17 }
18 #avatar_file{
19     opacity: 0;     /* 将原本点击按钮的透明度设置为0，图像与按钮的框重合后只显示图像*/
20 }
register.css

 三、media文件配置：

　　1、为什么要media？

　　　　配置完media后方便找图像

　　2、如何配置media？　　

 1 #settings.py配置路径：
 2     MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media","upload")  # 绝对路径
 3     MEDIA_URL="/media/"    # 别名
 4 
 5 #url.py指定条件：
 6     url(r'^media/?P<path>.*)$',serve,{'document_root':settings.MEDIA_ROOT}),
 7 
 8 #models.py
 9 class UserInfo(AbstractUser):  
10     """
11     用户信息
12     """
13     avatar = models.FileField(verbose_name='头像', upload_to='avatar', default="/avatar/default.png")
14     def __str__(self):
15         return self.username

 

 

未完。。。

 

posted @ 2017-11-22 02:02  Justin067  阅读(105)  评论(0)    收藏  举报
TOP