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

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

news 2026/5/18 11:55:23

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

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

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

【效率革命】PolyWindow插件：从多边形到精美窗户的3dMax一键生成秘籍

1. 为什么你需要PolyWindow插件？ 如果你经常用3dMax做建筑可视化或室内设计，肯定遇到过这样的烦恼：项目里需要做几十个风格各异的窗户，每个都要手动建模、分格、赋材质，光是想到这个工作量就让人头皮发麻。我去年接的一…...

编程新知 2026/5/18 11:47:55

基于MCP协议构建AI驱动的企业安全自动化平台

1. 项目概述：一个连接AI与安全工具的桥梁最近在折腾AI助手（比如Claude Desktop、Cursor）的扩展能力时，发现了一个挺有意思的项目：sanyambassi/thales-cdsp-crdp-mcp-server。乍一看这个仓库名，又是Thales&a…...

编程新知 2026/5/18 11:43:52

如何一键下载推特上的所有媒体资源？X-Spider帮你轻松解决内容收集难题

如何一键下载推特上的所有媒体资源？X-Spider帮你轻松解决内容收集难题【免费下载链接】x-spider A spider for X (Twitter) 项目地址: https://gitcode.com/gh_mirrors/xs/x-spider 你是否曾遇到过这种情况：在推特上看到了精美的图片、有趣的视频…...

编程新知 2026/5/18 11:00:52

2026年主流抓娃娃App大对比，哪个才是你的“抓宝神器”？

在当今快节奏的生活中，年轻人面临着来自学业、工作、社交等多方面的压力。为了缓解这些压力，寻找适合的解压方式成为了大家的共同需求。抓娃娃App作为一种新兴的娱乐方式，正逐渐受到年轻人的喜爱。下面我们就从潮流趋势、科技前沿、行业洞察等…...

编程新知 2026/5/17 10:26:23

SimulinkVeriStandLabVIEW协同开发——从模型编译到交互式仪表盘部署

1. 工具链协同开发的核心价值在电力电子和工业控制领域，快速原型开发往往需要跨越建模、实时测试和人机交互三个关键环节。Simulink、VeriStand和LabVIEW组成的工具链，就像汽车制造的流水线——Simulink是设计图纸的工程师，VeriStand是组装车…...

编程新知 2026/5/17 9:53:09

Java 大厂面试 200 题完整版含答案解析

前言本文整理了近两年从阿里、腾讯、字节、美团、京东、拼多多等大厂面试中高频出现的 200 道 Java 面试题，覆盖 Java 基础、集合、并发、JVM、Spring、MySQL、Redis、消息队列、分布式、场景设计等核心模块，每题都附有简明扼要的答案解析，助…...

编程新知 2026/5/18 9:55:32

如何3秒破解百度网盘提取码难题：开源工具baidupankey的技术解析与实战指南

如何3秒破解百度网盘提取码难题：开源工具baidupankey的技术解析与实战指南【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾在寻找百度网盘资源时，被一个小小的提取码卡住，不得不花费…...

编程新知 2026/5/17 7:40:09

PCL2启动器离线登录按钮消失？5分钟快速修复指南

PCL2启动器离线登录按钮消失？5分钟快速修复指南【免费下载链接】PCL Minecraft 启动器 Plain Craft Launcher（PCL）。项目地址: https://gitcode.com/gh_mirrors/pc/PCL 你是否遇到过PCL2启动器离线登录按钮突然消失的困扰&#xff1…...

编程新知 2026/5/18 11:42:49