django理解02 前后端分离中的问题

前后端分离相对于传统方式的问题

  • 前后端数据交换的问题
  • 跨域问题

页面js往自身程序(django服务)发送请求,这是浏览器默认接受响应

而请求其它地方是浏览器认为存在潜在危险。自动隔离请求!!!

跨域问题的解决:

从后端入手(前端也可以)

安装模块

bash 复制代码
pip install django-cors-headers

settings.py中

  • 注册,添加中间件等配置
python 复制代码
INSTALLED_APPS = (
    ...
    'corsheaders'
)


MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    #'django.middleware.common.CommonMiddleware',     这个是原本就存在的
]
#跨域处理
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITLIST = (
    '*'
)

CORS_ALLOW_METHODS = (
    'GET',
    'POST',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

解决后的测试:

后端:

python 复制代码
#api test
def get(request):
        data_list = [
            {"comment":"今天天气很好","date":"11.18","name":"左xx"},
            {"comment":"今天很开心","date":"3.21","name":"刘xx"},
            {"comment": "乐", "date": "3.3", "name": "靖xx"}
        ]
        request_data = {"code":200,"message":"请求成功"}
        request_data["data"] = data_list
        return JsonResponse(request_data)

前端:

javascript 复制代码
<template>
    <div>
        <h1>Part1</h1>
        <el-table
            :data="tableData"
            height="250"
            border
            style="width: 100%">
            <el-table-column
            prop="date"
            label="日期"
            width="180">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="comment"
            label="评论">
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
    import axios from 'axios';

  export default {
    data() {
      return {
        tableData: [],
      }
    },
    methods:{

    },
    mounted(){
        //发送异步请求,获取数据
        axios.get("http://127.0.0.1:8000/get/").then((result) =>{
            this.tableData=result.data.data;       //从返回的result中获取需要的信息
        });
        // alert(this.tableData);
    }

  }
</script>

效果图:

下一步

考虑加入数据库

相关推荐
Asthenia04121 分钟前
面试官问:你谈谈网络协议栈是什么?你觉得Java工程师需要了解哪些部分?
后端
Swift社区7 分钟前
轻松搞定!Mac 用户的 ESP-IDF 安装全攻略
python·嵌入式
学c真好玩19 分钟前
4.3python操作ppt
开发语言·python·powerpoint
穿林鸟38 分钟前
Spring Boot项目信创国产化适配指南
java·spring boot·后端
褚翾澜39 分钟前
Haskell语言的NoSQL
开发语言·后端·golang
伏游1 小时前
【BUG】生产环境死锁问题定位排查解决全过程
服务器·数据库·spring boot·后端·postgresql·bug
巷北夜未央1 小时前
数据结构之二叉树Python版
开发语言·数据结构·python
wapicn991 小时前
手机归属地查询Api接口,数据准确可靠
java·python·智能手机·php
hycccccch2 小时前
Springcache+xxljob实现定时刷新缓存
java·后端·spring·缓存
郝YH是人间理想2 小时前
OpenCV基础——傅里叶变换、角点检测
开发语言·图像处理·人工智能·python·opencv·计算机视觉