路飞项目--03

二次封装Response模块

# drf提供的Response，前端想接收到的格式  {code:xx,msg:xx}
 后端返回，前端收到：

APIResponse(tokne='asdfa.asdfas.asdf')---->{code:100,msg:成功,token:asdfa.asdfas.asdf}
APIResponse(code=101,msg='用户不存在') ---->{code:101,msg:用户不存在}
APIResponse(results=[{},{}])---->{code:100,msg:成功,results:[{},{}]}
APIResponse(msg='创建成功')---->{code:100,msg:创建成功}
APIResponse(token=sd.11.22,icon='用户头像')---->{code:100,msg:创建成功,token:sd.11.22,icon:'用户头像'}
APIResponse(msg='创建成功',headers={'xx':xxx})---->{code:100,msg:创建成功}
    

# 开始封装:

# utills/common_response.py
from rest_framework.response import Response
class APIResponse(Response):
    def __init__(self, code=100, msg='成功', status=None, headers=None, **kwargs):
        data = {'code': code, 'msg': msg}
        if kwargs:  # kwargs={token:xx,icon:zz}
            data.update(kwargs)
        # super().__init__()---等同于 -->Response(data=data)
        super().__init__(data=data, headers=headers, status=status)
# views.py
from utils.common_response import APIResponse
class TestResponseView(APIView):
    def get(self, request):
        # retur n APIResponse(token='ss.ee.ss',icon='/media/icon/default.png')
        # return APIResponse(msg='创建成功')
        # return APIResponse(msg='用户不存在',code=101)
        # return APIResponse(results=[{},{}])
        return APIResponse(headers={'xx': 'yy'})
        # raise APIException(detail='用户名或密码错误')  # {code:999,msg:用户名或密码错误}

admin和国际化问题

# admin 注释掉，重新启动
    * url中注册app
    * 重新迁移
# 国际化

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

5个视图扩展类封装

# utills/mixins.py
from rest_framework.mixins import ListModelMixin, CreateModelMixin, DestroyModelMixin, UpdateModelMixin, \
    RetrieveModelMixin

from .common_response import APIResponse


class CommonListModelMixin(ListModelMixin):
    def list(self, request, *args, **kwargs):
        # Response 的对象---》res.data
        res = super().list(request, *args, **kwargs)
        return APIResponse(results=res.data)  # {code:100,msg:成功,results:[{},{},{}]}


class CommonCreateModelMixin(CreateModelMixin):
    def create(self, request, *args, **kwargs):
        res = super().create(request, *args, **kwargs)
        return APIResponse(msg='新增成功', result=res.data)  # {code:100,msg:新增成功,result:{}}


class CommonDestroyModelMixin(DestroyModelMixin):
    def destroy(self, request, *args, **kwargs):
        super().destroy(request, *args, **kwargs)
        return APIResponse(msg='删除成功')  # {code:100,msg:删除成功}


class CommonUpdateModelMixin(UpdateModelMixin):
    def update(self, request, *args, **kwargs):
        super().update(request, *args, **kwargs)
        return APIResponse(msg='修改成功')  # {code:100,msg:修改成功}


class CommonRetrieveModelMixin(RetrieveModelMixin):
    def retrieve(self, request, *args, **kwargs):
        res = super().retrieve(request, *args, **kwargs)
        return APIResponse(result=res.data)  # {code:100,msg:成功,result:{}}

开启media访问

# 上传文件( ImageField,FileField ),会自动传到 media文件夹下的 to 的路径

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = 'media/'

# 在总路由中配置：

from django.conf import settings
from django.views.static import serve
path('media/<path:path>', serve, kwargs={'document_root': settings.MEDIA_ROOT}),
# http://127.0.0.1:8000/media/icon/2.png

前端创建--vue2

前端使用vue2搭建，使用pycharm打开运行，删除不需要的样式和vue文件

vue create luffy_city

前端配置

1、全局样式：

 # 在main.js里引入：

//在这里导入即可--全局样式生效
import '@/assets/css/global.css'
/* assets/css/global.css */
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}

2、配置文件(路由)：

# 在main.js中注册

        以后再任意组件中，this.$settings.BASE_URL  # 拿到基地址

