2. 程式人生 > >vue學習七之Axios

vue學習七之Axios

阿新 • • 發佈：2018-11-06

JQuery時代，我們使用ajax向後臺提交資料請求，Vue時代，Axios提供了前端對後臺資料請求的各種方式。

什麼是Axios

Axios是基於Promise的Http客戶端，可以在瀏覽器和node.js中使用。

為什麼使用Axios

Axios非常適合前後端資料互動，另一種請求後端資料的方式是vue-resource，vue-resource已經不再更新了，且只支援瀏覽器端使用，而Axios同時支援瀏覽器和Node端使用。

Vue開發者推薦使用更好的第三方工具，這就是Axios，詳細的檔案，請參考Evan You的這篇文章。

安裝

Axios的安裝支援多種方式

npm安裝
1
 
npm install axios
cdn
1
 
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

使用方式介紹

接下來，我們使用Django，搭建一個後臺程式，並使用Vue Cli搭建一個前端程式，使用Axios進行前後端資料互動。

使用Vue Cli建立一個前端程式
1
 
vue init webpack luffy_fontend

axios

使用Django建立一個後端程式luffy_backend
1
 
django-admin startproject luffy_backend
建立一個courses應用
1
2
 
cd luffy_backend
python manage.py startapp courses
在models.py中建立兩個類
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
from django.db import models

# Create your models here.


class Courses(models.Model):
 course_name = models.CharField(max_length=32)
 course_price = models.IntegerField()
 course_teacher = models.CharField(max_length=16)
 start_date = models.DateField(auto_now=True, null=False)
 end_date = models.DateField(auto_now=True, null=False)

 def __str__(self):
 return self.course_name


class Students(models.Model):
 student_name = models.CharField(max_length=16)
 student_id = models.IntegerField()
 student_phone = models.IntegerField()
 student_address = models.CharField(max_length=128)
插入資料
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// courses_courses
insert into courses_courses(course_name, course_price, course_teacher, start_date, end_date) values('Python全棧中級開發', 12800, 'Pizza', '2018-10-01', '2018-10-02');
insert into courses_courses(course_name, course_price, course_teacher, start_date, end_date) values('Python全棧高階開發', 19800, 'Alex', '2018-10-03', '2018-10-04');
insert into courses_courses(course_name, course_price, course_teacher, start_date, end_date) values('Linux高階運維', 12800, 'Oldboy', '2018-10-05', '2018-10-06');
insert into courses_courses(course_name, course_price, course_teacher, start_date, end_date) values('高階網路工程師', 12800, 'Egon', '2018-10-07', '2018-10-08');
insert into courses_courses(course_name, course_price, course_teacher, start_date, end_date) values('Go全棧高階開發', 12800, 'Yuan', '2018-10-09', '2018-10-10');
insert into courses_courses(course_name, course_price, course_teacher, start_date, end_date) values('Vue高階開發', 12800, 'Xiaoma', '2018-10-11', '2018-10-12');

// courses_students
insert into courses_students(id, student_name, student_id, student_phone, student_address) values(1, 'Alex', 100001, 1378061875, '北京市大興區智障一中');
insert into courses_students(id, student_name, student_id, student_phone, student_address) values(2, 'Pizza', 100002, 1378161875, '北京市朝陽區第一中學');
insert into courses_students(id, student_name, student_id, student_phone, student_address) values(2, 'Egon', 100003, 1378261875, '北京市房山智障三中');
insert into courses_students(id, student_name, student_id, student_phone, student_address) values(4, 'Oldboy', 100004, 1378361875, '北京市大興區智障三中');
insert into courses_students(id, student_name, student_id, student_phone, student_address) values(5, 'Yuanhao', 100005, 1378460275, '北京市豐臺區智障四中');
insert into courses_students(id, student_name, student_id, student_phone, student_address) values(6, 'Jinxin', 100006, 1378560875, '北京市海淀區智障五中');
在views.py中寫好介面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
from django.shortcuts import render, HttpResponse
from rest_framework.views import APIView

import json

from luffy_backend import settings
from .models import Courses
from .models import Students
# Create your views here.


class CoursesView(APIView):
 def get(self, request):
 print("Courses Get Methods Exec!")
 courses = list()

 for item in Courses.objects.all():

 course = {
 "course_name": item.course_name,
 "course_price": item.course_price,
 'course_teacher': item.course_teacher,
 'start_date': str(item.start_date),
 'end_date': str(item.end_date)
 }

 courses.append(course)

 print(courses)

 return HttpResponse(json.dumps(courses, ensure_ascii=False))


