Python的Django框架完成一个完整的论坛（5.html…
2018-06-24 02:11:49来源：未知 阅读 ()
最终效果：http://www.cnblogs.com/xuyiqing/p/8274912.html
article_detail.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/edmure.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/row-avatar.css"/> <link rel="stylesheet" href="/static/css/home.css"/> <script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script> <script type="text/javascript" src="/static/plugins/bootstrap/js/bootstrap.js"></script> </head> <body> <div class="pg-header"> <div class="title">{{ author_name }}的文章</div> <div class="menu-list"> <a class="menu-item" href="/">首页</a> <a class="menu-item" href="/delete/{{ nid }}">删除本文章</a> </div> </div> <div class="pg-body"> <div class="body-menu"> <div class="notice"> <div class="notice-header">个人信息：</div> <div class="notice-body"> <ul> <li>用户名：{{ author_name }}</li> <li>QQ号：{{ qq }}</li> </ul> <div class="memo"> 努力做更好的自己 </div> </div> </div> </div> <div class="body-content"> <div class="art-title"> <a>{{ content_title }}</a> </div> <div class="art-content"> {{ content }} </div> <div class="art-recommend clearfix"> <div class="recommend"> <a onclick="Good();" href="#" class="up" style="margin: 5px 10px;display: inline-block;padding: 5px 15px;border: 1px solid #dddddd;text-align: center;"> <i class="fa fa-thumbs-o-up fa-3" aria-hidden="true" style="font-size: 25px"></i> <div>{{ article.up_count }}</div> </a> {% if request.session.user_info.username == author_name %} <div> <a href="/edit/{{ author_name }}/{{ nid }}.html">编辑文章</a> </div> {% endif %} </div> </div> <div class="art-tips clearfix"> <div class="tips"> <span class="ctime">{{ article.create_time|date:"Y-m-d H:i:s" }}</span> <a class="author">{{ author_name }}</a> <span class="comment-count">评论({{ article.comment_count }})</span> <span class="read-count">阅读({{ article.read_count }})</span> </div> </div> <div id="AllanboltSignature"> <div style="border-bottom: #e0e0e0 1px dashed; border-left: #e0e0e0 1px dashed; padding: 10px; font-family: 微软雅黑; font-size: 11px; border-top: #e0e0e0 1px dashed; border-right: #e0e0e0 1px dashed; " id="PSignature"> <div style="float:left;width:70px;"> <img src="/static/imgs/o_Warning.png" style="width:65px;height:65px"> </div> <div style="float:left;padding-top:10px;"> <div style="padding: 1px">作者：<a href="#" target="_blank">{{ author_name }}</a></div> <div style="padding: 1px">出处：<a href="#" target="_blank">http://www.127.0.0.1:8000/</a> </div> <div style="padding: 1px">本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接</div> </div> <div style="clear:both;"></div> </div> </div> <div class="art-comment"> <div class="comment-title"> 评论: </div> <div class="comment-list"> {% for comment in comment_list %} <div class="comment-item"> <div class="reply-title clearfix"> {{ forloop.counter }}楼： <br> <div class="user-info"> <span>评论用户：{{ comment.user.username }}</span> <span>评论时间：{{ comment.create_time|date:"Y-m-d H:i:s" }}</span> </div> <div class="reply"> <a onclick="ReplyComment({{ comment.nid }});" id="reply_1{{ comment.nid }}">回 复</a> <a onclick="CancelReply({{ comment.nid }});" style="display: none" id="cancel{{ comment.nid }}">撤 销</a> </div> <br> <img style="width: 70px;height: 70px;padding: 1px; float: left" src="/{{ comment.user.avatar }}"> </div> <div> <div> <strong>{{ comment.content }}</strong> </div> </div> {% for item in reply_list %} {% if item.comment_reply_id == comment.nid %} <div> <div> {{ item.user.username }}:<strong>{{ item.content }}</strong> </div> </div> {% endif %} {% endfor %} {% if request.session.user_info %} <div style="display: none" id="{{ comment.nid }}"> <form method="post" action="/reply/{{ comment.nid }}/{{ comment.user.nid }}/{{ forloop.counter }}" id="fm{{ comment.nid }}"> {% csrf_token %} <input type="text" id="reply{{ comment.nid }}" style="width: 800px" name="content"> <input class="btn btn-default" type="button" onclick="ReplySubmit({{ article.nid }},{{ comment.nid }},{{ request.session.user_info.nid }});"/> </form> </div> {% endif %} {% if request.session.user_info.username == comment.user.username %} <form id="cm" method="POST"> {% csrf_token %} <input type="hidden" value="{{ comment.nid }}" name="comment_nid"/> <a onclick="Delete();" class="btn btn-warning">删除评论</a> </form> {% endif %} </div> {% endfor %} </div> <div class="comment-area"> <form method="POST" id="fm"> {% csrf_token %} <div class="reply-area" style="position: relative;"> {% if not request.session.user_info %} <div style="text-align:center;line-height:200px;position: absolute;top:0;left:0;right:0;bottom: 0;background-color: rgba(255,255,255,.6)"> 您需要登录后才可以回帖 <a href="/login/">登录</a> | <a href="/register/">立即注册</a> </div> {% endif %} <textarea name="content" style="width: 100%;height:200px;"></textarea> </div> <div> <div class="reply-btn"> <a class="btn btn-primary" id="submit">发表回复</a> </div> </div> </form> </div> </div> </div> </div> <script src="/static/js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function () { Reply(); }); function Reply() { $('#submit').click(function () { $.ajax({ url: '/reply/{{ request.session.user_info.username }}/{{ nid }}', type: 'POST', data: $('#fm').serialize(), success: function () { location.reload(); } }) }) } function Delete() { $.ajax({ url: '/delete_comment/', type: 'POST', data: $('#cm').serialize(), success: function () { location.reload(); } }) } function Good() { $.ajax({ url: '/good/{{ article.nid }}/{{ request.session.user_info.nid }}', type: 'GET', success: function (arg) { if (arg.status) { location.reload(); } else { window.alert("点赞成功"); location.reload(); } } }) } function ReplyComment(nid) { $("#" + "reply" + nid).parent().parent().removeAttr('style'); $("#" + "cancel" + nid).removeAttr('style'); $("#" + "reply_1" + nid).attr('style', "display:none;") } function CancelReply(nid) { $("#" + "reply" + nid).parent().parent().attr('style', "display:none;"); $("#" + "cancel" + nid).attr('style', "display:none;"); $("#" + "reply_1" + nid).removeAttr('style'); } function ReplySubmit(a, b, c) { $.ajax({ url: "/comment-reply/" +a+ "/"+ b + "/" + c, type: 'POST', data: $("#" + "fm" + b).serialize(), success: function (arg) { window.alert("回复成功"); location.reload(); } }) } </script> </body> </html>
article_manage.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/backend.css"/> <style> .conditions a{ display: inline-block; padding: 2px 5px; margin-left: 5px; } .conditions a.active{ background-color: #b35215; color: #ffffff; } </style> </head> <body> <div class="pg-header"> <div class="logo left" style="text-align: center;background-color: #1c5a9c;"> <a href="#" style="color: #ffffff;font-size:30px;font-weight: bold;text-decoration: none"> 文章管理 </a> </div> <div class="left-menu left"> <a class="menu-item" href="/">首页</a> </div> </div> <div class="pg-body"> <div class="content" style="left: 5px"> <ol class="breadcrumb" style="margin-bottom: 0;"> <li><a href="#">文章管理</a></li> </ol> <div> <div class="clearfix" style="height: 36px;line-height: 35px;padding: 0 15px;border-top: 1px solid #dddddd;background-color: #f1f0f0"> <a href="/write/{{ request.session.user_info.username }}.html"> <i class="fa fa-plus-circle" aria-hidden="true"></i> 创建新文章 </a> </div> <table class="table table-bordered"> <thead> <tr> <th>文章标题</th> <th>操作</th> </tr> </thead> <tbody> {% for row in article_list %} <tr nid="{{ row.nid }}"> <td><a href="/{{ row.article_type_id }}/{{ user.username }}/{{ row.nid }}.html">{{ row.title }}</a></td> <td> <a class="btn btn-danger btn-xs" href="/delete/{{ row.nid }}/"> <i class="fa fa-times" aria-hidden="true"></i> 删除 </a> <a class="btn btn-primary btn-xs" href="/edit/{{ user.username }}/{{ row.nid }}.html"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑 </a> </td> <td> 阅读数： {{ row.read_count }}| 点赞数： {{ row.up_count }}| 评论数： {{ row.comment_count }} </td> </tr> {% endfor %} </tbody> </table> <div class="clearfix"> <ul class="pagination left" style="margin-top: 0"> {{ page_str }} </ul> </div> </div> </div> </div> </body> </html>
edit_article.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/backend.css"/> </head> <body> <div class="pg-header"> <div class="logo left" style="text-align: center;background-color: #1c5a9c;"> <a href="#" style="color: #ffffff;font-size:30px;font-weight: bold;text-decoration: none"> 一清论坛 </a> </div> <div class="left-menu left"> <a class="menu-item" href="/">首页</a> <a style="left: 500px;display: inline-block;padding: 0 30px">当前用户:{{ author_name }}</a> </div> <div class="right-menu right clearfix"> <div class="user-info right"> <a href="#" class="avatar"> <img class="img-circle" src="/static/imgs/avatar/default.png"> </a> <div class="more-info"> <a href="#" class="more-item">修改个人信息</a> <a href="/logout/" class="more-item">注销</a> </div> </div> <a class="user-menu right"> 消息 <i class="fa fa-commenting-o" aria-hidden="true"></i> <span class="badge bg-success">0</span> </a> </div> </div> <div class="pg-body"> <div class="content" style="left: 10px"> <div style="padding: 5px 8px;"> <form method="POST" action="/edit/{{ author_name }}/{{ article_id }}.html" name="articleForm"> {% csrf_token %} <div class="form-group"> <label for="title">标题</label> <input type="text" class="form-control" placeholder="文章标题" name="title" value="{{ title }}"/> </div> <div class="form-group"> <label for="summary">简介</label> <input type="text" class="form-control" placeholder="简介，在首页显示的内容" name="summary" value="{{ summary }}"/> </div> <div class="form-group"> <label for="content">内容</label> <textarea name="content" style="width: 100%;height:500px" id="content">{{ content }}</textarea> </div> <div class="checkbox"> <label> 文章类型<br><br> <input type="radio" value="1" name="article_type"> 学习<br><br> <input type="radio" value="2" name="article_type"> 游戏<br><br> <input type="radio" value="3" name="article_type"> 感情<br><br> <input type="radio" value="4" name="article_type"> 生活<br><br> </label> </div> <div class="form-group"> <input type="button" class="btn btn-primary" value="保 存" onclick="defineSubmit(this)"> </div> </form> </div> </div> </div> <script> function defineSubmit(btn) { document.articleForm.submit() } </script> </body> </html>
home.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/edmure.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/row-avatar.css"/> <script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script> <script type="text/javascript" src="/static/plugins/bootstrap/js/bootstrap.js"></script> <style> .bgimg { background-image: url(/static/timg.jpg); background-position: right; background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">一清论坛</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> {% if not article_type_id %} <li class="active"><a href="/">全部</a></li> {% else %} <li><a href="/">全部</a></li> {% endif %} {% for item in article_type_list %} {% if item.0 == article_type_id %} <li class="active"><a href="/all/{{ item.0 }}.html">{{ item.1 }}</a></li> {% else %} <li><a href="/all/{{ item.0 }}.html">{{ item.1 }}</a></li> {% endif %} {% endfor %} </ul> <ul class="nav navbar-nav navbar-right "> {% if request.session.user_info %} <li><i class="fa fa-pencil-square-o" style="padding-right:0; padding-top: 18px"></i></li> <li><a href="/write/{{ request.session.user_info.username }}.html" style="padding-right: 50px">写文章</a></li> <li><a href="/">{{ request.session.user_info.username }}</a></li> <li><a style="padding-left: 0;padding-right: 0;">·</a></li> <li><a href="/article_manage/{{ request.session.user_info.username }}">文章管理</a></li> <li><a style="padding-left: 0;padding-right: 0;">·</a></li> <li><a href="/user_info/{{ request.session.user_info.username }}">个人信息</a></li> <li><a style="padding-left: 0;padding-right: 0;">|</a></li> <li><a href="/logout/">退出</a></li> {% elif not request.session.user_info %} <li><a href="/login/">登陆</a></li> <li><a href="/register">注册</a></li> {% endif %} </ul> </div> </div> </nav> <div class="container bgimg"> <div> <div class="col-md-8"> <div class="article-list"> {% for row in article_list %} <div class="article-item clearfix"> <h3> <a href="/{{ row.article_type_id }}/{{ row.author.username }}/{{ row.nid }}.html">{{ row.title }}</a> </h3> <div class="clearfix"> <a class="avatar left" href="#"> <img src="/{{ row.author.avatar }}"> </a> {{ row.summary }} </div> <div class="footers"> <a class="ele"> <i class="fa fa-user-o" aria-hidden="true"></i> <span>{{ row.author.username }}</span> </a> <span>发布于{{ row.create_time|date:"Y-m-d H:i:s" }}</span> <a class="ele"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span>{{ row.comment_count }}</span> </a> <a class="ele"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <span>{{ row.up_count }}</span> </a> <a class="ele"> <span>阅读次数：{{ row.read_count }}</span> </a> </div> </div> {% endfor %} </div> <div class="clearfix"> <ul class="pagination"> {{ page_str }} </ul> </div> </div> <div class="col-md-4"> <div class="panel panel-default hot-recommend"> <div class="panel-heading">阅读排行</div> <div class="panel-body"> <ul class="list-unstyled"> {% for item in top_read %} <li>{{ forloop.counter }}: <a href="/{{ item.article_type_id }}/{{ item.author_name }}/{{ item.nid }}.html">{{ item.title }}</a> <h6>阅读次数:{{ item.read_count }}</h6> <h6>作者:{{ item.author_name }}</h6> </li> {% endfor %} </ul> </div> </div> </div> </div> </div> <div style="position: fixed;bottom: 20px;right: 45%; color: grey"> <span>计算机系1704许一清制作|QQ:2023503307</span> </div> <script src="/static/js/jquery-1.12.4.js"></script> <script> function GetMessage(user) { window.alert("OK"); $.ajax({ url: '/message/' + user, type: 'GET', success: function (arg) { } }) } </script> </body> </html>
login.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/edmure.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/account.css"/> </head> <body> <div style="background-color: paleturquoise" class="login"> <div style="font-size: 25px; font-weight: bold;text-align: center;"> 用户登陆 </div> <form id="fm" method="POST" action="/login/"> {% csrf_token %} <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码"> </div> <div class="form-group"> <label for="password">验证码</label> <div class="row"> <div class="col-xs-7"> <input type="text" class="form-control" name="check_code" id="check_code" placeholder="请输入验证码"> </div> <div class="col-xs-5"> <img id="check_code_img" src="/check_code/"> </div> </div> </div> <div class="checkbox"> <label> <input type="checkbox" value="1" name="rmb"> 一个月内自动登陆 </label> <div class="right"> <a href="#">忘记密码?</a> </div> </div> <div class="row"> <div class="col-xs-3"> <a id="submit" class="btn btn-default">登 陆</a> </div> <div class="col-xs-9" style="padding-left: 0;"> <div class="alert alert-danger hide"> <span style="padding: 0 5px 0 5px;display: inline-block;font-size: 14px"> <i class="fa fa-minus-circle" aria-hidden="true"></i> </span> <span id="error_msg" style="font-size: 12px;"></span> </div> </div> </div> </form> <script src="/static/js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function () { bindLogin(); }); function bindLogin() { $('#submit').click(function () { var $msg = $('#error_msg'); $msg.parent().addClass('hide'); $.ajax({ url: '/login/', type: 'POST', data: $('#fm').serialize(), dataType: 'JSON', success: function (arg) { if(arg.status){ location.href = '/'; }else{ $msg.parent().removeClass('hide'); $msg.text(arg.message); var img = $('#check_code_img')[0]; img.src = img.src + '?'; $('#password,#check_code').val(''); } } }) }) } </script> </div> </body> </html>
register.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/edmure.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/account.css"/> </head> <body> <div class="register"> <div style="font-size: 25px; font-weight: bold;text-align: center;"> 用户注册 </div> <form id="fm" method="POST" action="/register/"> {% csrf_token %} <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="qq">QQ号</label> <input type="text" class="form-control" name="qq" placeholder="请输入QQ号" id="qq"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码"> </div> <div class="form-group"> <label for="confirm_password">确认密码</label> <input type="password" class="form-control" name="confirm_password" placeholder="请重新输入密码" id="confirm_password"> </div> <div class="form-group"> <label for="password">验证码</label> <div class="row"> <div class="col-xs-7"> <input type="text" class="form-control" name="check_code" id="check_code" placeholder="请输入验证码"> </div> <div class="col-xs-5"> <img id="check_code_img" src="/check_code/"> </div> </div> </div> <div class="row"> <div class="col-xs-3"> <a id="submit" class="btn btn-default">注 册</a> </div> <div class="col-xs-9" style="padding-left: 0;"> <div class="alert alert-danger hide"> <span style="padding: 0 5px 0 5px;display: inline-block;font-size: 14px"> <i class="fa fa-minus-circle" aria-hidden="true"></i> </span> <span id="error_msg" style="font-size: 12px;"></span> </div> </div> </div> </form> <script src="/static/js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function () { bindLogin(); }); function bindLogin() { $('#submit').click(function () { var $msg = $('#error_msg'); $msg.parent().addClass('hide'); $.ajax({ url: '/register/', type: 'POST', data: $('#fm').serialize(), dataType: 'JSON', success: function (arg) { if(arg.status){ window.alert("注册成功"); location.href = '/' }else{ $msg.parent().removeClass('hide'); $msg.text(arg.message); var img = $('#check_code_img')[0]; img.src = img.src + '?'; $('#password,#check_code,#confirm_password').val(''); } } }) }) } </script> </div> </body> </html>
user_info.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/backend.css"/> <style> .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; } .avatar-container { height: 200px; width: 200px; padding: 2px; border: 1px solid #dddddd; position: relative; } .avatar-container img { height: 100%; width: 100%; border: 0; overflow: hidden; } .avatar-container .text { text-align: center; } .avatar-container .img-file { top: 0; left: 0; right: 0; bottom: 0; opacity: 0; position: absolute; z-index: 102; } </style> </head> <body> <div class="pg-header"> <div class="logo left" style="text-align: center;background-color: #1c5a9c;"> <a href="#" style="color: #ffffff;font-size:30px;font-weight: bold;text-decoration: none"> 个人信息 </a> </div> <div class="left-menu left"> <a class="menu-item" href="/">首页</a> </div> <div class="right-menu right clearfix"> <div class="user-info right"> <a href="/logout" class="more-item">注销</a> </div> </div> </div> <div class="pg-body"> <div class="content" style="left: 5px"> <ol class="breadcrumb"> <li class="active">用户信息</li> </ol> <div> <div class="row" style="position: relative;"> <form class="form-horizontal"> <div class="col-xs-12"> <div class="form-group"> <label class="col-xs-2 control-label">用户名</label> <div class="col-xs-5"> <p class="form-control-static">{{ user.username }}</p> </div> </div> <div class="form-group"> <label class="col-xs-2 control-label">发表文章个数</label> <div class="col-xs-4"> <p class="form-control-static">{{ user.article_count }}</p> </div> </div> <div class="form-group"> <label class="col-xs-2 control-label">QQ</label> <div class="col-xs-4"> <p class="form-control-static">{{ user.qq }}</p> </div> </div> <div class="form-group"> <label class="col-xs-2 control-label">密码</label> <div class="col-xs-4"> <p class="form-control-static">{{ user.password }}</p> </div> </div> </div> </form> <div style="position: absolute;" class="col-xs-offset-7 col-xs-5"> <div class="avatar-container"> <iframe style="display: none;" id="upload_iframe" name="upload_iframe"></iframe> <form method="POST" action="/upload-avatar/{{ request.session.user_info.nid }}" enctype="multipart/form-data" target="upload_iframe"> {% csrf_token %} {% if request.session.user_info.avatar %} <img id="previewImg" src="/{{ request.session.user_info.avatar }}" style="border-radius: 50%;"> {% else %} <img id="previewImg" src="/{{ user.avatar }}" style="border-radius: 50%;"> {% endif %} <div class="text">点击图片更换</div> <input id="avatarImg" name="avatar_img" type="file" class="img-file"/> </form> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function () { bindChangeAvatar4(); }); function bindChangeAvatar1() { $('#avatarImg').change(function () { var file_obj = $(this)[0].files[0]; $('#prevViewImg')[0].src = window.URL.createObjectURL(file_obj) }) } function bindChangeAvatar2() { $('#avatarImg').change(function () { var file_obj = $(this)[0].files[0]; var reader = new FileReader(); reader.readAsDataURL(file_obj); reader.onload = function (e) { $('#previewImg')[0].src = this.result; }; }) } function bindChangeAvatar3() { $('#avatarImg').change(function () { var file_obj = $(this)[0].files[0]; var form = new FormData(); form.add('img_upload', file_obj); $.ajax({ url: '', data: form, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success: function (arg) { } }) }) } function bindChangeAvatar4() { $('#avatarImg').change(function () { $(this).parent().submit(); $('#upload_iframe').load(function () { var iframeContents = this.contentWindow.document.body.innerText; iframeContents = JSON.parse(iframeContents); if (iframeContents.status) { $('#previewImg').attr('src', '/' + iframeContents.data); } }) }) } </script> </body> </html>
write_article.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="/static/css/commons.css"/> <link rel="stylesheet" href="/static/css/backend.css"/> </head> <body> <div class="pg-header"> <div class="logo left" style="text-align: center;background-color: #1c5a9c;"> <a href="#" style="color: #ffffff;font-size:30px;font-weight: bold;text-decoration: none"> 一清论坛 </a> </div> <div class="left-menu left"> <a class="menu-item" href="/">首页</a> <a style="left: 500px;display: inline-block;padding: 0 30px">当前用户:{{ author_name }}</a> </div> <div class="right-menu right clearfix"> <div class="user-info right"> <a href="#" class="avatar"> <img class="img-circle" src="/static/imgs/avatar/default.png"> </a> <div class="more-info"> <a href="#" class="more-item">修改个人信息</a> <a href="/logout/" class="more-item">注销</a> </div> </div> <a class="user-menu right"> 消息 <i class="fa fa-commenting-o" aria-hidden="true"></i> <span class="badge bg-success">0</span> </a> </div> </div> <div class="pg-body"> <div class="content" style="left: 10px"> <div style="padding: 5px 8px;"> <form method="POST" action="/write/{{ author_name }}.html" name="articleForm"> {% csrf_token %} <div class="form-group"> <label for="title">标题</label> <input type="text" class="form-control" placeholder="文章标题" name="title"/> </div> <div class="form-group"> <label for="summary">简介</label> <input type="text" class="form-control" placeholder="简介，在首页显示的内容" name="summary"/> </div> <div class="form-group"> <label for="content">内容</label> <textarea name="content" style="width: 100%;height:500px" id="content"></textarea> </div> <div class="checkbox"> <label> 文章类型<br><br> <input type="radio" value="1" name="article_type"> 学习<br><br> <input type="radio" value="2" name="article_type"> 游戏<br><br> <input type="radio" value="3" name="article_type"> 感情<br><br> <input type="radio" value="4" name="article_type"> 生活<br><br> </label> </div> <div class="form-group"> <input type="button" class="btn btn-primary" value="保 存" onclick="defineSubmit(this)"> </div> </form> </div> </div> </div> <script> function defineSubmit(btn) { document.articleForm.submit() } </script> </body> </html>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：CSS垂直水平居中
下一篇：CSS中的overflow属性
相关文章
- 【2020Python修炼记】前端开发之 网页设计超级酷炫小技巧 2020-05-14
- 【2020Python修炼记】前端开发之 CSS基础布局 2020-05-13
- 【2020Python修炼记】前端开发之 CSS基础和CSS选择器 2020-05-12
- 【2020Python修炼记】前端开发之 HTML常用标签汇总 2020-05-12
- 【2020Python修炼记】前端开发之 前端工具和HTML 2020-05-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签