// main.js
import settings from "@/assets/js/settings";
Vue.prototype.$settings = settings

/* asesst/ js/ settings.jss */
export default {
    BASE_URL: 'http://127.0.0.1:8000/api/v1/'
}

3、axios：

# 安装：cnpm install -S axios

// main.js
import axios from "axios";
Vue.prototype.$axios = axios

// 以后再任意组件中直接使用
this.$axios.get(this.$settings.BASE_URL+'user/user/loign/')

4、使用elementui：

# 安装: cnpm install element-ui -S

# 网址：组件 | Element

// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

5、操作cookie:

# 安装：cnpm install vue-cookies

# 以后任意组件直接使用：this.$cookies.set / this.$cookies.get

// main.js
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

6、使用bootstrap:
# 安装：cnpm install bootstrap@5

   卸载：cnpm remove bootstrap@4

# 在组件中使用： <button class="btn btn-danger">点我看美女</button>

// main.js
import 'bootstrap/dist/css/bootstrap.min.css'

后端之轮播图

首页home---轮播图接口
轮播图表：

 #utils / common_model.py
from django.db import models

class BaseModel(models.Model):
    created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    updated_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
    is_delete = models.BooleanField(default=False, verbose_name='是否删除')
    is_show = models.BooleanField(default=True, verbose_name='是否上架')
    orders = models.IntegerField(verbose_name='优先级')

    class Meta:
        abstract = True  # 这样写了，这张表是个虚拟的，不会在数据库创建，只用来继承

# home/models  继承common_models.py
from utills.common_model import BaseModel

# 通过写一个BaseModel 实现，以后如果其他表中有对应字段，直接继承即可
class Banner(BaseModel):
    title = models.CharField(max_length=16, unique=True, verbose_name='名称')
    image = models.ImageField(upload_to='banner', verbose_name='图片')
    link = models.CharField(max_length=64, verbose_name='跳转链接')
    info = models.TextField(verbose_name='详情')

轮播图接口：这里运用了自定义配置common_settings，参考下列知识

# home/serializers.py
from rest_framework import serializers
from .models import Banner

class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Banner
        fields = ['id', 'title', 'image', 'link']
# home/views.py
from .models import Banner
from rest_framework.viewsets import GenericViewSet
from utills.mixins import CommonListModelMixin
from .serializers import BannerSerializer
from django.conf import settings

# 查询所有轮播图
class BannerView(GenericViewSet, CommonListModelMixin):
    # qs对象可以切片----》 limit 2
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
    serializer_class = BannerSerializer
# urls.py
from django.urls import path,include
urlpatterns = [
    path('api/v1/home/', include('home.urls')),
]

# home/urls.py
from rest_framework.routers import SimpleRouter
from .views import BannerView

router=SimpleRouter()
router.register('banner',BannerView,'banner')

urlpatterns = [
]

urlpatterns += router.urls

自定义配置

1、以后咱们会有自定义的配置 common_settings.py

# settings/common_settings
# 自定义配置
BANNER_COUNT=3

# 还有自己其他的配置，都写在这里

2、将自定义配置引入总 settings/dev.py 中

# 导入common_settings.py
from .common_settings import *

3、只需要在配置文件中导入：from .common_settings import *

前后端打通

1、

2、

3、

跨域问题详解

1、

2、

3、

今日思维导图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/342436.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

分布式日志

分布式日志

1 日志管理 1.1 日志管理方案 服务器数量较少时 直接登录到目标服务器捞日志查看 → 通过 rsyslog 或shell/python 等脚本实现日志搜集并集中保存到统一的日志服务器 服务器数量较多时 ELK 大型的日志系统&#xff0c;实现日志收集、日志存储、日志检索和分析 容器环境 …
阅读更多...
Redis学习——入门篇①

Redis学习——入门篇①

Redis学习——入门篇① 1、2&#xff1a;Redis入门概述3&#xff1a;Redis安装配置10 安装Redis-cli命令 4&#xff1a;Redis——十大数据类型11 redis数据类型12 命令查阅13 key常用命令介绍14 类型大小写和帮助命令15 String 命令&#xff08;上&#xff09;16 String 命令&a…
阅读更多...
peer eslint-plugin-vue@“^7.0.0“ from @vue/eslint-config-standard@6.1.0

