Vue + Django2.0.6 学习笔记 6-3,在Vue中展示商品分类数据

在后台写好之后  现在去Vue中修改获取api数据的路径：

src/api/api.js

let local_host = 'http://127.0.0.1:8000';
//获取商品类别信息
export const getCategory = params => {
  if ('id' in params) {
    return axios.get(`${local_host}/categorys/` + params.id + '/');
  }
  else {
    return axios.get(`${local_host}/categorys/`, params);
  }
};

这样还不行 因为会出现跨域访问的问题

因为访问端口与远程服务器端口不一致。导致了跨域

咋办？

1. github搜索 django cors headers 安装

pip install django-cors-headers

2. 设置settings.py

INSTALLED_APPS = [
    'corsheaders'
]

MIDDLEWARE = [
# 放在middleware前面
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
]

#手动添加
CORS_ORIGIN_ALLOW_ALL = True

效果：

添加导航菜单

去xadmin中修改商品类别的是否导航字段即可

未完待续