当前位置：首页 > news >正文

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

news 2025/12/16 21:06:29

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

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

1 图书后端

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

3 图片显示

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

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 图书后端之序列化类

from rest_framework.serializers import ModelSerializerfrom .models import Bookclass BookSerializer(ModelSerializer):class Meta:model = Bookfields = '__all__'

1.3 图书后端之视图类

from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from rest_framework.filters import OrderingFilterfrom .models import Book
from .serializer import BookSerializerclass BookView(GenericViewSet, ListModelMixin):queryset = Book.objects.all()serializer_class = BookSerializerfilter_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.4 图书后端之路由

from django.contrib import admin
from django.urls import pathfrom rest_framework.routers import DefaultRouterfrom app01.views import BookViewrouter = DefaultRouter()
router.register('books', BookView, 'books')urlpatterns = [path('admin/', admin.site.urls),
]urlpatterns += router.urls

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>

3 图片显示

3.1 图片显示之settings.py文件

1.在后端项目中建media文件夹在media文件夹建img文件夹，然后将图片放入img2.在配置文件中加入：
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

3.2 图片显示之视图类

from rest_framework.viewsets import GenericViewSet
from rest_framework.viewsets import ViewSet
from rest_framework.response import Responseclass 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': '*'})

3.3 图片显示之路由

from django.contrib import admin
from django.urls import pathfrom rest_framework.routers import DefaultRouterfrom django.views.static import serve
from django.conf import settingsfrom app01.views import ImageViewrouter = DefaultRouter()
router.register('img', ImageView, 'img')urlpatterns = [path('admin/', admin.site.urls),# 开启media访问path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
]urlpatterns += router.urls

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: `<div><h1>这是远程请求的一张图片</h1><img :src="url" alt="" height="300"><br><button @click="handleSend">点我把url地址传到父组件</button></div>`,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 图书后端 1.1 图书后端之建表 1.2 图书后端之序列化类 1.3 图书后端之视图类 1.4 图书后端之…...

编程日记 2023/9/26 19:31:37

Text-to-SQL小白入门（七）PanGu-Coder2论文——RRTF

论文概述学习这个RRTF之前，可以先学习一下RLHF。顺带一提：eosphoros-ai组织「DB-GPT开发者」最新有个新项目Awesome-Text2SQL：GitHub - eosphoros-ai/Awesome-Text2SQL: Curated tutorials and resources for Large Language Models, Text2…...

编程日记 2023/9/26 19:30:35

C语言中常见的面试题

解释C语言中的基本数据类型，并举例说明它们的用法和限制。描述C语言中的变量和常量的定义方法，以及它们的作用和区别。解释C语言中的数组和字符串，并说明它们的定义方法和使用注意事项。描述C语言中的循环结构和控制语句，并举例说明它们的用法和限制。解释C语言中的函数和函…...

编程日记 2023/9/26 19:29:34

协议-SSL协议-基础概念01-SSL位置-协议套件-握手和加密过程-对比ipsec

SSL的位置-思维导图参考来源： 华为培训ppt:HCSCE122_SSL VPN技术 ##SSL的位置 SSL协议套件握手阶段，完成验证，协商出密码套件，进而生成对称密钥，用于后续的加密通信。加密通信阶段，数据由对…...

编程日记 2023/9/26 19:28:33

M1/M2芯片Parallels Desktop 19安装使用教程（超详细）

引言在Window上VMware最强，在Mac上毫无疑问Parallels Desktop为最强！ 今天带来的是最新版Parallels Desktop 19的安装使用教程。 1. 下载安装包 Parallels Desktop 19安装包：https://www.aliyundrive.com/s/ThB8Fs6D3AD Parallels Deskto…...

编程日记 2023/9/26 19:27:31

外包干了3个月，技术退步明显。。。。。

先说一下自己的情况，大专生，17年通过校招进入广州某软件公司，干了接近4年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...

编程日记 2023/9/26 19:26:30

顺风车软件搭建流程：数字化出行与社会共享的创新

随着移动互联网的快速发展，顺风车软件作为一种新型出行方式逐渐流行起来。本文将介绍顺风车软件搭建的流程，包括需求分析、技术架构设计、用户体验优化以及安全性保障。通过深入思考数字化出行与社会共享的关系，为读者呈现一个专业、有逻辑性…...

编程日记 2023/9/26 19:24:27

2023-09-26 LeetCode每日一题（递枕头）

2023-09-26每日一题一、题目编号 2582. 递枕头二、题目链接点击跳转到题目位置三、题目描述 n 个人站成一排，按从 1 到 n 编号。最初，排在队首的第一个人拿着一个枕头。每秒钟，拿着枕头的人会将枕头传递给队伍中的下一个人。一旦枕…...