peer eslint-plugin-vue@“^7.0.0“ from @vue/eslint-config-standard@6.1.0

问题&#xff1a; 用vue/cli脚手架安装项目时&#xff0c;选择ESlint&#xff0c;再安装依赖包的时候&#xff0c;会报以下错误&#xff0c; 原因&#xff1a; npmV7 之前的版本遇到依赖冲突时&#xff0c;会忽视冲突&#xff0c;继续安装&#xff1b; npmV7版本开始不再自动忽…
阅读更多...
安裝火狐和穀歌流覽器插件FoxyProxy管理海外動態IP代理

安裝火狐和穀歌流覽器插件FoxyProxy管理海外動態IP代理

代理生態系統擁有大量有用的實用程式&#xff0c;使海外代理IP代理設置的使用變得簡單起來。其中一種類型叫做代理管理工具&#xff0c;像FoxyProxy就是該工具集比較受歡迎的。 本文將全面解析FoxyProxy擴展的功能和特性、Foxyproxy怎麼下載、以及如何在穀歌流覽器和火狐流覽器…
阅读更多...
9款最新文生图模型汇总！含华为、谷歌、Stability AI等大厂创新模型（附论文和代码）

9款最新文生图模型汇总！含华为、谷歌、Stability AI等大厂创新模型（附论文和代码）

2023年真是文生图大放异彩的一年&#xff0c;给数字艺术界和创意圈注入了新鲜血液。从起初的基础图像创作跃进到现在的超逼真效果&#xff0c;这些先进的模型彻底变革了我们制作和享受数字作品的途径。 最近&#xff0c;一些大公司比如华为、谷歌、还有Stability AI等人工智能巨…
阅读更多...
信用评价研究MATLAB仿真代码

信用评价研究MATLAB仿真代码

信用评价是各种店铺卖家分析买家信用行为的重要内容, 本文给出随机仿真代码模拟实际交易过程的信用评价. 主要研究内容有: (1)研究最大交易额和信用度的关系 (2)研究买家不评价率对信用度影响 (3)研究交易次数对信用度影响 MATLAB程序如下: 主程序main.m %% clc;close a…
阅读更多...
宝塔FTP文件传输服务结合cpolar内网穿透实现远程连接本地服务

宝塔FTP文件传输服务结合cpolar内网穿透实现远程连接本地服务

⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 文章目录 ⛳️ 推荐1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固…
阅读更多...
NVMe TCG安全数据存储简介

NVMe TCG安全数据存储简介

NVMe&#xff08;非易失性内存主机控制器接口规范&#xff09;与TCG&#xff08;可信计算组&#xff09;的集成主要体现在数据安全、固件验证和硬件信任根等方面&#xff0c;以确保存储设备的数据保护能力和安全性。 TCG Opal定义了一套针对自加密硬盘&#xff08;SED, Self-En…
阅读更多...
人工智能原理实验4（2）——贝叶斯、决策求解汽车评估数据集

人工智能原理实验4（2）——贝叶斯、决策求解汽车评估数据集

&#x1f9e1;&#x1f9e1;实验内容&#x1f9e1;&#x1f9e1; 汽车数据集 车子具有 buying,maint,doors,persons,lug_boot and safety六种属性&#xff0c;而车子的好坏分为uncc,ucc,good and vgood四种。 &#x1f9e1;&#x1f9e1;贝叶斯求解&#x1f9e1;&#x1f9e1;…
阅读更多...
gmpy2与一些python库在vscode下没有自动补全的一种缓解方案

gmpy2与一些python库在vscode下没有自动补全的一种缓解方案

经过一定的研究&#xff0c;该问题的原因初步判断是gmpy2这个库天生没有把补全的函数doc说明附在pip包中。且因gmpy2是由C编译而来&#xff0c;以dll或so的形式作为动态链接库给python调用&#xff0c;这意味着无法从源码薅到可用的源码注释。 接下来先讲解决方案&#xff0c;再…
阅读更多...
vue3路由报错解决方法

vue3路由报错解决方法

