您的位置:首页 > Web前端 > Vue.js

Django rest framework + Vue简单示例

2018-02-26 10:48 916 查看

构建vue项目参考这篇文章https://segmentfault.com/a/1190000008049815

一、创建Vue项目

修改源:npm config set registry https://registry.npm.taobao.org         (建议修改)

创建脚手架:vue init webpack Vue项目名称

基本插件:

axios,发送Ajax请求
vuex,保存所有组件共用的变量
vue-cookies,操作cookie

二、流程

vue项目基本目录结构

from django.http import JsonResponse
from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView

# Create your views here.

class LoginView(APIView):
def get(self,request,*args,**kwargs):
ret = {
'code': 1000,
'data': '老男孩'
}
response = JsonResponse(ret)
response['Access-Control-Allow-Origin'] = "*"
return response

def post(self,request,*args,**kwargs):

print(request.POST)
ret = {
'code':1000,
'username':'老男孩',
'token':'71ksdf7913knaksdasd7',
}
response = JsonResponse(ret)
response['Access-Control-Allow-Origin'] = "*"
return response

def options(self, request, *args, **kwargs):
# self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
# self.set_header('Access-Control-Allow-Headers', "k1,k2")
# self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
# self.set_header('Access-Control-Max-Age', 10)

response = HttpResponse()
response['Access-Control-Allow-Origin'] = '*'
response['Access-Control-Allow-Headers'] = '*'
#response['Access-Control-Allow-Methods'] = 'PUT'
return response

class CoursesView(APIView):
def get(self, request, *args, **kwargs):
pk = kwargs.get('pk')
if pk:
ret = {
'title': "标题标题标题",
'summary': '老师,太饿了。怎么还不下课'
}
else:
ret = {
'code': 1000,
'courseList': [
{"name": '21天学会Pytasdfhon', 'id': 1},
{"name": '23天学会Pytasdfhon', 'id': 2},
{"name": '24天学会Pytasdfhon', 'id': 3},
]
}
response = JsonResponse(ret)
response['Access-Control-Allow-Origin'] = "*"
return response
views  

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: