BBS project features thumb ups and comments

I. Thumb UPS

Let's take a look at the front-end code. The following code crawls directly from the blog garden.

        <div class="poll clearfix">            <div id="div_digg">                <div class="diggit action">                    <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>                </div>                <div class="buryit action">                    <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>                </div>                <div class="clear"></div>                <div class="diggword" id="digg-tips" style="color: red"></div>            </div>        </div>

　　

Note that the CSS file should also be removed and placed in the block of our CSS.

{% block css %}    <link rel="stylesheet" href="/static/css/article.css">{% endblock %}

　　

Then let's take a look at the JS Code. Here we use ajax to implement the like and step-on functions. Here we put the like and step-on JS Code in a separate JS file, then introduce

<script src="/static/js/for_artic_desc.js"></script>

　　

Next we will focus on the JS Code.

$ ("# Div_digg. action "). click (function () {if ($ (". info "). ATTR ("username") {var is_up = $ (this ). hasclass ("diggit"); // {# true if the class diggit exists, false if there is no diggit, and like if it is true, if this parameter is set to false, step on to #}/// {# var article_id ={{ article_obj.nid }}; #}// {##}// {# var article_title ={{ article_obj.title };#}// {# if template rendering is used in JS, if the rendering method is as follows: #}// {##}// {# Then if the rendered value is a string, JS regards it as a variable, an error is reported #} // {#. If the rendered value is a number, JS regards it as a number, no error will be reported #} // {##}// {##} // {# To solve this problem, if we want to use the template language in JS, then you can add a quotation mark to the braces. #} // var article_id = "{article_obj.nid}"; var article_id = $ (". info "). ATTR ("artic_id"); var article_title = "{article_obj.title}"; $. ajax ({URL: "/app1/up_down/", type: "Post", data: {"article_id": article_id, "article_title": article_title, "is_up": is_up, "csrfmiddlewaretoken": $ ("[name = 'csrfmiddlewaretoken ']"). val (),}, success: function (data) {DATA = JSON. parse (data); If (data. state) {If (is_up) {var val = $ ("# digg_count "). text (); val = parseint (VAL) + 1; $ ("# digg_count "). text (VAL)} else {var val = $ ("# bury_count "). text (); val = parseint (VAL) + 1; $ ("# bury_count "). text (VAL) ;}} else {$ ("# Digg-Tips "). text (data. error_code); setTimeout (function () {$ ("# digg_tips "). text ("aaaaaaaa"); console. log ("123")}, 1000) }}} else {location. href = "/app1/login /"}})

　　

 

 

The above code is relatively simple, that is, to obtain the required value, and then send it to the backend using the Ajax POST method.

First, check whether there is any Login

If you do not log on, you will be redirected to the logon page.

If there is a login, we will first get the value of the is_up variable. Here we will judge whether the tag we click has a class attribute. If yes, is_up is true. If no, is_up is false.

Note that values in braces can be obtained in JS Code, but they must be enclosed in quotation marks. Otherwise, JS will treat the values in braces as a variable.

 

Here is another tips: we can write a tag and add custom attributes to the tag. The values of these attributes are the values we want to send to the backend, we can find this tag directly, and then get the corresponding attributes through the ATTR method, and then we can send the tag to the backend.

For example, we use this label to store the data we want to send to the backend in a custom way.

<div class="info" artic_id="{{ article_obj.nid }}" username="{{ request.user.username }}"></div>

　　

Note that the following code must be added to the data to send data through ajax to solve the crsf problem.

"csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val(),

　　

Success functions are simple.

success: function (data) {                        data = JSON.parse(data);                        if (data.state) {                            if (is_up) {                                var val = $("#digg_count").text();                                val = parseInt(val) + 1;                                $("#digg_count").text(val)                            } else {                                var val = $("#bury_count").text();                                val = parseInt(val) + 1;                                $("#bury_count").text(val);                            }                        } else {                            $("#digg-tips").text(data.error_code);                            setTimeout(function () {                                $("#digg_tips").text("aaaaaaaa");                                console.log("123")                            },1000)                        }                    }

　　

 

Finally, let's look at the backend code.

From Django. views. decorators. csrf import csrf_exemptfrom Django. DB. models import F # @ csrf_exemptimport jsondef up_down (request): ret = {"state": True, "error_code": ""} print (request. post. get ("article_id") print (request. post. get ("article_title") is_up = request. post. get ("is_up") user_obj = models. userinfo. objects. get (username = request. user) Try: models. articleupdown. objects. create (user = user_obj, article = models. article. objects. get (nid = request. post. get ("article_id"), is_up = JSON. loads (is_up) does t exception as E: Flag = models. articleupdown. objects. filter (user = user_obj, article = models. article. objects. get (nid = request. post. get ("article_id") [0]. is_up if flag: If JSON. loads (is_up): ret = {"state": false, "error_code": "You have exceeded this blog and cannot stick to it."} else: ret = {"state ": false, "error_code": "You have exceeded this blog and cannot step on it."} else: If JSON. loads (is_up): ret = {"state": false, "error_code": "You have already stepped on this blog and cannot stick to it."} else: ret = {"state": false, "error_code": "You have already stepped on this blog and cannot step on it."} else: If JSON. loads (is_up): models. article. objects. filter (nid = request. post. get ("article_id ")). update (up_count = f ("up_count") + 1) else: models. article. objects. filter (nid = request. post. get ("article_id ")). update (down_count = f ("down_count") + 1) return httpresponse (JSON. dumps (RET ))

　　

The backend Python code is very familiar. I will not explain it here.

 

Ii. Comment

BBS project features thumb ups and comments