django前端引用数据_vue django 常用功能对接

vue-django-rest-framework

This is a example for an application using Vue and Django.

使用 Element UI 搭建前端模板

后端使用 django-rest-framework 提供 api

swagger 前后端 api 对接文档

已实现的功能

三层评论

JWT 登陆

faker 模拟数据，比前端的Mock更强大

api操作，前端使用axios， 后端使用rest_framework

标签云

Timeline

首页3D满屏落花效果，欣赏一下尽快关闭，因为还有BUG，从别处移植的。

author: mikele

date: 2019-12-26

一些说明wiki

前端

src/store

用 vuex 保存状态

如 name，token

可保存在cookie中或localStorage中

src/api

与后端api接口 使用axios

src/router

路由，即导航的url与*.vue文件对接

如果太多了要分类，

在src/router/index引用src/router/modules

// src/router/modules/blog.js

const blogRouter...

// src/router/index.js

import blogRouter from './modules/blog'

...

export const constantRoutes = [

...

blogRouter,

]

src/components

经常使用的，封装成组件，比如comment, 三层评论

src/filters

时间过滤

// 使用

{{ created | parseTime }}

src/layout

后台框框, 也可弄成前台框框

src/permission.js

判断角色是 admin or editor

src/settings.js

标题、logo

src/styles

全局styles

// src/styles/element-ui.scss

// for mobile phone

@media only screen and (max-width:414px) {

.hidden-s-only {

display: none !important

}

}

@media only screen and (min-width:415px) {

.hidden-s-and-up {

display: none !important

}

}

src/utils

请求中间件，类似python中的middleware

// src/utils/api.js

config.headers['Authorization'] = getToken()

// src/utils/auth.js

const TokenKey = 'Authorization'

...

export function setToken(token) {

return Cookies.set(TokenKey, 'JWT ' + token)

}

三层评论

回复

回复

...

data() {

return {

level: null

}

}

...

if (comment.blog) {

// 一级评论

this.comments.unshift(data)

console.log('add 1 level')

} else if (this.level === 3) {

// 三级评论

this.comments.forEach((x, i, comments) => {

// console.log(i, x)

x.sub_comment.forEach((xs, j, c) => {

// console.log(j, xs)

if (xs.id === data.parent_comment) {

xs.sub_comment.unshift(data)

// console.log('add 3 level')

}

})

})

console.log('level 3')

} else if (this.level === 2) {

// 二级评论

this.comments.forEach((x, i, comments) => {

if (x.id === data.parent_comment) {

x.sub_comment.unshift(data)

console.log('add 2 level')

}

})

}

对应后端三个CommentSerializer

后端

# ~/.zshrc 缩短命令

alias dapp="python3 manage.py startapp"

alias pm="python manage.py"

alias dsp="django-admin startproject"

alias dev="npm run dev"

如新建app再移到apps

dapp comment & mv comment apps

apps/blog/

serializers.py # 序列化python dict为json数据

permissions.py # 权限配置

pagination.py # 自定义分页, 返回code = 20000

viewsets.py

models.py

rest/router.py

from rest_framework import routers

from blog.viewsets import BlogViewSet, TagViewSet, CatoryViewSet, CommentViewSet

from user.viewsets import UserViewSet, SmsCodeViewset

router = routers.DefaultRouter()

router.register('blogs', BlogViewSet)

router.register('users', UserViewSet)

...

router.register('code', SmsCodeViewset, base_name='code') # 模拟短信注册

rest/schema.py

graphql 接口, 节省宽带的api

apps/blog/viewsets.py

filter_fields = '__all__' # 如果用url_filters过滤

search_fields = '__all__' # 如果要搜索q=vue

# apps/user/models.py

...

def save(self, *args, **kwargs):

'''save username as name'''

self.name = self.username

super(UserProfile, self).save(*args, **kwargs)

设置unique=True tag 不重复

python manage.py makemigrations

python manage.py migrate

如果重复了，先把重复的删除掉再执行上2行命令。

# apps/blog/models.py

class Tag(models.Model):

name = models.CharField(max_length=70, unique=True)

ORM操作注意事项

多对多操作取决于ManyToManyField在哪个model

现在来假设有个学生要找个学校读书，你得建个学校，才有对应的学校名，才能决定是哪个学校。

# models.py

class Blog(models.Model):

tags = models.ManyToManyField(Tag, blank=True)

# ORM

tag = Tag.objects.first()

tag.blog_set.create(

category=category, owner=user,

body=fake.text(), title=fake.sentence()

)

graphql 使用

// 复制到文本框，然后点运行

{

users {

id,

username

}

}

rest_framework官网有很多好东西。文档也写得很好，注释了很多需要的东西。

使用说明

git clone https://github.com/toyourheart163/vue-django-rest-framework

cd vue-django-rest-framework

Setup

$ npm install

$ pip install -r requirements.txt

$ python manage.py migrate

$ python import_data.py # 生成faker数据

$ python manage.py runserver

另一个终端窗口

npm run dev

swagger 前后端 api 对接文档

docs