vue學習七之Axios

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

使用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)

定義接口

配置後臺接口

獲取課程信息

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請求與後臺進行數據交互的全過程。