class StudentsView(APIView):
 def get(self, request):
 print("Student Get Methods Exec!")
 students = list()

 for item in Students.objects.all():
 student = {
 'student_name': item.student_name,
 'student_id': item.student_id,
 'student_phone': item.student_phone,
 'student_address': item.student_address
 }

 students.append(student)

 return HttpResponse(json.dumps(students, ensure_ascii=False))

 def post(self, request):
 print("Student Post Methods Exec!")
 print(request.body.decode('utf-8'))

 response = json.dumps(request.POST)
 return HttpResponse(response)
定義介面

axios

配置後臺介面

axios

獲取課程資訊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<template>
  <div>
    <span>這是課程詳情頁面</span>
    <button @click="getCourses">點選獲取全部課程</button>
    <div v-if="isShow">
 <table border="1">
 <thead>
 <tr>
 <th>課程名稱</th>
 <th>課程價格</th>
 <th>授課老師</th>
 <th>開課日期</th>
 <th>結課日期</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(course, index) in courses" :key="index">
 <td>{{ course.course_name }}</td>
 <td>{{ course.course_price }}</td>
 <td>{{ course.course_teacher }}</td>
 <td>{{ course.start_date }}</td>
 <td>{{ course.end_date }}</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>

</template>

<script>
 export default {
 name: "Courses",
 data() {
 return {
 isShow: false,
 courses: []
 }
 },
 methods: {
 getCourses: function () {
 let ts = this;
 this.$axios.get('/api/course/1/')
 .then(function (response) {
 ts.isShow = true;
 ts.courses = response.data;
 })
 .catch(function (error) {
 console.log(error);
 });
 }
 }
 }
</script>

<style scoped>

</style>
獲取學生資訊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<template>
  <div>
    <span>這是學員資訊頁面</span>
    <button @click="getStudents">點選獲取學生資訊</button>
    <button @click="changeStudents">點選修改學生資訊</button>
 <div v-if="isShow">
 <table border="1">
 <thead>
 <tr>
 <th>學生ID</th>
 <th>學生姓名</th>
 <th>學生電話</th>
 <th>學生地址</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(student, index) in students" :key="index">
 <td>{{ student.student_id }}</td>
 <td><input v-model="student.student_name"/></td>
 <td><input v-model="student.student_phone"/></td>
 <td><input v-model="student.student_address"/></td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
</template>

<script>
 export default {
 name: "Students",
 data() {
 return {
 isShow: false,
 students: []
 }
 },
 methods: {
 getStudents: function () {
 let ts = this;
 this.$axios.get('/api/student/1/')
 .then(function (response) {
 console.log(response);
 ts.isShow = true;
 ts.students = response.data;
 })
 .catch(function (error) {
 console.log(error);
 })
 },
 changeStudents: function () {
 let ts = this;
 this.$axios.post('/api/student/2/', {
 student_name: 1,
 student_id: 100001,
 student_phone: 1347658765,
 student_address: "北京市石景山區智障六中"
 })
 .then(function (response) {

 })
 .catch(function (error) {
 console.log(error);
 })
 }
 }
 }
</script>

<style scoped>

</style>

以上，就是我們通過Axios的get和post請求與後臺進行資料互動的全過程。

相關推薦

vue學習七之Axios

JQuery時代，我們使用ajax向後臺提交資料請求，Vue時代，Axios提供了前端對後臺資料請求的各種方式。 什麼是Axios Axios是基於Promise的Http客戶端，可以在瀏覽器和node.js中使用。 為什麼使用Axios Axios非常適合前後端資料互動，另一種請求後端資料的方式是v

Vuejs2.0學習筆記之axios&vue-resource

浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

vue學習---vuex之簡介

pac htm 容器 style 包含著 端口 全局 def ren 每一個 Vuex 應用的核心就是 store（倉庫）。"store" 基本上就是一個容器，它包含著你的應用中大部分的狀態(state)。Vuex 和單純的全局對象有以下兩點不同： Vu

vue學習筆記之$refs

直接 用法 image bsp blog spa htm 筆記 images 由於懶 就直接貼代碼了，希望大家能理解用法，而不是copy代碼 父組件： HTML Script 子組件： vue學習筆記之$refs

