1. 什么是前后端分离开发的概念:

前端页面运行前端服务器上,负责页面的渲染(静态文件的加载)与跳转

后端代码运行在后端服务器上, 负责数据的处理(提供数据请求的接口)

2. 前后端分离开发碰到的问题 那就是跨域请求的问题:

什么是跨域问题: http协议不同, 端口不同, 服务器IP不同,这些都是跨域

3. 处理跨域的问题:

安装django-cors-headers模块
在settings.py中配置
# 注册app
INSTALLED_APPS = [
...
'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

在Django的settings文件做配置

$.ajax({
url: 'http://127.0.0.1:8731/login/',
type: 'post',
data: {
usr: 'abc',
pwd: '123'
},
success: function (data) {
console.log(data);
// 可以完成页面的局部刷新
}
})
def login(request):
# 假设数据库存放的用户信息为 abc:123
if request.method == 'POST':
usr = request.POST.get('usr', None)
pwd = request.POST.get('pwd', None)
if usr == 'abc' and pwd == '':
return JsonResponse({'status': 'OK', 'usr': usr})
return JsonResponse({'status': 'error', 'usr': None})

文件的上传与下载功能实现

<form>
<input class="file" type="file">
<button type="button" class="upload">上传</button>
</form>
<script>
$('.upload').click(function () {
var form_data = new FormData();
var file = $('.file')[0].files[0];
form_data.append('file', file);
$.ajax({
url: '跨域上传地址',
type: 'post',
data: form_data,
contentType: false, // 不设置内容类型
processData: false, // 不预处理数据
success: function (data) {
console.log(data)
}
})
})
</script>

前端页面--上传功能

def upload(request):
print(request.FILES)
file_io = request.FILES.get('file', None)
print(file_io)
if file_io:
with open(file_io.name, 'wb') as f:
for line in file_io:
f.write(line) return JsonResponse({'status': 'OK', 'msg': '上传成功'})

后端之-上传功能


from django.http import FileResponse
def download(request):
file = open('123.md', 'rb')
response = FileResponse(file)
# 设置响应文件类型数据的响应头
response['Content-Type'] = 'application/octet-stream'
response['Content-Disposition'] = 'attachment;filename="%s"' % file.name
return response

后端-文件下载功能

<a href="http://127.0.0.1:8121/download/">下载</a>
<button type="button" class="download">下载</button>
<script>
$('.download').click(function () {
location.href = 'http://127.0.0.1:8121/download/'
})
</script>

前端-下载方式体验

django 开发之前后端分离开发模式的更多相关文章

  1. 基于RAP(Mock)实现前后端分离开发

    看看RAP的官方定义: 什么是RAP? (Rigel API Platform) 在前后端分离的开发模式下,我们通常需要定义一份接口文档来规范接口的具体信息.如一个请求的地址.有几个参数.参数名称及类 ...

  2. 超简单工具puer——“低碳”的前后端分离开发

    本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...

  3. Web前后端分离开发(CRUD)及其演变概括

    今天学习了前后端分离开发模式又从网上查了一些资料就写了一篇博客分享: 一.为什么分离前后端 1.1早期开发 1.2后段为主mvc模式 1.2.1Structs框架介绍 1.2.2Spring mcv开 ...

  4. vue+mockjs 模拟数据,实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  5. 如何利用vue和php做前后端分离开发?

    新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...

  6. laravel5.7 前后端分离开发 实现基于API请求的token认证

    最近在学习前后端分离开发,发现 在laravel中实现前后台分离是无法无法使用 CSRF Token 认证的.因为 web 请求的用户认证是通过Session和客户端Cookie的实现的,而前后端分离 ...

  7. SpringBoot,Vue前后端分离开发首秀

    需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...

  8. Springboot前后端分离开发

    .1.springboot前后端分离开发之前要配置好很多东西,这周会详细补充博客内容和遇到的问题的解析 2,按照下面流程走一遍 此时会加载稍等一下 pom.xml显示中加上阿里云镜像可以加速下载配置文 ...

  9. beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)

    具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...

随机推荐

  1. 马凯军201771010116《面向对象程序设计(java)》第一周学习总结

    马凯军201771010116<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.co ...

  2. the implemention of redblack tree

    public class redbalcktree { private class Node{ private int val; private int key; boolean color; //b ...

  3. 关于vuex和Promise reject 或.catch 的报错处理。

    在我们开发过程中,经常会使用vuex来管理接口请求和返回数据. 在vue组件页面使用computed来读取vuex中state的数据. getTaskList({ commit }, payload) ...

  4. Flask+uwsgi+virtualenv环境配置

    Linux系统版本: SLES12sp3 (阿里云) 1. 首先需要安装python-devel,否则后续安装会报错! rpm -qa|grep python-base 结果: python-base ...

  5. js··事件捕捉

    给一个元素绑定事件,普通写法是 obj.onclick=function(){} 这就相当于给obj的onclick属性赋值是一个道理. obj.onclick=function(){} 这种写法有一 ...

  6. Introduction of filter in servlet

    官方给出的Filter的定义是在请求一个资源或者从一个资源返回信息的时候执行过滤操作的插件.我们使用过滤起最多的场景估计就是在请求和返回时候的字符集转换,或者权限控制,比如一个用户没有登录不能请求某些 ...

  7. 使用VS2015编译grpc_1.3.1

    环境: win7_x64,VS2015 开始: 一.安装工具 1. 安装cmake 2. 安装ActivePerl 3. 安装golang 4. 安装nasm 验证安装是否安装成功: cmake -v ...

  8. JDBC执行SQL语句以及Date对象和字符串之间的相互转换(关键是那张标准表)

    只要能分隔数字就行,老外没有11月这个概念 以前看见被人这么写,你觉得可以写成yyYY这样吗,可以mm这样吗,可以mM这样吗,不要有这种想法 都是大神们都写好了,只需要参考手册,然后调用API就行了 ...

  9. Spring/Spring MVC

    90.为什么要使用 spring? 答:spring是一个开源框架,是个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架 方便结构简化开发 AOP编码的支持 声明式事物的支持 方便程序的测试 ...

  10. 自己写一个 Hash 表

    项目地址:  https://github.com/kelin-xycs/HashTableLib 为什么会想要自己写一个 Hash 表, 以前也想过 Hash 表 的 原理, 觉得很神奇, 不过最近 ...