django単純な前後端分離データ転送例axios


フロントエンドはvueを使います。下はaxiosのメインコードです。

methods: {
   search: function () {
    var params = {
     content1: this.content1
    }
    this.$axios.post("http://127.0.0.1:8000/search/", params)
     .then((response)=> {
      console.log(response);
      this.response1=response.data['content1']
     })
     .catch(function (error) {
      console.log(error);
     })
   },
   find: function () {
    this.$axios.get("http://127.0.0.1:8000/find/", {
     params: {
      content2: this.content2
     }
    })
     .then((response)=> {
      console.log(response);
      this.response2=response.data['content2']
     })
     .catch(function (error) {
      console.log(error);
     })
   },
  },
バックエンドはdjangoフレームで、コードは以下の通りです。

@csrf_exempt
def search(request):
 post_content = json.loads(request.body, encoding='utf-8')['content1']
 print(type(post_content))
 print("post_content :")
 print(post_content)
 return JsonResponse({'content1': 'post  ' + post_content * 2, 'msg': '    '})
 
@csrf_exempt
def find(request):
 find_content = request.GET.get('content2')
 print("find_content :")
 print(type(find_content))
 print(find_content)
 return JsonResponse({'content2': 'get  ' + find_content * 3})
ここでは主に初心者のaxiosと前後端分離開発に対する学習です。
補足知識:ajaxはバックエンドで要求パラメータを取得できませんでしたが、フロントエンドはもう渡されました。
ajaxを使ってpost方式でデータを提出する場合、content-typeをaplication/x-wn-form-urlencodedにしないと、デフォルトのモードtext/plinになります。charset=utf-8。
tomcatではpost提出方式に対して特殊な処理を行いましたが、提出方式がpostでcontent-typeがaplication/x-wn-form-urlencodedではなく、tomcatの下で要求パラメータを解析したり、request parameterのmapに入れたりしないので、request.getParameterを使ってパラメータを取得しません。
ブラウザのnetworkでは、一般的なpost提出方式のデータもform dateの下に表示されます。request payloadの下ではありません。
以上のdjango簡単な前後に分離されたデータ転送例axiosは、小編集が皆さんに共有するすべての内容です。参考にしていただければと思います。どうぞよろしくお願いします。