ckdk's blog

前后端分离实践(django + vue)

2018/05/31

创建Vue项目

环境搭建

安装npm

  • 安装vue-cli
1
npm install -g @vue/cli
  • 创建vue项目
1
vue create fronted

创建django项目

安装django

pass

创建项目+编写测试接口

pass

解决django跨域问题

安装django-cors-headers

1
pip install django-cors-headers

添加app

1
2
3
4
5
INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

添加中间件

1
2
3
4
5
6
MIDDLEWARE = [ # 注意顺序
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

配置跨域规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 配置允许跨站访问本站的地址
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
      'localhost:8080',
)

# 允许请求带cookie
CORS_ALLOW_CREDENTIALS = True

# 默认值是全部:
# CORS_ORIGIN_WHITELIST = ()  # 或者定义允许的匹配路径正则表达式.
# CORS_ORIGIN_REGEX_WHITELIST = ('^(https?://)?(\w+.)?>google.com$', )   # 默认值:
# CORS_ORIGIN_REGEX_WHITELIST = ()

CORS_ALLOW_METHODS = (
'GET',
'POST',
# 'PUT',
# 'PATCH',
# 'DELETE',
# 'OPTIONS'
)

# 设置允许的header：
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

session处理

因为前后端分离，django自带的session和cookie处理机制不再生效，这里用户在登陆成功后，我们手动把sessionid传给前台，前台用cookie保存起来。

后台：

1
2
3
4
5
6
# 验证通过后， 将sessionid返回给前台
res_dict = dict(
    status=1,
    session_id=request.session.session_key,
)
return JsonResponse(res_dict)

前台:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 前台拿到session_id后将其写到cookie中
function setCookie(name,value) { 
    var days = 14; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+"; path=/"; 
} 

$.ajax({
    ...
    success: function(data){
      ...
      setCookie("sessionid", data.session_id);
      ...
    },
    ...
});

ajax跨域请求带cookie

登陆后 前台的请求应该携带cookie，以便于后台做权限管理。
ajax默认不带cookie，在ajax请求是应该做跨域处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
    url: 'crosssurl',
    type: "get",
    dataType: "json",
    // 设置带cookie访问
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    success: function(data) {
        ...
    },
    error: function(a,b,c) {
        ...
    }
});
CATALOG
  1. 1. 创建Vue项目
    1. 1.1. 环境搭建
      1. 1.1.1. 安装npm
  2. 2. 创建django项目
    1. 2.1. 安装django
    2. 2.2. 创建项目+编写测试接口
    3. 2.3. 解决django跨域问题
      1. 2.3.1. 安装django-cors-headers
      2. 2.3.2. 添加app
      3. 2.3.3. 添加中间件
      4. 2.3.4. 配置跨域规则
      5. 2.3.5. session处理
      6. 2.3.6. ajax跨域请求带cookie
Archive Tag
Total : 15
2019
Invalid date
2019
2018
Invalid date
2018
Invalid date
2017
2016
Invalid date