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