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 responseviews
相关文章推荐
- vue+djangorestframework打造前后端分离项目(一)之drf的ViewSet、router和跨域
- Django REST framework+Vue 打造生鲜超市(二)
- Django REST framework+Vue 打造生鲜超市(三)
- Vue+Django REST framework打造生鲜电商项目:学习过程之报错信息
- Django REST framework+Vue 打造生鲜超市(五)
- Django REST framework+Vue 打造生鲜超市(一)
- Django REST framework+Vue 打造生鲜超市(八)
- Vue+Django REST framework 生鲜电商项目
- Django REST framework+Vue 打造生鲜超市(八)
- Vue+Django REST framework 打造生鲜电商项目
- 【备忘】[全栈开发 ]Vue+Django REST framework 打造生鲜电商项目视频教程
- Django REST framework+Vue 打造生鲜超市(六)
- Django REST framework+Vue 打造生鲜超市(六)
- Django REST framework+Vue 打造生鲜超市(七)
- 使用ASP.Net WebAPI构建REST服务(一)——简单的示例
- Django 之REST framework学习:Authentication认证流程源码剖析
- 使用ASP.Net WebAPI构建REST服务(一)——简单的示例
- Django rest framework工具包简单用法示例
- django rest framework Serializer
- Django-rest-framework学习(-)Serialization