使用vue3,vite,less,flask,python从零开始学习硅谷外卖(16-40集)

news/2024/5/20 0:50:49/文章来源:https://blog.csdn.net/returnadsss/article/details/128991843

严正声明!
重要的事情说一遍,本文章仅供分享,文章和代码都是开源的,严禁以此牟利,严禁侵犯尚硅谷原作视频的任何权益,我知道学习编程的人各种各样的心思都有,但这不是你对开源社区侵权的理由!
第16集:这一集老师啰嗦了一集,核心就两句话,一个是对axios的二次封装,还有一个是对promise结果再次封装使得其可以直接获取data,老师的代码应该是可以用的。这个写法只有get和post,不过不重要了,以后有需要在重新写,程序员就是要懒一点。
第17集:这集的封装其实也没什么必要。。。就是为了调用接口时方便一点特地把它弄成一个变量。。。不过这里还是学到东西了,param参数就是在路径里的,query参数在?后面的。这里可以看到,query参数和写在body请求体里的进行ajax请求的方式是一样的。但是不能混用这两者。
第18集:这一集就是上传代码到github,只不过这件事分三步,创建本地仓库,关联远程仓库,不过先将源码设为master,之后的每次改动都会被设置为分支,这样就可以返回任何时候的状态。Git init 在本地初始化git仓库,git add *将本地所有文件(除了.gitignore中指定的)纳入仓库中,git commit -m "init gshop"将仓库提交并命名为init gshop。
第20集:这一章其实就是简单的跨域,但是视频不完整中间跳过了一段,没关系我们直接用vite来写,当然我们可以在后端设置响应头,但我们是前端,就用vite的代理服务器来搞。
在这里插入图片描述

我们yarn dev后默认端口5174,跨域原理就是我们在浏览器端请求/api而不是http://localhost:3000,浏览器会自动拼接为http://localhost:5174/api,这是通过vite配置,在本地开启的服务器端请求http://localhost:3000, 在api后面还可以加路径,再将请求返回来,就相当于让本机的服务器中转了一下。
第21集:引入状态管理,跟之前引入vue-router差不多,稍加修改即可,这里分成state,mutations,actions,getters只是为了当内容多的时候方便管理,可以直接写在index.js里面都没问题。
在这里插入图片描述

第22集:这一集就是照例抄代码,有些高度封装(老师喜欢的写法)多看几遍,有些是解构赋值,有些是对象属性值简写。
第23集:这一集基本没什么问题,出现问题可以按代码逻辑推一下,我的问题是后台的接口写错了,获取不到数据,改一下就好了。
第24集,25集:照着写没大问题。
第26集:这一集有点坑,首先是这个图片接口已经废弃了,我直接用网上的接口来代替,按照这个接口数据,只考虑shops.json的数据的话,这个根据经纬度其实只能返回一个商家,算了我们直接改接口,返回所有商家。
第27-第31集:没啥难点,照着敲就行了.
第32,33集:简单的防抖节流,没啥好说的,${}外面不加括号也可以。
第34,35集:也是照着写就行了,有一个知识点就是自定义事件的冒泡传递。还有一个是前台只能做合法性验证,没法安全验证。第35集复习,一般在mounted异步获取数据。打开network看ajax请求的情况,这个可以看尚硅谷的ajax或者promise课程。
第36集:这一集跟老师比起来我的后台没有返回动态验证码,搜点资料改一下。把接口写好更新。
在这里插入图片描述
在这里插入图片描述

这样就可以返回图形验证码了,这里的思路是每次在image文件夹下产生一个验证码图片并返回它,然后下一次访问该路径时清空image文件夹下图片,然后再产生返回。想更完备一点连image文件夹都可以在代码里创建,不过python不是前端的重点,这里不赘述了。
第37集就改名字。
第38集:好家伙,短信验证码接口又搞起来了,抱着一丝希望node一下这个sms_util.js,果然报错。送佛送到西,我把python的短信后台接口也写一遍吧。

后面两集笔记忘了保存,问题不大,可以评论区问我,我给你发调通了的源码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_256825.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法题解】15. 设计最小栈

这是一道 中等难度 的题。 题目来自:leetcode 题目 设计一个支持 push ,pop ,top 操作,并能在 常数时间 内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void p…

驱动 | Linux | NVMe 不完全总结

本文主要参考这里 1’ 2 的解析和 linux 源码 3。 此处推荐一个可以便捷查看 linux 源码的网站 bootlin 4。 更新:2022 / 02 / 11 驱动 | Linux | NVMe 不完全总结NVMe 的前世今生从系统角度看 NVMe 驱动NVMe CommandPCI 总线从架构角度看 NVMe 驱动NVMe 驱动的文件…

详细解读503服务不可用的错误以及如何解决503服务不可用

文章目录1. 问题引言2. 什么是503服务不可用错误3 尝试解决问题3.1 重新加载页面3.2 检查该站点是否为其他人关闭3.3 重新启动设备3.3 联系网站4. 其他解决问的方法1. 问题引言 你以前遇到过错误503吗? 例如,您可能会收到消息,如503服务不可…

三种方式查看linux终端terminal是否可以访问外网ping,curl,wget

方法1:ping注意不要用ping www.google.com.hk来验证,因为有墙,墙阻止了你接受网址发回的响应数据。即使你那啥过,浏览器都可以访问Google,terminal里面也是无法得到响应 百度在墙内,所以可以正常拿到响应信…

sklearn降维算法1 - 降维思想与PCA实现

目录1、概述1.1 维度概念2、PCA与SVD2.1 降维实现2.2 重要参数n_components2.2.1 案例:高维数据的可视化2.2.2 最大似然估计自选超参数2.2.3 按信息量占比选超参数1、概述 1.1 维度概念 shape返回的结果,几维几个方括号嵌套 特征矩阵特指二维的 一般来…

