两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 Day2

news2024/9/23 17:11:06

前端框架必会的(ajax+node.js+webpack+git)个人学习心得作业及bug记录 Day2

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客

这是我的 github https://github.com/Qiuner ⭐️

​ gitee https://gitee.com/Qiuner 🌹

如果本篇文章帮到了你 不妨点个吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎

  • 官方笔记、资源在 https://pan.baidu.com/s/1Gd-ANtinWR7kh8TPTto10A&pwd=9987
  • 官方接口文档在 欢迎使用 - B站-AJAX和黑马头条-数据管理平台 (apifox.com)
  • 在这篇文档中,我总结了一些axios的使用方法
  • 官方视频做的很详细,所以没啥值得补充的

Bootstap弹窗

使用属性的方式来控制

在这里插入图片描述

在这里插入图片描述

  • 这里讲了很基础的使用属性来控制Bootsrap弹窗来进行显示隐藏,这个Bootstrap就是一个框架,很简单,多看两遍视频就懂了

使用JS来进行控制

在这里插入图片描述

图书案例

在这里插入图片描述

  • 这里有一个需要注意的点,那就是

在这里插入图片描述

  • get使用params来传递数据,而post才使用data来传递数据

在这里插入图片描述

  • 找到列表数据,进行一一填值便可

在这里插入图片描述

  • 这里的index是由map传递过来的
  • 里面的增删改查我就不写了,看着视频就能学会,也没什么值得注意的地方。我说说别的一些东西

axios中不同的类型的请求附带数据使用的关键字

请求类型关键字示例
GETparamsaxios({ method: 'get', url: 'example.com', params: { key: value } })
POSTdataaxios({ method: 'post', url: 'example.com', data: { key: value } })
PUTdataaxios({ method: 'put', url: 'example.com', data: { key: value } })
PATCHdataaxios({ method: 'patch', url: 'example.com', data: { key: value } })
DELETEdataaxios({ method: 'delete', url: 'example.com', data: { key: value } })