vue學習筆記之$emit

event ops 分享圖片 自動 監聽 toc com update con 1、父組件可以使用 props 把數據傳給子組件。 2、子組件可以使用 $emit 觸發父組件的自定義事件。 vm.$emit( event, arg ) //觸發當前實例上的事件 vm.$o

Vue學習筆記之vue-cli專案搭建及解析

Vue （一）安裝node.js 首先需要安裝node環境，可以直接到中文官網http://nodejs.cn/下載安裝包。 只是這樣安裝的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安裝http://blog.csdn.net/s8460049/art

maven學習七之使用者密碼修改和新增使用者

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

vue框架搭建之axios使用教程

本文重點介紹axios如何配合vue搭建專案框架，而axios的詳細使用介紹請移步 1、安裝 cnpm install axios --save-dev 2、引入 main.js 檔案引入： import Vue from 'vue'//引入vue

Vue學習筆記之元件模板

1.is的使用 在html5標準中<tbody>標籤裡只能寫<tr>,但又希望row元件的內容顯示在<tr>中，可以使用is屬性 <body> <div id="app" > <table> &

02.VUE學習二之資料繫結

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <ti

vue學習七 vue專案轉移之後的生成依賴包

1.最近從gitos上面clone了程式碼之後，執行在新環境，但是vue專案啟動失敗，缺失依賴包。 2.最後的正確操作是刪除module檔案包，重新執行npm install 進行下載依賴包，具體的一

Vue.js教程之axios使用

 前言 在學習了之前的路由vue-router和狀態管理vuex之後，就應該是網路互動了。就學習尤大推薦的axios了。剛好本人對網路請求這塊除了會get、put、post和delete這四個方法之外知之甚少，剛好補全上。 注意：Vue官方推薦的網路通訊庫不再是vue-

vue + qiniu(七牛) + axios 實現圖片上傳

上傳頭像功能，可以使用原生的ajax，現在有了axios封裝好的ajax，通過formData的方式。 上傳七牛的圖片，前提是要先從後臺獲取的一個token的，上傳圖片時候作為引數傳給七牛。 自己對應

Vue學習筆記之搭建vue項目

完整 with 變量 下載 mark global 使用 命令 打開 一、安裝node環境 1、下載地址為：https://nodejs.org/en/ 2、檢查是否安裝成功：如果輸出版本號，說明我們安裝node環境成功 image 3、為了提高我們的效

Vue學習之路（七）---transition過渡動畫

vue中過度動畫v-if和v-show都可以使用，首先要明白四個狀態，v-enter(剛開始進入) ，v-enter-active(進入過程中到進入完畢),v-leave-enter(剛開始離開),v-leave-enter-active(離開過程中到離開)，示例圖如下 好的，弄

Vue學習之路第七篇：跑馬燈項目實現

let rip char eth sta 對象 app 清除 一個 前面六篇講解了Vue的一些基礎知識，正所謂：學以致用，今天我們將用前六篇的基礎知識，來實現類似跑馬燈的項目。 學前準備： 需要掌握定時器的兩個函數：setInterval和clearInterval以及作用

Vue學習之原始碼分析--聊聊Vue.js的template編譯（七）

$mount 首先看一下mount的程式碼 /*把原本不帶編譯的$mount方法儲存下來，在最後會呼叫。*/ const mount = Vue.prototype.$mount /*掛載元件，帶模板編譯*/ Vue.prototype.$mount =

Vue學習之路第十七篇：過濾器的使用

ext eight 每天 分享圖片 頁面 ace mat img bin 1、過濾器 ①：Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：插值表達式和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 Ja

vue.js+elementUI學習01之後臺管理登入驗證實現axios和springMVC互動

      前段時間學習了vue.js的一些相關知識。現在動手敲程式碼，想實現一個簡單的後臺管理，包括登入驗證、選單導航、列表、增刪改查，選單/按鈕的許可權控制等一些常見功能。當然網上也有很多例子了，只是想自己敲一遍程式碼。一直從事後臺開發，公司都是有專門的前端設計及開發的

Vue學習之七(動畫鉤子,Vuex的使用與購物車的展示)

飛入購物車的動畫 步驟: 1、建立一個div，裡面放一個img，把它放在加入購物車的位置，並且隱藏 1.1 建立了div和img，寫了必要的樣式 1.2 讓div剛開始的時候，顯示到加入購物車這個位置，那麼就必須