django加vue代码

```python
# 后端配置图片表字段
models.ImageField(upload_to='good', null=True, blank=True)

# 设置主键
def __str__(self):
return self.version_name

# 多对多表字段，需要重新创建一个表
models.ManyToManyField('Version')

# 返回报错信息
return Response({'error': cate_ser.errors})

# 修改内容
goods_ser = serializer.GoodsSer(instance=goods_obj, data=data)

# django自带的user表，用的时候继承就好了
from django.contrib.auth.models import AbstractUser

# 类型多选
TYPE_CHOICES = ((1, '微博'), (2, '微信'), (3, 'QQ'))
models.SmallIntegerField(choices=TYPE_CHOICES)

# 将函数装饰器，转换成方法装饰器
from django.utils.decorators import method_decorator
@method_decorator(is_token,name='dispatch')

# Q方法
from django.db.models import Q

# vue跳转页面
window.location.href = '/bookshow'

# 自动刷新
window.location.reload()

# vue中实例化图片字段
var img = document.getElementById('img').files[0]

# 传输内容和获取内容
<router-link :to="{'name': 'update_chanping', params:{'id': i.id}}">修改</router-link>
this.$route.params.id

this.$router.push({path: '/name', query: {'name': name}})
this.$route.query.name

# 拦截器
filters:{
ci:function(val){
return val + '次'
}
}

# 跳转
this.$router.push({name: 'member'})
```

### 中间件判断是否登录

```python
from django.utils.deprecation import MiddlewareMixin
# 中间件继承的类
from django.http import JsonResponse
# 中间件输出的json模式的内容

class IsPathTokenMiddleware(MiddlewareMixin):

def process_request(self, request):
path_list = ['/user/home/', '/user/cart/'] # 路由名单
current_path = request.path_info # 当前访问的路由信息
token = request.GET.get('token')
if current_path in path_list:
# 如果当前访问路径在路由列表中，判断token
if not token:
return JsonResponse({'msg': '请先登录', 'code':203})
```

### 微博第三方登录

```python
class WeiView(APIView):
def get(self, request):
code = request.GET.get('code')
data = {
'client_id': '640934387',
'client_secret': '5fa098713507d9f005c0f0f1cd21ef84',
'grant_type': 'authorization_code',
'code': code,
'redirect_uri': 'http://127.0.0.1:8080/deng'
}
print(code)
# 获取端口
r = requests.post('https://api.weibo.com/oauth2/access_token', data)
print(r.json())
# 获取微博登录
# 定时需要登录
uid = r.json()['uid']
access_token = r.json()['access_token']
# 保存微博账号到我们的第三方表中
# 判断当前微博uid是否在第三方表中如果不存在就添加到数据库中
open_user = OpenUser.objects.filter(uid=uid).first()
if not open_user:
OpenUser.objects.create(uid=uid, type=1)

# 根据access_token获取到用户的信息
# r = requests.get('https://api.weibo.com/2/users/show.json', {'access_token': access_token, 'uid': uid})
# 传递参数
return Response({'msg': '登录成功', 'code': 202, 'uid': uid})
else:
return Response({'msg': '登录成功', 'code': 200})
# return Response({'msg': 'ok'})

def post(self, request):
username = request.data.get('username', '').strip()
password = request.data.get('password', '').strip()
uid = request.data.get('uid', '')
print(username)
print(password)
print(uid)
user = User.objects.filter(username=username).first()
print(user.username)
if user:
OpenUser.objects.filter(uid=uid).create({'user_id': user.id})
return Response({'msg': '绑定成功', 'code': 200})
else:
return Response({'msg': '本用户已存在请重新登录', 'code': 400})
```

### 生成图片验证码

```python
def make_img(request):
from io import BytesIO
# 生成一个画布
image = Image.new('RGB', (150, 40), 'blue')

# 创建一个画笔 来绘画
draw = ImageDraw.Draw(image)

# 创建一个图片字体
font = ImageFont.truetype('simsun.ttc', size=30)

# 生成随机6位数字

r = random.sample(string.digits + string.ascii_letters, 6)
# print(r)
# 列表拼接成字符串
words = ''.join(r)
print(words)

# 绘制一个画笔

draw.text(xy=(30, 5), text=words, fill='red', font=font)
fp = BytesIO()
image.save(fp, 'png')

# 从字节流返回数据
data = fp.getvalue()

return HttpResponse(data, content_type='image/png')
```

### 通过外键获取附表的内容

```python
class UserSer(serializers.ModelSerializer):
role = serializers.CharField(source='role.name')
class Meta:
model = User
fields = ('id', 'name', 'img', 'role')
```

### 前端输入框规则

```python
<template>
<div>
<h2>员工登录</h2>
<el-form ref="form" :model="form" :rules="loginform"> <!--rules这是属于规则，需要先在外框绑定规则-->
<el-form-item prop="username">
<el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
<!-- prefix-icon 这是图标 绑定form中的username -->
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" prefix-icon="el-icon-key"></el-input>
</el-form-item>
<el-button type="primary" @click="sub">登录</el-button>
<el-button type="info" @click="reset">重置</el-button>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
form:{ // form表单绑定的变量
username: '',
password: ''
},
loginform:{ // 这是规则
username: [ // username的规则
{required: true, message: '用户名不能为空', reiiger: 'blur'},
// username不能为空的规则 required true为空 message 提示的内容
{
min: 1,
max: 10,
message: '用户名长度应该在5-10未之间',
triiger: 'blur'
}
// 设置长度的规则 min为最少 max为最大
],
password: [ // username的规则
{required: true, message: '密码不能为空', reiiger: 'blur'},
// username不能为空的规则 required true为空 message 提示的内容 reiiger 这是触发器 失去焦点的触发
{
min: 1,
max: 10,
message: '密码长度应该在5-10未之间',
triiger: 'blur'
}
// 设置长度的规则 min为最少 max为最大
]
}
}
},
methods: {
// 重置
reset(){
this.$refs.form.resetFields()
},
sub(){
this.$refs.form.validate((validate, obj)=>{ // validate 这是是否通过规则 obj 是规则返回的信息
console.log(validate); // 校验是否通过，通过为true，否则false 也就是规则是否成功
if (!validate){
// 未通过
this.$message({
message: '请填写相关参数',
type: 'error'
});
return false;
}
// 向后台发送信息
axios({
url: 'http://127.0.0.1:8000/myapp/login/',
method: 'post',
data: this.form
}).then(res=>{
if (res.data.code == 1000) {
// 保持状态
sessionStorage.setItem('token', res.data.data);
this.$message({
message: res.data.msg,
type: 'success'
});
// 完成跳转
this.$router.push({
name: 'helloword'
});
} else{
this.$message({
message: res.data.msg,
type: 'error'
});
}
});
});
}
}
}
</script>
```

### 分页

```python
# 页数
p = int(request.GET.get('p', 1))
# 获取所有数据
staffobj = Staff.objects.all()
# 为空
if not staffobj:
return Response(ErrNo.A2001)
# 每页有1条数据
page_obj = Paginator(staffobj, per_page=1)
# 总页数
total = page_obj.num_pages
# 获取当前页的数据
page_data = page_obj.page(p)
# 数据序列化
obj = StaffSer(page_data, many=True)
return Response({'msg': '', 'code': 200, 'data': {'data': obj.data, 'total': total}})

# 分页完整版
# 获取页数
p = request.GET.get('p', 1)
# 返回所有数据
user = User.objects.all()
# 每页只有一条数据
pageobj = Paginator(user, per_page=1)
# 分页列表
page = [i for i in pageobj.page_range]
# 当前页的数据
page_data = pageobj.get_page(p)
# 是否有上一页
shang = page_data.has_previous()
# 是否有下一页
next = page_data.has_next()
# 将分页的数据序列化
obj = UserSer(page_data, many=True)
# 返回所需要的内容
return Response({'code': 1000, 'msg': '', 'data': {'data': obj.data, 'page': page, 'shang': shang, 'next': next}})
```