django-restful:与前端vue接口对接

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了django-restful:与前端vue接口对接相关的知识,希望对你有一定的参考价值。

参考技术A 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端口 导致了跨域访问

vue-cli3 本地数据模拟后台接口

vue-cli3 本地数据模拟后台接口

原理:

  将本地的json数据在前端模拟为后台接口,然后调用接口,完成前端操作。在后台接通后可以直接在api配置文件中修改路径,完成前后台对接。

配置:

  1.文件目录

    技术图片

  2. 安装express

npm i express

  3.配置vue.config.js

    3.1配置express

const express = require(‘express‘)
const app = express()
let apiRoutes = express.Router()
app.use(‘/api‘, apiRoutes) 

    3.2配置接口

before (app) {
      /* 基年数据列表接口 */
      app.get(‘/mock/backList‘, (req, res) => {
        res.json(require(‘./static/mock/backList.json‘))
      })
      /* 业务图层数据接口 */
      app.post(‘/mock/geoJson‘, (req, res) => {
        res.json(require(‘./static/mock/geoJson.json‘))
      })
      /* 基年数据接口 */
      app.post(‘/mock/baseData‘, (req, res) => {
        res.json(require(‘./static/mock/baseData.json‘))
      })
    }

    代码结构:

    技术图片

 

  4.从新启动项目,即可访问接口

    技术图片

 

   5.之后就是正常的前端开发,在api中配置接口路径,在页面调用即可。

 

 

 

钻研不易,转载请注明出处.......

 

参考自:

https://blog.csdn.net/huijianpang/article/details/86308560

 

以上是关于django-restful:与前端vue接口对接的主要内容,如果未能解决你的问题,请参考以下文章

Django-Rest + React 前端:CORS 问题

vue与后台对接是哪个文件?

关于vue跨域名对接微信授权认证和APP授权认证

web前端怎么调用api接口

django-rest framework 接口规范 原生django接口单查群查 postman工具 CBV源码解析

前端提供给后端一个接口是啥意思