前后端分离-图书价格排序案例、后端返回图片地址显示在组件上(打印图片地址)
前后端分离之图书价格排序案例，之后端返回图片地址显示在组件上
'''注意：分别建前后端项目，前端项目只写前端代码，后端项目只写后端代码'''
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>相关文章：
)
前后端分离-图书价格排序案例、后端返回图片地址显示在组件上(打印图片地址)
前后端分离之图书价格排序案例，之后端返回图片地址显示在组件上 注意：分别建前后端项目，前端项目只写前端代码，后端项目只写后端代码1 图书后端 1.1 图书后端之建表 1.2 图书后端之序列化类 1.3 图书后端之视图类 1.4 图书后端之…...
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…...
C语言中常见的面试题
解释C语言中的基本数据类型，并举例说明它们的用法和限制。描述C语言中的变量和常量的定义方法，以及它们的作用和区别。解释C语言中的数组和字符串，并说明它们的定义方法和使用注意事项。描述C语言中的循环结构和控制语句，并举例说明它们的用法和限制。解释C语言中的函数和函…...
协议-SSL协议-基础概念01-SSL位置-协议套件-握手和加密过程-对比ipsec
SSL的位置-思维导图 参考来源： 华为培训ppt:HCSCE122_SSL VPN技术 ##SSL的位置 SSL协议套件 握手阶段，完成验证，协商出密码套件，进而生成对称密钥，用于后续的加密通信。 加密通信阶段，数据由对…...
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…...
外包干了3个月，技术退步明显。。。。。
先说一下自己的情况，大专生，17年通过校招进入广州某软件公司，干了接近4年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...
顺风车软件搭建流程：数字化出行与社会共享的创新
随着移动互联网的快速发展，顺风车软件作为一种新型出行方式逐渐流行起来。本文将介绍顺风车软件搭建的流程，包括需求分析、技术架构设计、用户体验优化以及安全性保障。通过深入思考数字化出行与社会共享的关系，为读者呈现一个专业、有逻辑性…...
2023-09-26 LeetCode每日一题（递枕头）
2023-09-26每日一题 一、题目编号 2582. 递枕头二、题目链接 点击跳转到题目位置 三、题目描述 n 个人站成一排，按从 1 到 n 编号。 最初，排在队首的第一个人拿着一个枕头。每秒钟，拿着枕头的人会将枕头传递给队伍中的下一个人。一旦枕…...
excell导入十万数据慢该如何解决
1.遇到的问题 项目中遇到导入6w条数据，之前用的poi，感觉很慢，这时查询了下阿里巴巴提供了开源的easyExcell很好用。 EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 2.读写速度 64M内存20秒读取75M(46W行25列)的Excel&#x…...
Python异步编程常见问题与解决
Python异步编程常见问题与解决 在当今的互联网应用中，异步编程成为了一种非常重要的技术。在Python中，我们可以利用异步编程来提高应用的性能和响应能力。然而，异步编程也会带来一些常见的问题。本文将向你分享一些在Python中处理异步编程的…...
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 输出…...
vue项目开发环境工具-node
最近在开始接触做vue框架的前端项目，以前用的前端比如html，js，css等都是比较原生的，写好后直接浏览器打开就行。但vue跟java一样是需要编译的，和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下 nod…...
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，如其名所示，是一个极为高效的框…...
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…...
更新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…...
【慕伏白教程】 Linux 深度学习服务器配置指北
文章目录 镜像烧录系统安装系统配置常用包安装 镜像烧录 下载 Ubuntu 镜像 Ubuntu 桌面版 下载烧录工具 balenaEtcher 准备至少 8G 的 空白U盘 开始烧录 系统安装 开机进入BIOS，修改U盘为第一启动 选择 Try or Install Ubuntu 往下拉，选择 中文&a…...
学习windows系统让python脚本在后台运行的方法
学习windows系统让python脚本在后台运行的方法 windows 后台运行并输出日志文件windows 前台运行并输出日志文件 windows 后台运行并输出日志文件 命令： python qipa250.py >> qipa250_logs.log 2>&1 &窗口关闭后程序也就关闭了 windows 前台运…...
华为OD机试 - 第k个排列 - 全排列递归（Java 2023 B卷 100分）
目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中，刷题点这里 专栏导读 本专栏收录于《华为OD机试（JAVA）真题（A卷B卷&#…...
流媒体播放器EasyPlayer.js无法播放H.265的情况是什么原因？该如何解决？
H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器，可支持多种流媒体协议播放，可支持H.264与H.265编码格式，性能稳定、播放流畅，能支持WebSocket-FLV、HTTP-FLV，HLS（m3u8&#…...
负载均衡器监控
什么是负载均衡器 负载均衡建立在现有网络结构之上，它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。其意思就是分摊到多个操作单元上进行执行，例如Web服务器、FTP服务器、企…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
第7篇：中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中，可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中，必须做到： 🔍 追踪每一条 SQL 的生命周期（从入口到数据库执行）&#…...