一、登陆功能（验证码）

  1.  from geetest import GeetestLib
  2.  from django.contrib import auth
  3.  
  4.  #使用极验滑动验证码的登陆
  5.  def login(request):
  6.      if request.method == "POST":
  7.          #初始化一个返回给ajax的字典
  8.          ret = {"status":0,"msg":""}
  9.          #从提交的数据中获取用户名和密码
  10.          username = request.POST.get("username")
  11.          password = request.POST.get("password")
  12.          #获取验证码相关数据
  13.          gt = GeetestLib(pc_geetest_id, pc_geetest_key)
  14.          challenge = request.POST.get(gt.FN_CHALLENGE, '')
  15.          validate = request.POST.get(gt.FN_VALIDATE, '')
  16.          seccode = request.POST.get(gt.FN_SECCODE, '')
  17.          status = request.session[gt.GT_STATUS_SESSION_KEY]
  18.          user_id = request.session["user_id"]
  19.  
  20.          if status:
  21.              result = gt.success_validate(challenge, validate, seccode, user_id)
  22.          else:
  23.              result = gt.failback_validate(challenge, validate, seccode)
  24.  
  25.          #如果result有值，则验证成功,利用auth做验证
  26.          if result:
  27.              user = auth.authenticate(username=username,password=password)
  28.              if user:
  29.                  #如果用户名密码正确
  30.                  auth.login(request,user)
  31.                  ret["msg"] = "/index/"
  32.              else:
  33.                  ret["status"] = 1
  34.                  ret["msg"] = "用户名密码错误"
  35.          else:
  36.              #如果验证吗错误
  37.              ret["status"] = 1
  38.              ret["msg"] = "验证码错误"
  39.          return JsonResponse(ret)
  40.      return render(request,"login.html",locals())
  41.  
  42.  #请在官网申请ID使用，示例ID不可使用
  43.  pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
  44.  pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
  45.  
  46.  #获取滑动验证码
  47.  def get_geetest(request):
  48.      user_id = 'test'
  49.      gt = GeetestLib(pc_geetest_id, pc_geetest_key)
  50.      status = gt.pre_process(user_id)
  51.      request.session[gt.GT_STATUS_SESSION_KEY] = status
  52.      request.session["user_id"] = user_id
  53.      response_str = gt.get_response_str()
  54.      return HttpResponse(response_str)
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  7.      <link rel="stylesheet" href="/static/css/mystyle.css">
  8.  </head>
  9.  <body>
  10.  
  11.  <div class="container">
  12.      <div class="row">
  13.          <form class="form-horizontal col-md-6 col-md-offset-3 login-form">
  14.              {% csrf_token %}
  15.              <div class="form-group">
  16.                  <label for="username" class="col-sm-2 control-label">用户名</label>
  17.                  <div class="col-sm-10">
  18.                      <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
  19.                  </div>
  20.              </div>
  21.              <div class="form-group">
  22.                  <label for="password" class="col-sm-2 control-label">密码</label>
  23.                  <div class="col-sm-10">
  24.                      <input type="password" class="form-control" id="password" name="password" placeholder="密码">
  25.                  </div>
  26.              </div>
  27.              <div class="form-group">
  28.                  <div id="popup-captcha"></div>
  29.              </div>
  30.              <div class="form-group">
  31.                  <div class="col-sm-offset-2 col-sm-10">
  32.                      <button type="button" class="btn btn-default" id="login-button">登录</button>
  33.                      <span class="login-error"></span>
  34.                  </div>
  35.              </div>
  36.          </form>
  37.      </div>
  38.  </div>
  39.  
  40.  <script src="/static/jquery.js"></script>
  41.  <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  42.  <!-- 引入封装了failback的接口--initGeetest -->
  43.  <script src="http://static.geetest.com/static/tools/gt.js"></script>
  44.  <script>
  45.      //发送数据
  46.      var handlerPopup = function (captchaObj) {
  47.      // 成功的回调
  48.      captchaObj.onSuccess(function () {
  49.          var validate = captchaObj.getValidate();
  50.          var username = $("#username").val();
  51.          var password = $("#password").val();
  52.          $.ajax({
  53.              url: "/login/", // 进行二次验证
  54.              type: "post",
  55.              dataType: "json",
  56.              data: {
  57.                  username: username,
  58.                  password: password,
  59.                  csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
  60.                  geetest_challenge: validate.geetest_challenge,
  61.                  geetest_validate: validate.geetest_validate,
  62.                  geetest_seccode: validate.geetest_seccode
  63.              },
  64.              success: function (data) {
  65.                  if(data.status){
  66.                      $(".login-error").text(data.msg);
  67.                  }else{
  68.                      location.href = data.msg;
  69.                  }
  70.              }
  71.          });
  72.      });
  73.      //绑定事件显示滑动验证码
  74.      $("#login-button").click(function () {
  75.          captchaObj.show();
  76.      });
  77.      // 将验证码加到id为captcha的元素里
  78.      captchaObj.appendTo("#popup-captcha");
  79.      // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
  80.  };
  81.  
  82.      // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
  83.      $.ajax({
  84.          url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
  85.          type: "get",
  86.          dataType: "json",
  87.          success: function (data) {
  88.              // 使用initGeetest接口
  89.              // 参数1：配置参数
  90.              // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
  91.              initGeetest({
  92.                  gt: data.gt,
  93.                  challenge: data.challenge,
  94.                  product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
  95.                  offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
  96.                  // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
  97.              }, handlerPopup);
  98.          }
  99.      });
  100.  
  101.  </script>
  102.  </body>
  103.  </html>

