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

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

news 2025/9/13 16:00:00

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

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

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

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>

相关文章：

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

前后端分离之图书价格排序案例&#xff0c;之后端返回图片地址显示在组件上 注意&#xff1a;分别建前后端项目&#xff0c;前端项目只写前端代码&#xff0c;后端项目只写后端代码1 图书后端 1.1 图书后端之建表 1.2 图书后端之序列化类 1.3 图书后端之视图类 1.4 图书后端之…...

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

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

论文概述 学习这个RRTF之前&#xff0c;可以先学习一下RLHF。 顺带一提&#xff1a;eosphoros-ai组织「DB-GPT开发者」最新有个新项目Awesome-Text2SQL&#xff1a;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的位置-思维导图 参考来源&#xff1a; 华为培训ppt:HCSCE122_SSL VPN技术 ##SSL的位置 SSL协议套件 ​​​​握手阶段&#xff0c;完成验证&#xff0c;协商出密码套件&#xff0c;进而生成对称密钥&#xff0c;用于后续的加密通信。 加密通信阶段&#xff0c;数据由对…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

77. 组合

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

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

vue项目开发环境工具-node

最近在开始接触做vue框架的前端项目&#xff0c;以前用的前端比如html&#xff0c;js&#xff0c;css等都是比较原生的&#xff0c;写好后直接浏览器打开就行。但vue跟java一样是需要编译的&#xff0c;和微信小程序类似。今天就先记录一下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&#xff08;推荐&#xff09;3.1 完整代码3.2 请求示例3.3 swagger文档测试 01 前言 FastAPI&#xff0c;如其名所示&#xff0c;是一个极为高效的框…...

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

nodeJs+jwt实现小程序tonken鉴权

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&#xff0c;现更新为 点击build -》 build bundle -》build apk&#xff0c;项目报 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&#xff0c;修改U盘为第一启动 选择 Try or Install Ubuntu 往下拉&#xff0c;选择 中文&a…...

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

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

学习windows系统让python脚本在后台运行的方法 windows 后台运行并输出日志文件windows 前台运行并输出日志文件 windows 后台运行并输出日志文件 命令&#xff1a; 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卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…...

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

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

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

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

负载均衡器监控

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

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

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/7/14 21:22:23

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/9 10:12:05

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/7/31 23:29:01

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/9/10 1:53:18

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/9/9 10:10:46

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/9/2 17:49:26

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/9/2 16:55:16

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/8/12 15:57:53

Python学习(8) ----- Python的类与对象

Python 中的类&#xff08;Class&#xff09;与对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心。我们可以通过“类是模板&#xff0c;对象是实例”来理解它们的关系。 &#x1f9f1; 一句话理解&#xff1a; 类就像“图纸”&#xff0c;对…...

编程新知 2025/7/9 20:41:09