How to use axios in Vue.js to realize data Exchange between Front and back end
This article mainly explains "how Vue.js uses axios to achieve front-end and back-end data interaction". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how Vue.js uses axios to achieve front-end data interaction".
1.GET request method 1: axios.get (site_url + "get_biz_list/") .then (res = > {if (res.data.result) {this.bkBizData = res.data.data;} else {this.$message.error ('failed to acquire business');}}, 'json')
Corresponding backend code:
Def get_biz_list (request): fields = ["bk_biz_id", "bk_biz_name"] data = cc_search_business (fields) return JsonResponse ({"result": True, "data": data}) method 2: axios.get (site_url + "search_host/?set_id=" + this.addSet) .then (res = > {if (res.data.result) {this.hostData = res.data.data) } else {this.$message.error ('failed to acquire business');}}, 'json')
Corresponding back-end code
Def search_host (request): set_id = request.GET.get ("set_id")... Return JsonResponse ({"result":...}) method 3: axios.get (site_url + "host_view/", {params: {search_biz_id: this.searchBiz, query_str: this.searchHostIp}}) .then (res = > {if (res.data.result) {this.hostData = res.data.data;} else {this.$message.error ('failed to get template');}}, 'json')
Corresponding back-end code
Class HostView (CsrfExemptView): def get (self, request, * args, * * kwargs): search_biz_id = request.GET.get ("search_biz_id") query_str = request.GET.get ("query_str")... 2.POST request axios.post (site_url + "host_view/", {"host_id": row.host_id "is_monitored": row.is_monitored}) .then (res = > {if (res.data.result) {if (row.is_monitored) {this.$message.success ('host removed monitoring queue successfully') } else {this.$message.warning ('host joined monitoring queue successfully');} this.getSearch ();} else {this.$message.error ('failed to update host monitoring status');}}, 'json')
Corresponding back-end code
Class HostView (CsrfExemptView):... Def post (self, request, * args, * * kwargs): data = json.loads (request.body) host_id = data.get ("host_id") is_monitored = data.get ("is_monitored")... 3.PUT request axios.put (site_url + "temp_view/") This.editForm) .then (res = > {if (res.data.result) {this.$message.success ('template updated successfully') This.editDialog = false; this.init ();} else {this.$message.error ('failed to update template');}}, 'json')
Corresponding back-end code
Class TemplateView (CsrfExemptView):... Def put (self, request, * args * * kwargs): data = json.loads (request.body) Competition = data.get ("Competition") bk_biz_id = data.get ("edit_bk_biz"). Split (":") [0] bk_biz_name = data.get ("edit_bk_biz"). Split (":") [1] temp_name = data.get ("edit_temp_name") Script = data.get ("edit_temp_script") threshold = data.get ("edit_temp_value") note = data.get ("edit_temp_note") temp_obj = {"bk_biz_id": bk_biz_id "bk_biz_name": bk_biz_name, "temp_name": temp_name, "script": script, "threshold": threshold, "note": note } try: Template.objects.filter (pk=pk). Update (* * temp_obj) return JsonResponse ({"result": True}) except Exception as e: print (e) return JsonResponse ({"result": False}) 4.Delete request axios.delete ('/ temp_view/' {data: {id:row.pk}}) .then (res = > {if (res.data.result) {this.$message.success ('template deleted successfully') This.init ();} else {this.$message.error ('failed to delete template');}}, 'json')
Corresponding back-end code
Class TemplateView (CsrfExemptView):... Def delete (self, request, * args, * * kwargs): data = json.loads (request.body) pk= data.get ("id") try: Template.objects.filter (pk=pk). Delete () return JsonResponse ({"result": True}) except Exception: return JsonResponse ({"result": False}) I believe you have a deeper understanding of "how Vue.js uses axios to achieve front-end and back-end data interaction", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