单引号 (') 和双引号 (") 与反引号 (``)(模板字符串)

在这里插入图片描述

  • 一段相同的代码,但上面亮,下面不亮。乍一看好像没啥问题,但细心的小伙伴能发现一个是’’ 一个是``
  • 使用单引号和双引号中的东西叫做字符串
  • 似乎用反引号的叫做模板字符串

区别

特性单引号 (') 或 双引号 (")反引号 (```)
多行字符串不支持,需要使用转义字符 \n支持,可以自然换行
插值不支持支持 ${} 语法嵌入表达式
转义字符需要转义与外部引号相同的字符不需要对 ${} 进行转义
保留空格和换行符
使用场景普通字符串定义,单行字符串多行字符串,字符串插值,保持字符串格式

案例总结

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

修改
在这里插入图片描述

图片上传

在这里插入图片描述

在这里插入图片描述

网站更换背景图案例

开始前,你要知道的

在这里插入图片描述

  • 这里代码使用了label,当for与id相同时,点击这个label就等于点击input了。而这个input被用来上传文件
  • 但实际定位还是要定位到input上的
  • 将上传后的图片直接放到Body中即可

个人信息设置案例

  • 这个案例不错,黑马程序员课程设计的确实厉害,到这里其实已经可以自己独立写出来了。我推荐你自己写,不看视频

在这里插入图片描述

  • 关于性别要怎么从服务器中的数据产生映射,单选框是使用数组下标形式选中,具体可以去网络上看看。

在这里插入图片描述

  • 这里使用迭代器进行对key的挨个回显,可以用s其他方法,只要能做到在回显前先校验数据存不存在就好

提示框

在这里插入图片描述

  • 也很简单,视频做的很好,多看两遍视频吧

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

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

相关文章

LDR6282-显示器:从技术革新到视觉盛宴

显示器,作为我们日常工作和娱乐生活中不可或缺的一部分,承载着将虚拟世界呈现为现实图像的重要使命。它不仅是我们与电子设备交互的桥梁,更是我们感知信息、享受视觉盛宴的重要窗口。显示器在各个领域的应用也越来越广泛。在办公领域&#xf…

物料主数据BAPI 无法写入扩展(增强)字段问题

在使用BAPI_MATERIAL_SAVEDATA 去创建物料时,因为有增强字段。这时候需要通过extensionin 字段 进行赋值。 https://community.sap.com/t5/application-development-discussions/bapi-material-savedata-extensionin-dec-type-dump/m-p/11760099 但是赋值后仍然没…

不用SMTP实现联系表单提交后发信到指定邮箱

不使用SMTP,如何确保联系表单能安全发送至指定邮箱? 尽管SMTP是实现电子邮件发送的常用方法,但有时我们可能希望绕过SMTP,直接通过其他方式发送邮件到指定邮箱。AokSend将探讨如何在不用SMTP的情况下,实现联系表单提交…

基于mmap的读写工具封装案例

文章目录 注意事项C封装示例添加构造函数重载以支持追加模式支持文件大小动态变化异常安全性和资源泄漏预防提供更高级的数据访问接口示例代码改进 在很多高性能应用中,直接使用内存映射文件(mmap)进行文件的读写操作可以显著提高效率&#x…

【C++】stack和queue的模拟实现 双端队列deque的介绍

🔥个人主页: Forcible Bug Maker 🔥专栏: STL || C 目录 🌈前言🔥stack的模拟实现🔥queue的模拟实现🔥deque(双端队列)deque的缺陷 🌈为什么选择…

从无计划到项目管理高手,只需避开这两大误区!

在项目管理的过程中,制定计划是不可或缺的一环。然而,在实践中,我们往往会遇到两种常见的误区,这些误区不仅阻碍了计划的有效实施,还可能让我们在追求目标的道路上迷失方向。 误区一:认为没有什么可计划的…

充电桩开源平台,开发流程有图有工具

慧哥充电桩开源平台产品研发流程是确保产品从概念阶段到市场推广阶段的有序进行的关键。以下是对您给出的步骤的详细解释和建议: 设计业务流程: 在这一步,团队需要确定产品的核心功能、目标用户以及如何满足用户需求。进行市场调研,了解竞争…

无线网卡怎么连接台式电脑?让上网更便捷!

随着无线网络的普及,越来越多的台式电脑用户希望通过无线网卡连接到互联网。无线网卡为台式电脑提供了无线连接的便利性,避免了有线网络的束缚。本文将详细介绍无线网卡怎么连接台式电脑的四种方法,包括使用USB无线网卡、内置无线网卡以及使用…

探索企业信用巅峰:3A企业认证的魅力与价值

在现代商业环境中,企业的信用和信誉是其发展的核心要素之一。3A企业认证作为信用评级的最高等级,正在吸引越来越多企业的关注。究竟什么是3A企业认证?它为什么对企业如此重要?本文将深入探讨3A企业认证的独特魅力和巨大价值。 3A企…

使用vue3-treeselect问题

1.当vue3-treeselect是单选时,使用watch监听绑定value,无法监听到值清空 对照后将:value改为v-model,如图 2.使用vue3-treeselect全部清空按钮如何置空select的值,使用watch监听 多选:pageInfo.officeName(val) {// …

mybatis中的标签

在MyBatis中&#xff0c;除了基本的SQL映射功能外&#xff0c;还有许多用于动态SQL构建的标签。这些标签允许我们根据不同的条件和需求构建复杂的SQL语句。主要的动态SQL标签包括<if>, <choose>, <when>, <otherwise>, <trim>, <set>, <…

加密与安全_ 解读非对称密钥解决密钥配送问题的四个方案

文章目录 Pre对称密钥的死穴 - 经典的密钥配送问题什么是非对称密钥非对称密钥解决密钥配送问题的四个方案共享密钥密钥分配中心&#xff08;KDC&#xff09;Diffie-Hellman 密钥交换体系公钥密码体系RSA算法 Pre 对称密钥的死穴 - 经典的密钥配送问题 假设 Alice 和 Bob 两个人…

什么是海外仓管理自动化?策略及落地实施步骤指南

作为海外仓的管理者&#xff0c;你每天都面临提高海外仓运营效率、降低成本和满足客户需求的问题。海外仓自动化管理技术为这些问题提供了不错的解决思路&#xff0c;不过和任何新技术一样&#xff0c;从策略到落地实施&#xff0c;都有一个对基础逻辑的认识过程。 今天我们整…

安装 node.js 完整教程

安装 官方下载地址: https://nodejs.org/en/ 下载LTS版本&#xff08;长期稳定版本&#xff09; 安装可以更改安装路径 其余的都是选择 下一步, 安装 安装完成查看 node -v 查看node的版本 npm -v 查看npm的版本(新版的node安装自带安装npm) 配置环境变量 在nodejs文件夹…

关于SQL NOT IN判断失效的情况记录

1.准备测试数据 CREATE TABLE tmp_1 (val integer);CREATE TABLE tmp_2 (val integer, val2 integer);INSERT INTO tmp_1 (val) VALUES (1); INSERT INTO tmp_1 (val) VALUES (2); INSERT INTO tmp_2 (val) VALUES (1); INSERT INTO tmp_2 (val, val2) VALUES (NULL,0);2.测…

基于Address Sanitizer实现Android NDK的内存错误检测DEMO

1.简介 基于Address Sanitizer实现Android NDK的内存错误检测Demo。 ps:适用于Android 13&#xff08;API 级别 33&#xff09;以下的设备&#xff0c;Android 14&#xff08;API 级别 34&#xff09;或更高版本的 ARM64设备推荐使用HWAddress Sanitizer配置更简单。 GitHub源…

算法题:用JS实现删除链表的倒数第N个节点

学习目标&#xff1a; 删除链表的倒数第N个节点 leetcode原题链接 学习内容&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点 示例 1: 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5] 示例 2: 输入&a…

Python酷库之旅-第三方库Pandas(010)

目录 一、用法精讲 22、pandas.read_hdf函数 22-1、语法 22-2、参数 22-3、功能 22-4、返回值 22-5、说明 22-6、用法 22-6-1、数据准备 22-6-2、代码示例 22-6-3、结果输出 23、pandas.HDFStore.put方法 23-1、语法 23-2、参数 23-3、功能 23-4、返回值 23-5…

【APK】Unity出android包,报错 Gradle build failed.See the Console for details

参考大佬的博客&#xff1a;报错&#xff1a;Gradle build failed.See the Console for details.&#xff08;已解决&#xff09;_starting a gradle daemon, 1 incompatible daemon co-CSDN博客 本地出Android包&#xff0c;Build失败 解决办法&#xff1a; 1.下载一个低版本…

防爆手机终端安全管理平台

防爆手机终端安全管理平台能够满足国家能源、化工企业对安全生产信息化运行需求&#xff0c;能够快速搭建起高效、快捷的移动终端管理平台&#xff0c;提高企业安全生产管理水平&#xff0c;保证企业的安全运行和可持续发展。#防爆手机 #终端安全 #移动安全 能源、化工等生产单…