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

news2024/11/16 21:39:14

严正声明!
重要的事情说一遍,本文章仅供分享,文章和代码都是开源的,严禁以此牟利,严禁侵犯尚硅谷原作视频的任何权益,我知道学习编程的人各种各样的心思都有,但这不是你对开源社区侵权的理由!
第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.coloradmin.cn/o/339719.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

iptables防火墙之SNAT与DNAT

目录 1、SNAT策略概述 1.SNAT策略的典型应用环境 2.SNAT策略的原理 3.SNAT工作原理 4.SNAT转换前提条件 5.开启SNAT命令 6.SNAT转换 2.SNAT示例 1. 配置网关服务器 2.Xshell 连接192.168.100.100 3.DNAT策略及应用 1. DNAT策略概述 2.DNAT 策略的应用 3.DNAT转换前提条件…

看完这篇 教你玩转渗透测试靶机vulnhub——Hack Me Please: 1

Vulnhub靶机Hack Me Please: 1渗透测试详解Vulnhub靶机介绍:Vulnhub靶机下载:Vulnhub靶机安装:Vulnhub靶机漏洞详解:①:信息收集:②:漏洞利用③:获取反弹shell:④&#x…

how https works?https工作原理

简单一句话: https http TLShttps 工作原理:HTTPS (Hypertext Transfer Protocol Secure)是一种带有安全性的通信协议,用于在互联网上传输信息。它通过使用加密来保护数据的隐私和完整性。下面是 HTTPS 的工作原理:初始化安全会…

Camtasia2023最新版电脑视频录屏记录编辑软件

在Mac或Wind上有各种可用的视频记录和编辑软件,其中Camtasia被称为视频记录器和视频编辑器。录屏软件Camtasia2023到底有什么特色功能?本文将帮助您选择理想的选择来开始视频捕获,创建和编辑。Camtasia2023是Mac/win平台上一款使用非常简单的…

【JavaScript】题(牛客网)——熟练使用函数调用,超详细讲解

1 熟练使用函数调用 1.1 题目 执行以下程序,输出结果为 var uname "window"; var object {uname: "object",fun: function () {console.log(this.uname);return function () {console.log(this.uname);};}, };object.fun()();1.2 答案 ob…

ThingsBoard-设备配置

1、概述 从 ThingsBoard 3.2 开始,租户管理员可以使用设备配置文件为多个设备配置通用设置。每个设备在单个时间点都有一个且唯一的配置文件。 有经验的 ThingsBoard 用户会注意到设备类型已被弃用,取而代之的是设备配置文件。更新脚本将根据唯一的设备类型自动创建设备配置…

三、Java面向对象

1 . 方法 方法(method)是程序中最小的执行单元方法就是一些代码的打包 需要的时候可以直接调用方法之间是平级的关系 不能在方法里面定义方法方法不调用就不执行 方法的定义 // 方法的定义 /* [修饰符] 返回值类型 方法名称([参数 1],[参数 2]){语句A;return 返回值; } *///…

VT虚拟化框架编写

文章目录前言VT架构基础VT框架编写步骤一:检测VT是否开启VMM和VMVMON和VMCSVT框架编写步骤二 填充VMONVT框架编写步骤三 进入VTVT框架编写步骤四 初始化VMCSVT框架编写步骤五 初始化VMCS数据区VT框架编写步骤六 处理必要事件前言 学习VT相关的知识,需要…

C++11新特性

文章目录说在前面花括号{}初始化new的列表初始化STL相关容器的列表初始化相关语法格式容器列表初始化的底层原理forward_list和array与类型相关的新特性decltype左值引用和右值引用什么是左值,什么是右值左值和右值的本质区别右值引用如何理解右值引用std::move移动…

【软考系统架构设计师】2022下综合知识历年真题

【软考系统架构设计师】2022下综合知识历年真题 【2022下架构真题第01题:绿色】 01.云计算服务体系结构如下图所示,图中①、②、③分别与SaaS、PaaS、Iaas相对应,图中①、②、③应为( ) A.应用层、基础设施层、平台层 B.应用层、平台层、基础…

Linux驱动开发(一)

linux驱动学习记录 一、背景 在开始学习我的linux驱动之旅之前,先提一下题外话,我是一个c语言应用层开发工作人员,在工作当中往往会和硬件直接进行数据的交互,往往遇到数据不通的情况,常常难以定位,而恰巧…

静态分析工具Cppcheck在Windows上的使用

之前在https://blog.csdn.net/fengbingchun/article/details/8887843 介绍过Cppcheck,那时还是1.x版本,现在已到2.x版本,这里再总结下。 Cppcheck是一个用于C/C代码的静态分析工具,源码地址为https://github.com/danmar/cppcheck …

Python之字符串精讲(上)

前言 字符串是所有编程语言在项目开发过程中涉及最多的一个内容。大部分项目的运行结果,都需要以文本的形式展示给客户,曾经有一位久经沙场的老程序员说过一句话:“开发一个项目,基本上就是在不断的处理字符串”。下面对Python中…

自命为缓存之王的Caffeine(3)

您好,我是湘王,这是我的CSDN博客,欢迎您来,欢迎您再来~缓存的存储空间是远远小于磁盘的。所以对于有些过期的数据,就需要定期进行清理,腾出存储空间。Caffeine又是怎么做的呢?Caffei…

SpringBoot+Vue在线小说系统

简介:本项目采用了基本的springbootvue设计的在线小说系统。详情请看截图。经测试,本项目正常运行。本项目适用于Java毕业设计、课程设计学习参考等用途。 特别说明:本系统设计网络爬虫,遵循爬虫规则,此项目用于学习&a…

2023关键词:挑战

未失踪人口回归… 好久不见,不经意间拖更2个多月。今天周末,外面淅淅沥沥下着小雨,这种窝在床上的时刻最适合写点东西了。 但是建议大家在办公或者写博客的时候尽量还是端正坐姿,我就是因为喜欢这样靠在床背上,长时间…

Spring Security 从入门到精通

前言 Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro,它提供了更丰富的功能,社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity 来做安全框架。小项目有Shiro的比较多,因为相比与Spr…

Vue3+ElementPlus+koa2实现本地图片的上传

一、示例图二、实现过程利用Koa2书写提交图片的后台接口这个模块是我写的项目中的其中一个板块——上传图片,这个项目的后台接口主要是是使用了后端的Koa2框架,前端小伙伴想要试着自己书写一些增删改查的接口可以从这个入手,Koa2用来了解后端…

力扣HOT100 11-15

11.盛水最多的容器 思路:最大水量 底边 * 高度。较短的一边控制最大水量,因此,采用双指针的方式,左、右指针指向开始和末尾,逐个向中间移动,判断左右指针所指向的高度哪个更低,它就向中间移动一…

ubuntu中解决Failed to connect to 127.0.0.1 port xxxxx: Connection refused

ubuntu中解决Failed to connect to 127.0.0.1 port xxxxx: Connection refused 方法一 查看一下代理 git config --global http.proxy git config --global https.proxy 有就取消,没有就换一种方法 git config --global --unset http.proxy git config --global --unse…