5 项目---自定义用户模型以及轮播图图片url返回格式

创建自定义的用户模型类

 

 1. 用命令创建users 应用

5 项目---自定义用户模型以及轮播图图片url返回格式_第1张图片

2. 将users 注册到settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    # 'luf.apps.home',
    'home',
    'xadmin',
    'crispy_forms',
    'reversion',
    'users'
]

 

3. 在项目主配置文件中  settings.py

AUTH_USER_MODEL 参数的设置以点.来分隔,表示应用名.模型类名
AUTH_USER_MODEL = 'users.User'

我们自定义的用户模型类还不能直接被Django的认证系统所识别,需要在配置文件中告知Django认证系统使用我们自定义的模型类。

4. 自定义用户模型表

class User(AbstractUser):
    """用户模型类"""
    mobile = models.CharField(max_length=11, unique=True, verbose_name='手机号')

    class Meta:
        db_table = 'ly_users'
        verbose_name = '用户'
        verbose_name_plural = verbose_name
View Code

5 项目---自定义用户模型以及轮播图图片url返回格式_第2张图片

 

5. 进行数据迁移

注意:Django建议我们对于AUTH_USER_MODEL参数的设置一定要在第一次数据库迁移之前就设置好,否则后续使用可能出现未知错误。

python manage.py makemigrations
python manage.py migrate

 

解决home应用中模型类中的,image字段,url返回给前端格式问题

1.在配置文件中设置
# 访问静态文件的url地址前缀
STATIC_URL = '/static/'

# 设置django的静态文件目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,"luffy/static")
]

# 项目中存储上传文件的根目录[暂时配置],注意,static目录需要手动创建否则上传文件时报错
MEDIA_ROOT=os.path.join(BASE_DIR,"luffy/static")
# 设置访问上传文件的url地址前缀
MEDIA_URL = "/media/"   # 避免和STATIC_URL 的路径相同所有用“/media/”

# 当前站点的域名
HOST = "http://api.luf.cn:8000"

 
2. 总路由中设置
from django.contrib import admin
from django.urls import path,include,re_path

import xadmin
xadmin.autodiscover()

# version模块自动注册需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()
from django.conf import settings
from django.views.static import serve

urlpatterns = [
    re_path(r'^media/(?P.*)$', serve, {"document_root":settings.MEDIA_ROOT}),
    path(r'xadmin/', xadmin.site.urls),
    path('admin/', admin.site.urls),
    path('home/', include("home.urls")),
    path('users/', include("users.urls")),
    # include 的值必须是 模块名.urls 格式,字符串中间只能出现一个圆点
]
3. home /views.py 中:
from django.db.models import Q
from rest_framework.views import APIView
from rest_framework.response import Response
from .models import bannerInfo
from django.conf import settings
class BannerInfoAPIView(APIView):
    """
    轮播图列表
    """
    def get(self,request):
        # 获取数据
        banners = bannerInfo.objects.filter(Q(is_show=True) & Q(is_delete=False)).order_by("-orders")
        # 调整banners的images字段

        # 序列化
        data = []
        for item in banners:
            data.append({
              # 拼接图片的url地址
              "image": settings.HOST+item.image.url,
              "link":item.link,
              "orders":item.orders,
            })
        return Response(data)

 

后端轮播模型的调整,让用户可以不上传图片,前端表单提交数据的时候可为空

home/models.py中: 通过设置 null =True  和  blank =True   

from django.db import models

# Create your models here.

class BannerInfo(models.Model):
    # update_to 存储子目录,真实存放地址会使用配置中的MADIE_ROOT+upload_to
    image = models.ImageField(upload_to='banner',verbose_name='轮播图',null=True,blank=True)
    name = models.CharField(max_length=150,verbose_name='轮播图名称')
    link = models.CharField(max_length=150,verbose_name='轮播图广告地址')
    orders = models.IntegerField(verbose_name='显示顺序')
    is_show = models.BooleanField(verbose_name='是否上架',default=False)
    is_delete = models.BooleanField(verbose_name='逻辑删除',default=False)
    class Meta:
        db_table='ly_banner'
        verbose_name='轮播图'
        verbose_name_plural=verbose_name
    def __str__(self):
        # 从orm 模型操作中读取的image字段其实是一个对象
        # print(type(self.image))
        # 真实的图片地址是自动保存到了对象下面的url  self.image.url

        return self.name
View Code

 

 

5 项目---自定义用户模型以及轮播图图片url返回格式_第3张图片

 后端提供的轮播图数据接口

 

5 项目---自定义用户模型以及轮播图图片url返回格式_第4张图片

 

前端的axios请求函数:banner.vue组件中:

 mounted:function () {
      //获取轮播图
      this.$axios.get('http://api.luf.cn:8000/home/banner').then(res=>

      {
        console.log(res);
        this.banner_list=res.data;

      }).catch(error=>{
        console.log(error)
      })
    }

 前端浏览器中点击检查:

 

转载于:https://www.cnblogs.com/knighterrant/p/10597572.html

你可能感兴趣的:(python,前端,后端,ViewUI)