Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1 + Django REST Frameworkに再挑戦 その6 Create Comment in Backend with $http

概要

AngularJS1 + Django REST Frameworkに再挑戦 その6 Create Comment in Backend with $http

参考動画

Django + AngularJS | Coding For Entrepreneurs

Create Comment in Backend with $http

  • $httpを使って、バックエンドで、コメント作成機能を実装する。

  • blog-detail.component.jsに、commentsの中身をscopeに渡すように設定する。

Post.get({"slug": $routeParams.slug}, function(data){
                $scope.post = data
                $scope.comments = data.comments
            })
  • blog-detail.htmlのcommentsの箇所を修正する。
<h3>Comments</h3>
<div class='row' ng-show='comments.length > 0'>
    <div class='col-sm-6'>
        <input class='form-control' type='text' ng-model='query' placeholder='Filter Comments' /> <br/>
    </div>
</div>
<ul ng-show='comments.length > 0'>
    <li ng-repeat='comment in comments | filter: query'>
            {{ comment.content }} <a href='#' class='btn btn-sm btn-default' confirm-click='Do you want to delete this?' confirmed-click='deleteComment(comment)'>X</a>
    </li>
</ul>
  • blog-detail.component.jsに、$cookiesを継承するように設定しておく。
controller: function(Post, $cookies, $http, $location, $routeParams, $scope){
// "Authorization: JWT"   '{"content":"some reply to another try"}' 'http://127.0.0.1:8000/api/comments/create/?slug=new-title&type=post&parent_id=13'
  • addReply functionにコメント作成機能の実装していく。slugは $routeParams.slugで、持ってくる。
...
var slug = $routeParams.slug
            Post.get({"slug": slug}, function(data){
...
$scope.addReply = function() {
                console.log($scope.reply)
                var req = {
                    url: 'http://127.0.0.1:8000/api/comments/create/?slug=' + slug + '&type=post'
                    data:{
                        content: $scope.reply.content
                    }
                }
                $scope.comments.push($scope.reply)
                // $scope.post.comments.push("abc")
                resetReply()
            }
  • tokenの有無でコメントできるかできないかを変更する。
$scope.addReply = function() {
                console.log($scope.reply)
                var token = $cookies.get("token")
                if (token){
                    var req = {
                        method: "POST",
                        url: 'http://127.0.0.1:8000/api/comments/create/?slug=' + slug + '&type=post',
                        data:{
                            content: $scope.reply.content
                        },
                        headers:{
                            authorization: "JWT " + token
                        }
                    }

                    $scope.comments.push($scope.reply)
                    // $scope.post.comments.push("abc")
                    resetReply()
                } else {
                    console.log("no token")
                }
            }
  • $httpを利用して、tokenがある場合のreqの情報を送付する。
var requestAction = $http(req)

                    requestAction.success(function(r_data, r_status, r_headers, r_config){
                        $scope.comments.push($scope.reply)
                    })
                    requestAction.errors(function(e_data,e_status, e_headers, e_config){
                        console.log(e_data)
                    })
  • resetReply()functionは、requestAction.successの場合に組み込む。

  • また、resetReply functionの内容も、text->contentに変更する。

function resetReply(){
              $scope.reply = {
                          "id": $scope.comments.length + 1,
                          "content": "",
              }
            }
  • これでcommentを作成してみる。。。error!どうも、requestAction.errorsではなく、requestAction.errorが正解らしい。それを修正して試してみる。。。できた!

  • けど、tokenの期限が切れている場合はうまくいかないらしい。これは後で対応するとのこと。

  • comment delete機能も使ってみる。。。表面上は消えたように見えるが、ページを更新するとまた表示されてしまう。これを解消するには、結構難しい処理が必要らしい。

  • 今回もなかなかヘビーだった。