• 前后端分离-图书价格排序案例、后端返回图片地址显示在组件上(打印图片地址)

    前后端分离之图书价格排序案例，之后端返回图片地址显示在组件上

    '''注意：分别建前后端项目，前端项目只写前端代码，后端项目只写后端代码'''

    • 1

    1 图书后端
    1.1 图书后端之建表
    1.2 图书后端之序列化类
    1.3 图书后端之视图类
    1.4 图书后端之路由

    2 图书前端

    3 图片显示
    3.1 图片显示之settings.py文件
    3.2 图片显示之视图类
    3.3 图片显示之路由

    4 图片显示前端

    1 图书后端

    1.1 图书后端之建表

    from django.db import models
'''
	注意事项：请在建表后，自己在数据库插入图书
'''

class Book(models.Model):
    name = models.CharField(max_length=32)
    price = models.CharField(max_length=32)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    1.2 图书后端之序列化类

    from rest_framework.serializers import ModelSerializer

from .models import Book


class BookSerializer(ModelSerializer):
    class Meta:
        model = Book
        fields = '__all__'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    1.3 图书后端之视图类

    from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from rest_framework.filters import OrderingFilter

from .models import Book
from .serializer import BookSerializer


class BookView(GenericViewSet, ListModelMixin):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

    filter_backends = [OrderingFilter]
    ordering_fields = ['price']

    # 重写list方法解决跨域问题
    def list(self, request, *args, **kwargs):
        res = super().list(request, *args, **kwargs)
        
        res.headers['Access-Control-Allow-Origin'] = '*'
        
        return res

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    1.4 图书后端之路由

    from django.contrib import admin
from django.urls import path

from rest_framework.routers import DefaultRouter

from app01.views import BookView

router = DefaultRouter()
router.register('books', BookView, 'books')

urlpatterns = [
    path('admin/', admin.site.urls),
]

urlpatterns += router.urls

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    2 图书前端

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <button @click="handleClick">按价格排序</button>
    <ul>
        <li v-for="book in book_list">
            <h2>图书名：{{book.name}}</h2>
            <h2>图书价格：{{book.price}}</h2>
        </li>
    </ul>

</div>
</body>
</html>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            book_list: [],
            ordering: 'price'
        },
        created(){
            axios.get('http://127.0.0.1:8000/books/').then(res => {
                console.log(res.data)
                this.book_list = res.data
            });
        },
        methods: {
            handleClick(){
                if (this.ordering.indexOf('-') >= 0) {
                    this.ordering = 'price'
                } else {
                    this.ordering = '-price'
                }
            }
        },
        // 监听ordering的变化
        watch: {
            ordering() {
                // alert(this.ordering)
                axios.get('http://127.0.0.1:8000/books/?ordering=' + this.ordering).then(
                	// 箭头函数
                    res => {
                        console.log(res.data)
                        this.book_list = res.data
                    }
                );
            }
        }
    });
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    3 图片显示

    3.1 图片显示之settings.py文件

    1.在后端项目中建media文件夹
	在media文件夹建img文件夹，然后将图片放入img

2.在配置文件中加入：
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

    • 1
    • 2
    • 3
    • 4
    • 5

    3.2 图片显示之视图类

    from rest_framework.viewsets import GenericViewSet
from rest_framework.viewsets import ViewSet
from rest_framework.response import Response


class ImageView(ViewSet):
    def list(self, request):
        return Response(
            {
                'code': 100,
                'msg': '图片返回成功',
                # 'url': 'https://img2.baidu.com/it/u=4078970732,974408090&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695315600&t=6c20fbb0585dedf607deed8a6b97e85e'
                'url': 'http://127.0.0.1:8000/media/img/yt.jpg'
            },
            headers={'Access-Control-Allow-Origin': '*'}
        )

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    3.3 图片显示之路由

    from django.contrib import admin
from django.urls import path

from rest_framework.routers import DefaultRouter

from django.views.static import serve
from django.conf import settings

from app01.views import ImageView

router = DefaultRouter()
router.register('img', ImageView, 'img')

urlpatterns = [
    path('admin/', admin.site.urls),
    # 开启media访问
    path('media/', serve, {'document_root': settings.MEDIA_ROOT}),
]

urlpatterns += router.urls

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    4 图片显示前端

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <hr>
    <lin @send="handleRecive"></lin>
</div>
</body>
</html>

<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleRecive(url){
                alert(url)
            }
        },
        components: {
            lin: {
                template: `
                  
    
                  
    这是远程请求的一张图片
    
                  
                  
    
                  
                  
    `    ,
                data() {
                    return {
                        url: ''
                    }
                },
                created(){
                    axios.get('http://127.0.0.1:8000/img/').then(
                        res => {
                            this.url = res.data.url
                        }
                    );
                },
                methods: {
                    handleSend(){
                        this.$emit('send', this.url)
                    }
                }
            }
        }

    });
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
  • 相关阅读:
    一篇文章快速教你如何搭建数据驱动自动化测试框架？
    【数据结构算法笔记】----贪心算法（简单贪心：月饼问题、最优装箱问题、整数配对、最大组合整数。区间贪心：区间不相交问题、区间选点问题）
    批量下载Landsat遥感影像的方法
    《富爸爸，穷爸爸》思维导图和学习笔记
    高云FPGA系列教程（6）：ARM定时器使用
    windows server 2019 、win11安装docker desktop
    DirectX11 With Windows SDK--40 抗锯齿：FXAA
    前端架构师之02_Node.js安装
    Java中的TCP通信（网络编程 二）
    IDEA 快捷键记录【个人向】
  • 原文地址：https://blog.csdn.net/weixin_44145338/article/details/133066864