编程日记 2023/9/26 19:22:25

excell导入十万数据慢该如何解决

1.遇到的问题项目中遇到导入6w条数据，之前用的poi，感觉很慢，这时查询了下阿里巴巴提供了开源的easyExcell很好用。 EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 2.读写速度 64M内存20秒读取75M(46W行25列)的Excel&#x…...

编程日记 2023/9/26 19:21:24

Python异步编程常见问题与解决

Python异步编程常见问题与解决在当今的互联网应用中，异步编程成为了一种非常重要的技术。在Python中，我们可以利用异步编程来提高应用的性能和响应能力。然而，异步编程也会带来一些常见的问题。本文将向你分享一些在Python中处理异步编程的…...

编程日记 2023/9/26 19:20:23

77. 组合

给定两个整数 n 和 k，返回范围 [1, n] 中所有可能的 k 个数的组合。你可以按任何顺序返回答案。示例 1： 输入：n 4, k 2 输出： [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2： 输入：n 1, k 1 输出…...

编程日记 2023/9/26 19:18:20

vue项目开发环境工具-node

最近在开始接触做vue框架的前端项目，以前用的前端比如html，js，css等都是比较原生的，写好后直接浏览器打开就行。但vue跟java一样是需要编译的，和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下 nod…...

编程日记 2023/9/26 19:17:19

Python | 为FastAPI后端服务添加API Key认证（分别基于路径传参和header两种方式且swagger文档友好支持）

文章目录 01 前言02 路径传参方式添加API Key2.1 完整代码2.2 请求示例2.3 swagger文档测试 03 请求头Header方式传入API Key（推荐）3.1 完整代码3.2 请求示例3.3 swagger文档测试 01 前言 FastAPI，如其名所示，是一个极为高效的框…...

编程日记 2023/9/26 19:16:17

nodeJsjwt实现小程序tonken鉴权自我记录 config\config.js // 配置文件 module.exports {DBHOST: 127.0.0.1,DBPORT: 27017,DBNAME: test,secret: xxxxx,// 小程序的appSecretAppID: xxxxx,// 小程序的appId }token中间件 middlewares\checkTokenMiddleware.js //导入 jwt…...

编程日记 2023/9/26 19:13:12

更新andriod studio版本，项目编译报could not find org.junit.jupiter:junit-jupiter

原本使用Android Studio 版本是4.1.1，现更新为点击build -》 build bundle -》build apk，项目报 Could not determine the dependencies of task :app:compileDebugUnitTestJavaWithJavac. > Could not resolve all task dependencies for configur…...

编程日记 2023/9/26 19:12:10

【慕伏白教程】 Linux 深度学习服务器配置指北

文章目录镜像烧录系统安装系统配置常用包安装镜像烧录下载 Ubuntu 镜像 Ubuntu 桌面版下载烧录工具 balenaEtcher 准备至少 8G 的空白U盘开始烧录系统安装开机进入BIOS，修改U盘为第一启动选择 Try or Install Ubuntu 往下拉，选择中文&a…...

编程日记 2023/9/26 19:11:09

学习windows系统让python脚本在后台运行的方法

学习windows系统让python脚本在后台运行的方法 windows 后台运行并输出日志文件windows 前台运行并输出日志文件 windows 后台运行并输出日志文件命令： python qipa250.py >> qipa250_logs.log 2>&1 &窗口关闭后程序也就关闭了 windows 前台运…...

编程日记 2023/9/26 19:10:08

华为OD机试 - 第k个排列 - 全排列递归（Java 2023 B卷 100分）

目录专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明华为OD机试 2023B卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试（JAVA）真题（A卷B卷&#…...

编程日记 2023/9/26 19:09:06

流媒体播放器EasyPlayer.js无法播放H.265的情况是什么原因？该如何解决？

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器，可支持多种流媒体协议播放，可支持H.264与H.265编码格式，性能稳定、播放流畅，能支持WebSocket-FLV、HTTP-FLV，HLS（m3u8&#…...

编程日记 2023/9/26 19:07:04

负载均衡器监控

什么是负载均衡器负载均衡建立在现有网络结构之上，它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。其意思就是分摊到多个操作单元上进行执行，例如Web服务器、FTP服务器、企…...

编程日记 2023/9/26 19:06:03

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/12/14 17:38:17

Linux 文件类型，目录与路径，文件与目录管理

文件类型后面的字符表示文件类型标志普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。目录文件：d（directory） 用来存放其他文件或子目录。设备…...

编程新知 2025/12/10 9:03:48

Java 8 Stream API 入门到实践详解

一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/12/15 22:07:34

网络编程（UDP编程）

思维导图 UDP基础编程（单播） 1.流程图服务器：短信的接收方创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/12/9 18:16:09