二、注册功能（ajax上传数据）

  1.  def register(request):
  2.      if request.method == "POST":
  3.          form_obj = RegisterForm(request.POST)
  4.          ret = {"status": 0, "msg": ""}
  5.          if form_obj.is_valid():
  6.              form_obj.cleaned_data.pop("re_pwd")
  7.              avatar = request.FILES.get("avatar")
  8.              models.UserInfo.objects.create(**form_obj.cleaned_data,avatar=avatar)
  9.              return JsonResponse(ret)
  10.          else:
  11.              ret["status"] = 1
  12.              ret["msg"] = form_obj.errors
  13.              return JsonResponse(ret)
  14.      form_obj = RegisterForm()
  15.      return render(request,"register.html",locals())
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  7.      <link rel="stylesheet" href="/static/css/mystyle.css">
  8.  </head>
  9.  <body>
  10.  
  11.  <div class="container">
  12.      <div class="row">
  13.          <form class="form-horizontal register-form" method="post" action="/register/" novalidate enctype="multipart/form-data">
  14.              {% csrf_token %}
  15.              <div class="form-group">
  16.                 <label for="{{ form_obj.username.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.username.label }}</label>
  17.                  <div class="col-sm-4">
  18.                      {{ form_obj.username }}
  19.                      <span id="helpBlock2" class="help-block">{{ form_obj.username.errors.0 }}</span>
  20.                  </div>
  21.              </div>
  22.  
  23.              <div class="form-group">
  24.                 <label for="{{ form_obj.password.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.password.label }}</label>
  25.                  <div class="col-sm-4">
  26.                      {{ form_obj.password }}
  27.                      <span id="helpBlock2" class="help-block">{{ form_obj.password.errors.0 }}</span>
  28.                  </div>
  29.              </div>
  30.  
  31.              <div class="form-group">
  32.                 <label for="{{ form_obj.re_pwd.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.re_pwd.label }}</label>
  33.                  <div class="col-sm-4">
  34.                      {{ form_obj.re_pwd }}
  35.                      <span id="helpBlock2" class="help-block">{{ form_obj.re_pwd.errors.0 }}</span>
  36.                  </div>
  37.              </div>
  38.  
  39.              <div class="form-group">
  40.                  <label for="{{ form_obj.email.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.email.label }}</label>
  41.                  <div class="col-sm-4">
  42.                      {{ form_obj.email }}
  43.                      <span id="helpBlock2" class="help-block">{{ form_obj.email.errors.0 }}</span>
  44.                  </div>
  45.              </div>
  46.  
  47.              <div class="form-group">
  48.                 <label class="col-sm-2 control-label">头像</label>
  49.                  <div class="col-sm-4">
  50.                      <label for="id_avatar"><img id="avatar-img" src="/static/avatar/default.png"></label>
  51.                      <input type="file" name="avatar" id="id_avatar" style="display:none">
  52.                      <span id="helpBlock2" class="help-block"></span>
  53.                  </div>
  54.              </div>
  55.  
  56.              <div class="form-group">
  57.                  <div class="col-sm-offset-2 col-sm-10">
  58.                      <button type="button" class="btn btn-success" id="register-btn">注册</button>
  59.                  </div>
  60.              </div>
  61.          </form>
  62.      </div>
  63.  </div>
  64.  
  65.  <script src="/static/jquery.js"></script>
  66.  <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  67.  <script>
  68.  //获取头像，自动加载显示选中的头像
  69.      $("#id_avatar").change(function(){
  70.          //第一步、创建一个读取文件的对象
  71.          var fileReader = new FileReader();
  72.          //第二步、读取选中的文件
  73.          fileReader.readAsDataURL(this.files[0]);
  74.          //读取文件需要时间，所以要等到读取完文件，再进行下一步操作
  75.          fileReader.onload = function(){
  76.              //第三步、把图片加入img标签中
  77.              $("#avatar-img").attr("src",fileReader.result)
  78.          }
  79.      });
  80.  
  81.  //ajax上传注册信息并获取错误信息
  82.      $("#register-btn").click(function(){
  83.  
  84.          //ajax上传文件，data部分必须用对象
  85.          var formData = new FormData();
  86.          formData.append("username",$("#id_username").val());
  87.          formData.append("password",$("#id_password").val());
  88.          formData.append("re_pwd",$("#id_re_pwd").val());
  89.          formData.append("email",$("#id_email").val());
  90.          formData.append("avatar",$("#id_avatar")[0].files[0]);
  91.          formData.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
  92.  
  93.          $.ajax({
  94.              url:"/register/",
  95.              type:"post",
  96.              //ajax上传文件需要加两个参数
  97.              processData:false,
  98.              contentType:false,
  99.              data:formData,
  100.              success:function(data){
  101.                  if(data.status){
  102.                      //如果有错误，则返回错误信息
  103.                      $.each(data.msg,function(k,v){
  104.                          //k是键，v是值，但是v是列表，错误信息可能有多个
  105.                          $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
  106.                      })
  107.                  }else{
  108.                      //如果没有错误，则跳转到指定页面
  109.                      location.href = "/login/"
  110.                  }
  111.              }
  112.          })
  113.      })
  114.  
  115.  //输入框取得焦点时，清楚错误信息
  116.      $("form input").focus(function(){
  117.          $(this).next("span").text("").parent().parent().removeClass("has-error");
  118.      });
  119.  
  120.  </script>
  121.  </body>
  122.  </html>

