Vue+DRF练习

使用Vue与DRF做一个简单的前后端分离练习。

练习

  1. 使用vue-cli部署一个前端项目,并且使用axios请求上接口drf中提供的省份信息接口数据。

    要求:

    1. 能实现前端增删查改省份信息的功能

    ​ 其中查询数据的时候,显示为案例中的表格格式。

    ​ 注意,在drf中可以通过自定义请求头,实现cors,解决axios跨域问题。

    国家编号 (id)省份 (name)占地面积 (area)人口 (population/亿)国民生产总值 (gdp/万亿)
    1广东17.981.129.73
    2江苏10.260.809.26
    3山东15.71.007.65
    4浙江10.180.575.62
    5河南16.70.964.8
    6四川48.50.834.07
    7湖北18.590.593.94
    8湖南21.180.693.64
    9河北190.753.6
    10福建12.140.393.58
  1. 实现点击gdp表头信息,能够进行倒叙排序

DRF

解决跨域问题

使用 django-cors-headers 来解决跨域

安装:

1
pip install django-cors-headers

修改配置:

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
# settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',

'rest_framework',
+ 'corsheaders',
'province',
]

# 设置跨域白名单
+ CORS_ORIGIN_WHITELIST = [
"http://localhost:8081",
]

MIDDLEWARE = [
+ 'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

推荐阅读: https://pypi.org/project/django-cors-headers/

排序

Vue

axios

对于 axios 设置为 Vue.prototype 的属性,这样可以在其它地方引用。

1
2
3
// index.js 
import axios from "axios";
Vue.prototype.$axios = axios
1
2
3
4
5
6
7
8
9
10
11
12
// Home.vue
// 使用 this.$axios 来使用 axios 发送 Ajax 请求

this.$axios.get("http://127.0.0.1:8000/province/", {
params: {"ordering": 'gdp'}
}).then(response => {
this.province = response.data;

}).catch(error => {
console.log(error);
console.log(error.response);
})
-------------The End-------------

本文标题:Vue+DRF练习

文章作者:Naqin

发布时间:2019年11月03日 - 19:11

最后更新:2019年11月06日 - 23:11

原始链接:https://chennq.top/DRF/20191103-Django-REST-Framework-4.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Naqin wechat
欢迎看官加我微信!
坚持原创技术分享,您的支持将鼓励我继续创作!
0%