今天首席CTO笔记来给各位分享关于django后台文章如何更好的在前端显示的相关内容，其中也会对django写前端进行详细介绍，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
1、后台获取的数据怎样在前端页面上显示2、django-restful:与前端vue接口对接3、Django后台上传的图片前台怎么显示不出来？路径的问题怎样解决？后台获取的数据怎样在前端页面上显示
1.用ajax来获取求情到后台的数据： 2.一般来说后台返回的数据，都是字符串（ 而且是json和数组组合的字符串）需要用eval解析成真真的json，然后直接用代码写在页面中就行！
django-restful:与前端vue接口对接
category 与vue 接口对接
首先是需要把所有的category的内容取出来
由于前端vue展示category是分级的
一级 二级 三级 这样展示的
所以我们需要把三个内容都拿出来
但是首先需要取出第一级 然后第一级镶嵌了第二级，然后第二级镶嵌第三季 ，就跟上面goods中显示外键的category的内容一样
我们还是需要写serializer
这样就是一级 镶嵌二级 二级镶嵌三级
但是这里有一个问题不要搞错了 这三个类的位置不能弄错了
因为一级是调用二级 所以二级一定是先写好了的
所以二级一定在一级上面 同理 三级要在二级上面
然后就是view
在过滤中加上category_type = 1 这样就可以直接显示第一大类 然后第一大类中有第二小类 这样更有层次感 如果直接一下子全部取出来 就不好分辨了
同时我们还要处理取出某个单一的信息
所以 我们继承了mixins.RetrieveModelMixin 这个类，这是一个显示详情的类
例如显示某个动物园的某个动物那样
/zoos/id
这样的url
同样这样写了 我们就直接只配置category的url就够了
就不用考虑 后面的id是否还需要配置一个url 这些都不用考虑了，因为我们继承了 viewset这个类
这些问题他都帮我们解决了
这样处理我们后端就能看见了
但是这样处理了 前端对接时 会发现 无法显示
因为有一个跨域问题
这个问题前后端 都可以独自解决 这里学习的是后端，所以讲一下后端的做法
就是修改服务端
在github上搜索django-cors-headers就可以找到这个信息
同样里面介绍如何使用
安装
pip install django-cors-headers
然后settins中INSTALLED_APPS配置和settings中MIDDLEWARE配置
这里要注意 MIDDLEWARE配置中
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
这两个必须放在
'django.middleware.csrf.CsrfViewMiddleware',
这个的前面 不然会报错
同时还要配置
CORS_ORIGIN_ALLOW_ALL = True
允许跨域访问 它默认是False
这样前端就可以正常显示了
为什么会产生跨域访问
因为vue中api配置的中 我们调试数据 不可能把所有的host 都修改了 有一些是线上数据 我们调试的是本地的一部分数据 所以要重新定一个localhost
修改部分 host的链接
这样就导致了跨域 本身使用的是一个线上host端口，但是数据中有一部分是请求的是本地host端口 导致了跨域访问
Django后台上传的图片前台怎么显示不出来？路径的问题怎样解决？
需要在 urls 中配置一下
urlpatterns = patterns('',
# 第一个参数就是要显示图片的url
# 第二个 django的static 模块
# 第三个 文件的实际路径
url(r'^static/(?Ppath.*)', 'django.views.static.serve', {'document_root': 'd:/wwwsite/office/static'}),
)
然后在相应的 html 文件中
img src="/static/images/psb.jpg"
应该就可以了
这个貌似有点问题。下面的可以（python2.7 django1.5）
把 jpg 等图片文件，放到某个app下面的 static文件夹(app Name) 文件夹下面就可以了（前提是你的css，js等文件已经能够正常访问）。
那么使用 类似这样的就能访问了
有点事，需要出去趟 ，回来在处理吧 ...
结语：以上就是首席CTO笔记为大家整理的关于django后台文章如何更好的在前端显示的全部内容了，感谢您花时间阅读本站内容，希望对您有所帮助，更多关于django写前端、django后台文章如何更好的在前端显示的相关内容别忘了在本站进行查找喔。