三、博客主页

配置media用户上传数据：

　　1、在settings中配置：

  1.  #Django用户上传的文件都叫media文件
  2.  MEDIA_URL = '/media/'
  3.  MEDIA_ROOT = os.path.join(BASE_DIR,"media")

　　2、在url中配置：

  1.  from django.views.static import serve
  2.  from django.conf import settings
  3.  
  4.  urlpatterns = [
  5.      #media相关路由设置
  6.      re_path(r'^media/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),
  7.  ]

主页html：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  7.      <link rel="stylesheet" href="/static/css/mystyle.css">
  8.      <style>
  9.          .box{position:relative;}
  10.          .left-info {display: inline-block;width: 10%;margin-left: 85px;}
  11.          .main-info {display: inline-block;width: 70%;}
  12.          .right-info {display: inline-block;width: 10%;}
  13.          .author-avatar{width:70px;height:70px;}
  14.          .article-footer span{margin-right:10px;}
  15.          .article-footer{margin-top:10px;}
  16.      </style>
  17.  </head>
  18.  <body>
  19.  
  20.  //把默认导航条第一个nav标签的navbar-default改成-inverse就从白色变成黑色
  21.  {#导航条#}
  22.  <nav class="navbar navbar-inverse">
  23.      <div class="container-fluid">
  24.          <!-- Brand and toggle get grouped for better mobile display -->
  25.          <div class="navbar-header">
  26.              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  27.                      data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  28.                  <span class="sr-only">Toggle navigation</span>
  29.                  <span class="icon-bar"></span>
  30.                  <span class="icon-bar"></span>
  31.                  <span class="icon-bar"></span>
  32.              </button>
  33.              <a class="navbar-brand" href="#">博客项目</a>
  34.          </div>
  35.  
  36.          <!-- Collect the nav links, forms, and other content for toggling -->
  37.          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  38.              <ul class="nav navbar-nav">
  39.                  <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  40.                  <li><a href="#">Link</a></li>
  41.              </ul>
  42.  
  43.              <ul class="nav navbar-nav navbar-right">
  44.                  {% if request.user.username %}
  45.                      <li><a href="#">{{ request.user.username }}</a></li>
  46.                      <li class="dropdown">
  47.                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  48.                             aria-expanded="false">个人中心 <span class="caret"></span></a>
  49.                          <ul class="dropdown-menu">
  50.                              <li><a href="#">Action</a></li>
  51.                              <li><a href="#">Another action</a></li>
  52.                              <li><a href="#">Something else here</a></li>
  53.                              <li role="separator" class="divider"></li>
  54.                              <li><a href="/logout">注销账户</a></li>
  55.                          </ul>
  56.                      </li>
  57.                  {% else %}
  58.                      <li><a href="/login">登陆</a></li>
  59.                      <li><a href="/register">注册</a></li>
  60.                  {% endif %}
  61.              </ul>
  62.          </div><!-- /.navbar-collapse -->
  63.      </div><!-- /.container-fluid -->
  64.  </nav>
  65.  
  66.  <!-- 页面主体 -->
  67.  <div class="box">
  68.      <div class="left-info">
  69.          <div class="panel panel-primary">
  70.              <div class="panel-heading">广告</div>
  71.              <div class="panel-body">
  72.                  Panel content
  73.              </div>
  74.          </div>
  75.          <div class="panel panel-info">
  76.              <div class="panel-heading">Panel heading without title</div>
  77.              <div class="panel-body">
  78.                  Panel content
  79.              </div>
  80.          </div>
  81.      </div>
  82.      <div class="main-info">
  83.          <!-- 文章开始 -->
  84.          <div class="article-list">
  85.              {% for article in article_list %}
  86.                  <div class="article">
  87.                      <h3><a href="#">{{ article.title }}</a></h3>
  88.                      <div class="media">
  89.                          <div class="media-left">
  90.                              <a href="#">
  91.                                  <img class="media-object author-avatar" src="/{{ article.user.avatar }}" alt="...">
  92.                              </a>
  93.                          </div>
  94.                          <div class="media-body">
  95.                              <h4 class="media-heading">{{ article.desc }}</h4>
  96.                          </div>
  97.                      </div>
  98.                      <div class="article-footer">
  99.                          <span><a href="#">{{ article.user.username }}</a></span>
  100.                          <span>发布于  {{ article.create_time|date:"Y-m-d H:i:s" }}</span>
  101.                          <span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span>
  102.                          <span class="glyphicon glyphicon-thumbs-up">点赞({{ article.up_count }})</span>
  103.                      </div>
  104.                  </div>
  105.              {% endfor %}
  106.          </div>
  107.          <!-- 文章结束 -->
  108.      </div>
  109.      <div class="right-info">
  110.          <div class="panel panel-primary">
  111.              <div class="panel-heading">广告</div>
  112.              <div class="panel-body">
  113.                  Panel content
  114.              </div>
  115.          </div>
  116.          <div class="panel panel-info">
  117.              <div class="panel-heading">Panel heading without title</div>
  118.              <div class="panel-body">
  119.                  Panel content
  120.              </div>
  121.          </div>
  122.      </div>
  123.  
  124.  </div>
  125.  <!-- 页面结束 -->
  126.  
  127.  <script src="/static/jquery.js"></script>
  128.  <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  129.  <script>
  130.  
  131.  </script>
  132.  </body>
  133.  </html>

四、文章详情（点赞、评论）

  1.  def user_index(request,username):
  2.      user_obj = models.UserInfo.objects.filter(username=username).first()
  3.      return render(request,"user_index.html",locals())
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  7.      <style>
  8.          #div_digg {
  9.              float: right;
  10.              margin-bottom: 10px;
  11.              margin-right: 30px;
  12.              font-size: 12px;
  13.              width: 125px;
  14.              text-align: center;
  15.              margin-top: 10px;
  16.          }
  17.  
  18.          .diggit {
  19.              float: left;
  20.              width: 46px;
  21.              height: 52px;
  22.              background-image: url('//static.cnblogs.com/images/upup.gif');
  23.              text-align: center;
  24.              cursor: pointer;
  25.              margin-top: 2px;
  26.              padding-top: 5px;
  27.          }
  28.  
  29.          .buryit {
  30.              float: right;
  31.              margin-left: 20px;
  32.              width: 46px;
  33.              height: 52px;
  34.              background-image: url('//static.cnblogs.com/images/downdown.gif');
  35.              text-align: center;
  36.              cursor: pointer;
  37.              margin-top: 2px;
  38.              padding-top: 5px;
  39.          }
  40.          .comment{
  41.              margin-top:70px;
  42.          }
  43.          #commentform_title {
  44.              background-image: url('//static.cnblogs.com/images/icon_addcomment.gif');
  45.              background-repeat: no-repeat;
  46.              padding: 0 0 0 25px;
  47.              margin-bottom: 10px;
  48.          }
  49.          #comment-content{
  50.              width:400px;
  51.              height:200px;
  52.          }
  53.      </style>
  54.  </head>
  55.  <body>
  56.  
  57.  {#文章#}
  58.  <h2>{{ article_det.article.title }}</h2>
  59.  <div>{{ article_det.content }}</div>
  60.  
  61.  {#点赞#}
  62.  {% csrf_token %}
  63.  <div class="clearfix">
  64.      <div id="div_digg">
  65.          <div class="diggit action">
  66.              <span class="diggnum" id="digg_count">{{ article_det.article.up_count }}</span>
  67.          </div>
  68.          <div class="buryit action">
  69.              <span class="burynum" id="bury_count">{{ article_det.article.down_count }}</span>
  70.          </div>
  71.          <div class="clear"></div>
  72.          <div class="diggword" id="digg_tips"></div>
  73.      </div>
  74.  </div>
  75.  
  76.  {#评论列表#}
  77.  <ul class="list-group">
  78.      {% for comment in comment_list %}
  79.          <li class="list-group-item">
  80.              <div>
  81.                  <a href="">{{ forloop.counter }}楼</a>
  82.                  <a href="">{{ comment.user }}</a>
  83.                  <span>{{ comment.create_time|date:"Y-m-d H-i" }}</span>
  84.                  <a><span class="son-comment" username="{{ comment.user }}" pid="{{ comment.id }}">回复</span></a>
  85.              </div>
  86.              <div>
  87.                  {{ comment.content }}
  88.              </div>
  89.          </li>
  90.      {% endfor %}
  91.  </ul>
  92.  
  93.  {#写评论#}
  94.  <div class="comment">
  95.      <div id="commentform_title">发表评论</div>
  96.      <p>用户<input type="text" disabled value="{{ article_det.article.user }}"></p>
  97.      <div>评论内容</div>
  98.      <div>
  99.          <textarea id="comment-content"></textarea>
  100.      </div>
  101.      <div><button id="comment-btn">提交评论</button></div>
  102.  </div>
  103.  
  104.  <script src="/static/jquery.js"></script>
  105.  <script>
  106.  //点赞
  107.      $(".action").click(function(){
  108.          //判断是赞还是踩
  109.          var is_up = $(this).hasClass("diggit");
  110.          console.log(is_up)
  111.          //发送数据给后端
  112.          $.ajax({
  113.              url:"/up_down/",
  114.              type:"post",
  115.              data:{
  116.                  article_id:{{ article_id }},
  117.                  is_up:is_up,
  118.                  csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
  119.              },
  120.              success:function (data) {
  121.                  if(data.status){
  122.                      if(is_up){
  123.                          var up_count = $("#digg_count").text()
  124.                          up_count = parseInt(up_count)+1
  125.                          $("#digg_count").text(up_count)
  126.                      }else{
  127.                          var down_count = $("#bury_count").text()
  128.                          down_count = parseInt(down_count)+1
  129.                          $("#bury_count").text(down_count)
  130.                      }
  131.                  }else{
  132.                      $("#digg_tips").text("已经评价过")
  133.                  }
  134.              }
  135.          })
  136.      })
  137.  
  138.  pid=""
  139.  //发送评论
  140.      $("#comment-btn").click(function(){
  141.          var comment = $("#comment-content").val();
  142.          if(comment!=""){
  143.              $.ajax({
  144.                  url:"/comment/",
  145.                  type:"post",
  146.                  data:{
  147.                      csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
  148.                      comment_content : comment,
  149.                      pid: pid,
  150.                      article_id: {{ article_det.article.pk }}
  151.                  },
  152.                  success:function(data){
  153.                      var create_time = data.create_time;
  154.                      var content = data.comment_content;
  155.                      var username = data.username;
  156.                      var li = '<li class="list-group-item"><div><span style="color: gray">' + create_time + '</span> &nbsp;&nbsp; <a href=""><span>' + username + '</span></a></div> <div class="con"> <p> ' + content + ' </p> </div> </li>'
  157.                      $(".list-group").append(li)
  158.                      //清空评论输入框
  159.                      $("#comment-content").val("");
  160.                      //清空pid
  161.                      pid = ""
  162.                  }
  163.              })
  164.          }
  165.  
  166.      })
  167.  
  168.  //回复评论
  169.      $(".son-comment").click(function(){
  170.          $("#comment-content").focus();
  171.          var v = "@" + $(this).attr("username") + "\n";
  172.          $("#comment-content").val(v);
  173.          pid = $(this).attr("pid")
  174.      })
  175.  </script>
  176.  </body>
  177.  </html>

五、添加文章（富文本编辑器）

链接：http://kindeditor.net/doc.php

  1.  from my_bbs_again import settings
  2.  import json,os
  3.  def uploadJson(request):
  4.      obj = request.FILES.get("uploadJson_name")
  5.      path = os.path.join(settings.MEDIA_ROOT,'uploadJson',obj.name)
  6.  
  7.      with open(path,"wb") as f:
  8.          for line in obj:
  9.              f.write(line)
  10.  
  11.      ret = {"error":0,"url":"/media/uploadJson/"+obj.name}
  12.      return HttpResponse(json.dumps(ret))
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  7.      <style>
  8.          *{
  9.              margin:0;
  10.          }
  11.          .header{
  12.              width:100%;height:80px;background-color: #1b6d85;line-height: 80px;
  13.          }
  14.          .header h1{line-height: 80px;margin-left: 20px}
  15.      </style>
  16.  </head>
  17.  <body>
  18.  
  19.  <div class="header">
  20.      <h1>{{ user_obj.blog.title }}</h1>
  21.  </div>
  22.  
  23.  {#添加文章#}
  24.  <div class="add_article">
  25.      <div>添加文章</div>
  26.      <form action="" method="post">
  27.          {% csrf_token %}
  28.          <div>文章标题<input type="text" name="title"></div>
  29.          <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
  30.          <div><input type="submit"></div>
  31.      </form>
  32.  
  33.  </div>
  34.  
  35.  <script src="/static/jquery.js"></script>
  36.  <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
  37.  <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
  38.  <script>
  39.          KindEditor.ready(function(K) {
  40.                  window.editor = K.create('#editor_id',{     //添加参数
  41.                      //height,width
  42.                      items:[
  43.          'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
  44.          'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
  45.          'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
  46.          'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
  47.          'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
  48.          'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
  49.          'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
  50.          'anchor', 'link', 'unlink', '|', 'about'
  51.  ],
  52.                      uploadJson: '/uploadJson/',//指定上传文件的路径
  53.                      extraFileUploadParams:{  //和文件一起上传的数据，如csrftoken
  54.                          csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
  55.                      },
  56.                      filePostName: "uploadJson_name"   //上传的文件的名字
  57.                  });
  58.          });
  59.  
  60.  </script>
  61.  
  62.  </body>
  63.  </html>

Django之BBS博客项目的更多相关文章

  1. python关于Django搭建简单博客项目（详解一）

    上一篇我们说了如何搭建简易博客网站,下面我们来进行详细解答.本文没有特定顺序,请结合上一篇和源代码参照学习. 相关源代码和解析请参看:https://github.com/Cheng0829/mysi ...

  2. python关于Django搭建简单博客项目（教程）

    由于csdn各种django blog博文都有或多或少的bug,所以我决定自己写一篇,先附上教程,详解在另一篇博文里,为了便于大家复制粘贴,本文代码尽量不使用图片. 源代码及解析文章请在我的githu ...

  3. python关于Django搭建简单博客项目 详解二-setting.py

    这一篇我们来讲解setting.py,具体内容以注释形式写入到下面的setting.py代码中,篇幅所限已把官方所给英文注释删除. 全部源代码和详解请参看http://github.com/Cheng ...

  4. Python Web开发:Django+BootStrap实现简单的博客项目

    创建blog的项目结构 关于如何创建一个Django项目,请查看[Python Web开发:使用Django框架创建HolleWorld项目] 创建blog的数据模型 创建一个文章类 所有开发都是数据 ...

  5. Django——博客项目

    博客项目 目前的目标是构建一个基于Django的前后端完整的博客系统,首先对项目流程整理如下: 1. 分析需求 1.1. 基于用户认证组件和Ajax实现登录验证 图形验证码核心代码: 模板: < ...

  6. 9.28 Django博客项目(一)

    2018-9-28 17:37:18 今天把博客项目 实现了注册和添加图片的功能! 放在了自己的github上面 源码! https://github.com/TrueNewBee/bbs_demo ...

  7. django博客项目1.环境搭建

    安装 Python Windows 下安装 Python 非常简单,去 Python 官方网站找到 Python 3 的下载地址,根据你的系统选择 32 位或者 64 位的安装包,下载好后双击安装即可 ...

  8. Django day17 博客项目(一)

    一: 博客项目需求分析 首页(显示文章) 文章详情 点赞, 点踩 文章评论 字评论 评论的展示 登录功能(图片验证码) 注册功能(基于form验证,ajax) 个人站点(不同人不同样式,文章过滤) 后 ...

  9. day09搭建均衡负载和搭建BBS博客系统

    day09搭建均衡负载和搭建BBS博客系统 搭建BBS博客系统 本次搭建bbs用到的技术 需要用到的: 1.Nginx+Django 2.Django+MySQL 环境准备 主机 IP 身份 db01 ...

随机推荐

  1. IDEA 创建包和类及基本操作

    创建包和类步骤如下: 1. 展开创建的工程,在源代码目录 src 上,鼠标右键,选择 new->package ,键入包名 com.itheima.demo ,点击确定. 2. 在创建好的包上, ...

  2. IPv6绝不仅仅是对IPv4地址长度的增加

    众所周知,IPv6 IP地址长度是IPv4 IP地址长度的四倍,是解决IPv4公共网址资源枯竭的最佳技术.的确,IETF在制定IPv6标准时也是基于这一因素考虑的.当时正是90年代初,Web开始出现, ...

  3. java基础-不用ide如何打包

    java基础-不用ide如何打包 1. 建立目录 src存放源文件 classes存放编译文件 2. 建立类文件 主类 package test.ant; import test.ant.MyTool ...

  4. 国内可访问的稳定docker镜像

    可参考:https://yeasy.gitbooks.io/docker_practice/content/install/mirror.html 但在debian 9上进行相应配置后,在pull镜像 ...

  5. 如何搭建SVN的客户端和使用

    1.下载安装TortoiseSVN 首先我们需要从官方网站下载TortoiseSVN客户端工具 可以选择32位和64位.也可以直接使用搜索引擎搜索TortoiseSVN 也会出现直接的下载方式.这里不 ...

  6. MySQL系列：性能优化

    1. 优化简介 MySQL性能优化包括:查询优化.数据库结构优化.MySQL服务器优化等. 2. 查询优化 2.1 分析查询语句 MySQL提供EXPLAIN和DESCRIBE,用来分析查询语句. E ...

  7. Linux 学习 (三) 文件搜索命令

    Linux达人养成计划 I 学习笔记 locate 文件名 搜索速度比较快 只能根据文件名搜索 搜索的是保存在 /var/lib/mlocate 的数据库(每天更新一次) 新建文件需要执行 updat ...

  8. kNN总结

    1,kNN不训练模型 2,主要是通过计算 3,计算点到每个近邻的距离,按照距离递增排序,选取距离最近的k个邻居,在k个邻居中出现频率最大的就是它的分类结果 4,计算距离有不同的距离公式,可以看每种公式 ...

  9. 【LOJ2542】【PKUWC 2018】随机游走 min-max容斥 树上高斯消元

    题目描述 有一棵 \(n\) 个点的树.你从点 \(x\) 出发,每次等概率随机选择一条与所在点相邻的边走过去. 有 \(q\) 次询问,每次询问给定一个集合 \(S\),求如果从 \(x\) 出发一 ...

  10. LOJ #2731. 「JOISC 2016 Day 1」棋盘游戏（dp）

    题意 JOI 君有一个棋盘,棋盘上有 \(N\) 行 \(3\) 列 的格子.JOI 君有若干棋子,并想用它们来玩一个游戏.初始状态棋盘上至少有一个棋子,也至少有一个空位. 游戏的目标是:在还没有放棋 ...