truffle 创建测试合约并部署到测试网络

1、npm 安装truffle npm install -g truffle2、创建truffle项目 mkdir imooc-on-blockchain-truffle && cd imooc-on-blockchain-truffle3、初始化truffle目录,会生成如下几个目录 contracts 存放.sol合约文件migrations 部署脚本目录test 测试文件目录t…

【GlobalMapper精品教程】045:空间分析工具(2)——相交

GlobalMapper提供的空间分析(操作)的方法有:交集、并集、单并集、差异、对称差集、相交、重叠、接触、包含、等于、内部、分离等,本文主要讲述相交工具的使用。 文章目录 一、实验数据二、符号化设置三、相交运算四、结果展示五、心灵感悟一、实验数据 加载配套实验数据(…

分布式之分布式事务V2

写在前面 本文一起来看下分布式环境下的事务问题,即我们经常听到的分布式事务问题。想要解决分布式事务问题,需要使用到分布式事务相关的协议,主要有2PC即两阶段提交协议,TCC(try-confirm-cancel)&#xf…

html的表单标签(form)

目录标题1、表单标签主要有三大类:2、表单标签中常见的属性3、例子代码及结果4、注意:5、表单中特殊的属性表单标签可以用来数据交互,而前面学的六个标签只能发送不能接收。 表单标签的作用就是数据交互1、表单标签主要有三大类: …

ImageMagick任意文件读取漏洞(CVE-2022-44268)

0x00 前提 前几天爆出一个 ImageMagick 漏洞 ,可以造成一个任意文件读取的危害比较可观,最近有时间来复现学习一下 主要是影响的范围很大,很多地方都有这个问题,需要来学习一下 0x01 介绍 ImageMagick 是一个免费的开源软件套…

SpringMVC:拦截器(12)

拦截器1. 拦截器概念2. 拦截器入门案例2.1 环境准备2.2 拦截器开发步骤1: 创建拦截器类步骤2: 配置拦截器类步骤3: SpringMVC添加SpringMvcSupport包扫描和interceptor包扫描步骤4: 简化SpringMvcSupport的编写5 测试3. 拦截器参数解析(了解)3.1 前置处理…

【Call for papers】SIGCOMM-2023(CCF-A/计算机网络/2023年2月15日截稿)

ACM SIGCOMM is the flagship annual conference of the ACM Special Interest Group on Data Communication (SIGCOMM). ACM SIGCOMM 2023, the 37th edition of the conference series, will be held in New York City, US, September 10 - 14, 2023. 文章目录1.会议信息2.时…

Redis集群搭建(主从、哨兵、分片)

1.单机安装Redis 首先需要安装Redis所需要的依赖: yum install -y gcc tcl然后将课前资料提供的Redis安装包上传到虚拟机的任意目录: 例如,我放到了/tmp目录: 解压缩: tar -xzf redis-6.2.4.tar.gz解压后&#xff1…

OpenPPL PPQ量化(5):执行引擎 源码剖析

目录 PPQ Graph Executor(PPQ 执行引擎) PPQ Backend Functions(PPQ 算子库) PPQ Executor(PPQ 执行引擎) Quantize Delegate (量化代理函数) Usage (用法示例) Hook (执行钩子函数) 前面四篇博客其实就讲了下面两行代码: ppq_ir load_onnx_graph(onnx_impor…

FlinkCEP - Flink的复杂事件处理

版本说明 本文中以Flink 1.16.1 版本讲解说明 Note:Flink1.16.1版本相较于之前版本增强的within函数, 支持模式序列中相邻事件间的超时定义,以前版本只支持模式序列中第一个事件到最后一个事件之间的最大时间间隔。 快速开始 基于Kafka connecter 流…

《计算机组成与设计》01. 计算机抽象及相关技术

文章目录计算机体系结构中的 8 个伟大思想面向摩尔定律的设计使用抽象简化设计加速经常性事件通过并行提高性能通过流水线提高性能存储层次通过冗余提高可靠性性能性能的度量时钟周期数和时钟周期长度与CPU时间的公式指令性能公式经典的 CPU 性能公式CPI 计算公式程序执行时间计…

【前端】Vue项目:旅游App-(23)detail:房东介绍、热门评论、预定须知组件

文章目录目标过程与代码房东介绍landlord热门评论HotComment预定须知Book效果总代码修改或添加的文件detail.vuedetail-book.vuedetail-hotComment.vuedetail-landlord.vue参考本项目博客总结:【前端】Vue项目:旅游App-博客总结 目标 根据detail页面获…

Sa-Token实现分布式登录鉴权(Redis集成 前后端分离)

文章目录1. Sa-Token 介绍2. 登录认证2.1 登录与注销2.2 会话查询2.3 Token 查询3. 权限认证3.1 获取当前账号权限码集合3.2 权限校验3.3 角色校验4. 前后台分离(无Cookie模式)5. Sa-Token 集成 Redis6. SpringBoot 集成 Sa-Token6.1 创建项目6.2 添加依…

ChatGPT不是聊天机器人,是任何人值得重视的竞争对手。

ChatGPT使用了一种聊天界面来和用户互动,用户的理解成本降低,通过输入文字,来得到各种反馈。有预见性的创造者们,已经挖掘ChatGPT所展示出来的各种能力应该如何更好地融入我们的日常生活中。比如,生成菜谱、音乐播放列…

嵌入式开发----示波器入门

示波器入门前言一、示波器介绍关键指标工作原理二、功能按钮介绍三、一键入门四、 典型应用场景校准捕捉测试总线通讯总结前言 对于嵌入式工程师来说,示波器的使用极为重要,他就像是“电子工程师的眼睛”,把被测信号的实际波形显示在屏幕上&…