报错&#xff1a; 解决办法&#xff1a; createWebHashHistory是否为 createWebHashHistory()方法 //指定路由模式为哈希模式 修改&#xff1a;改为方法就行了
阅读更多...
春节声量高涨213%！如何撬动过年市场？小红书数据洞察入场玩家

春节声量高涨213%！如何撬动过年市场？小红书数据洞察入场玩家

春节将临&#xff0c;网上讨论声量渐起。近来关于新年的讨论层出不穷&#xff0c;春运、春晚、放假回家的大学生“德华”……人们开始为新春做准备。前两天&#xff0c;小红书牵手春晚&#xff0c;登上热门。可以预见的是&#xff0c;今年小红书与春节话题将深度绑定&#xff0…
阅读更多...
JUC并发编程-集合不安全情况以及Callable线程创建方式

JUC并发编程-集合不安全情况以及Callable线程创建方式

6. 集合不安全 1&#xff09;List 不安全 //java.util.ConcurrentModificationException 并发修改异常&#xff01; public class ListTest {public static void main(String[] args) {List<Object> arrayList new ArrayList<>();for(int i1;i<30;i){new Thr…
阅读更多...
【书生·浦语大模型实战营06】《OpenCompass 大模型评测》学习笔记

【书生·浦语大模型实战营06】《OpenCompass 大模型评测》学习笔记

《OpenCompass 大模型评测》 文档&#xff1a;OpenCompass大模型评测教程 1、主观评测 2、提示词工程 李华每周给2个不同的朋友写一封3页的信&#xff0c;一周写两次。他一年总共写了多少页的信? 李华每周给2个不同的朋友写一封3页的信&#xff0c; 一周写两次。他一年总共…
阅读更多...
[代码随想录2]51单片机1T/12T到底怎么选？

[代码随想录2]51单片机1T/12T到底怎么选？

为什么说51单片机怎么选&#xff1f; 时至今日&#xff0c;44年来51单片机自强不息&#xff0c;怎么描述它&#xff0c;堪称控制芯片中的王者&#xff01;&#xff01;&#xff01; 假设你21岁大学毕业进入社会&#xff0c;交社保交到今天恭喜你成功退休了214465 传统即标准5…
阅读更多...
【docker】安装 CentOS

【docker】安装 CentOS

查看可用的 CentOS版本 docker search centOS拉取 CentOS最新镜像 docker pull centos:latest 查看本地镜像 docker images运行容器 docker run -itd --name centos-demo centos查看进程 docker ps进入centos容器 docker exec -it centos-demo /bin/bash停止容器 docker …
阅读更多...
w23靶场安装

w23靶场安装

一、实验环境 服务器&#xff1a;phpstudyv8.1.13 靶场&#xff1a;Bees二、实验目的 提供一个靶场环境 三、实验步骤 bees靶场安装 1.启动小皮的apache和mysql 2.在小皮V8.1.1.3版本上创建bees网站&#xff0c;选择的php版本最好在5.x&#xff0c;不然会有php解析错误。…
阅读更多...
ubuntu 安装protobuf

ubuntu 安装protobuf

apt 安装 sudo apt install protobuf-compiler 编译安装 – 方式1 资料链接&#xff1a;ubuntu环境 安装ncnn_ubuntu ncnn_jbyyy、的博客-CSDN博客 git clone https://github.com/google/protobuf.git cd protobuf git submodule update --init --recursive ./autogen.sh …
阅读更多...
性能优化-OpenCL kernel 开发

性能优化-OpenCL kernel 开发

「发表于知乎专栏《移动端算法优化》」 本文主要介绍OpenCL的 Kernel&#xff0c;包括代码的实例以及使用注意的详解。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09;开发基础教…
阅读更多...
Leetcode刷题笔记题解（C++）：670. 最大交换

Leetcode刷题笔记题解（C++）：670. 最大交换

思路&#xff1a; 假设数字 9923676 从右边找最大的数字的下标maxindex&#xff0c;然后向左边寻找小于最大数字的数的下标&#xff0c;直到找到最左边&#xff0c;交换两者得出新的数字&#xff0c;比如从左到右递减的数字如9621则不需要变化&#xff0c;在寻找中记录这种数…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站