欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-14 22:42:44
...

在后台写好之后  现在去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

效果:

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

添加导航菜单

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

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

未完待续