笔记day2
文章目录
- 1 NavigationDuplivated警告错误
- 2 Home模块组件拆分
- 3 三级联动组件完成
- 4 完成其余静态组件
- 5 POSTMAN测试接口
- 6 axios二次封装
- 6.1 为什么需要进行二次封装axios?
- 6.2 在项目中经常API文件夹【axios】
- 6.3 axios基础不好,可以参考git|NPM关于axios文档
- 7 接口统一管理
- 7.1 跨域问题
- 8 npprogress进度条的使用
- 9 vuex状态管理库
- 9.1 vuex是什么
- 9.2 vuex基本使用
- 9.3 vuex实现模块式开发
- 10 完成TypeNav三级联动展示数据业务
1 NavigationDuplivated警告错误
-
编程式路由跳转到当前路由(参数不变),多次执行会做出NavigationDuplivated的警告错误?
-
路由跳转有两种形式:声明式导航、编程式导航
-
声明式导航没有这类问题,因为vue-router底层就已经处理好了
-
为什么编程式导航进行路由跳转的时候,就有这种警告错误呢?
“vue-router”: “^3.5.3”,最新的vue-router引入promise -
通过给push方法传递相应的成功、失败的回调函数,可以捕获到当前错误,可以解决
-
通过底部的代码,可以实现解决错误
this.$router.push({name:"search", params:{keyword: this.keyword}, query: {k: this.keyword.toUpperCase()} }, ()=>{}, ()=>{});
这种方法:治标不治本,将来在别的组件当中push|replace,编程式导航还是有类似错误
-
this:当前组件实例(search)
this.$ router | $ route属性
this.$ router:VueRouter类的一个实例function VueRouter(){}//原型对象的方法 VueRouter.prototype.push = function(){//函数的上下文为VueRouter类的一个实例 }let $router = new VueRouter(); $router.push(xxx); this.$router.push();
2 Home模块组件拆分
- 先把静态页面完成
- 拆分出静态组件
- 获取服务器的数据进行展示
- 动态业务
3 三级联动组件完成
- 由于三级联动,在Home、Search、Detail,把三级联动注册为全局组件
- 好处:只需要注册一次,就可以在项目任意地方使用
4 完成其余静态组件
- HTML + CSS + 图片资源 :信息【结构、样式、图片资源】
5 POSTMAN测试接口
- 刚刚经过postman工具测试,接口是没有问题的
- 如果服务器返回的数据code字段200,代表服务器返回数据成功
- 整个项目,接口前缀都有/api字样
6 axios二次封装
- 发送请求的方法:XMLHttpRequest、fetch、JQ、axios
6.1 为什么需要进行二次封装axios?
- 请求拦截器、响应拦截器:请求拦截器,可以在发请求之前处理一些业务;响应拦截器,当服务器数据返回以后处理一些事情
6.2 在项目中经常API文件夹【axios】
-
接口当中:路径都带有/api
baseURL:"/api"
6.3 axios基础不好,可以参考git|NPM关于axios文档
7 接口统一管理
- 项目很小:完全可以在组件的生命周期函数中发请求
- 项目大:axios.get(‘xxx’)
7.1 跨域问题
- 什么是跨域:协议、域名、端口号不同请求,称之为跨域
- http://localhost:8080/#/home ----前端项目本地服务器
- http://gmall-h5-api.atguigu.cn ----后台服务器
- 解决跨域问题:JSONP、CROS、代理
8 npprogress进度条的使用
- start:进度条开始
- done:进度条结束
- 进度条颜色可以修改样式
9 vuex状态管理库
9.1 vuex是什么
- vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据
- 切记,并不是全部项目都需要vuex,如果项目很小,完全不需要vuex,如果项目很大,组件很多,数据很多,数据维护很费劲
- state:仓库存储数据的地方
- mutations:唯一修改state的手段
- actions:处理派发action的地方
- getters:计算属性
- modules:模块式开发
9.2 vuex基本使用
9.3 vuex实现模块式开发
-
如果项目过大,组件过多,接口很多,数据也很多,可以让vuex实现模块式开发
-
模拟state存储数据
{count: 1,search:{a: 1},detail: {sss},pay: {} }{home: {},search: {} }
10 完成TypeNav三级联动展示数据业务
"data": [{ //一级"categoryChild": [{ //二级"categoryChild": [{ //三级"categoryName": "电子书","categoryId": 1},{...},{...},{...}],"categoryName": "电子书刊","categoryId": 1},]"categoryName": "图书、音像、电子书刊","categoryId": 1},
]
相关文章:
笔记day2
文章目录 1 NavigationDuplivated警告错误2 Home模块组件拆分3 三级联动组件完成4 完成其余静态组件5 POSTMAN测试接口6 axios二次封装6.1 为什么需要进行二次封装axios?6.2 在项目中经常API文件夹【axios】6.3 axios基础不好,可以参考git|NPM关于axios文…...
排序算法(3)——归并排序、计数排序
目录 1. 归并排序 1.1 递归实现 1.2 非递归实现 1.3 归并排序特性总结 2. 计数排序 代码实现 3. 总结 1. 归并排序 基本思想: 归并排序(merge sort)是建立在归并操作上的一种有效的排序算法,该算法是采用分治法࿰…...
【5】C#期末复习第5套
1.int a[3][2]{2,4,6,8,10.12};则*(a[1]1)的值是8 指向(a[1]的第二个元素) 再* 2.合并字符串库函数strcat 3.比较字符串库函数strcmp 4.执行结果是x3,y3 int x3,y; int *px&x; y*px; (优先级高于*) 5.*p[5]没…...
jquery虚拟键盘插件jqkeyboard
jqKeyboard是一款jquery虚拟键盘插件。该虚拟键盘插件依赖于jquery ui,通过该插件,可以在页面中生成一个扁平风格的虚拟键盘面板。 在线预览 下载 安装 可以通过npm来安装jqKeyboard虚拟键盘插件。 npm install jq keyboard --save 使用方法 在页面…...
IMX6ULL开发板把屏幕刷黑(黑屏)的程序
承接博文 IMX6ULL开发板基础实验:Framebuffer驱动程序的简单应用实例代码详细分析 很容易写出把屏幕刷黑的程序… Ubuntu中的目录/home/book/mycode下新建目录C0003_draw_lcd_black,然后把把博文中的源码/home/book/mycode/C0002_show_pixel复制到目录C0003_draw_l…...
OpenCV基本图像处理操作(三)——图像轮廓
轮廓 cv2.findContours(img,mode,method) mode:轮廓检索模式 RETR_EXTERNAL :只检索最外面的轮廓;RETR_LIST:检索所有的轮廓,并将其保存到一条链表当中;RETR_CCOMP:检索所有的轮廓,并将他们组…...
C语言学习day24:DLL给程序打上窗口破解补丁
简言 在上一章节我们知道了DLL,编写DLL以及最重要的导出DLL,这一章节我们学习如何给应用打上窗口破解补丁(DLL)。 流程 工具:studyPE 操作: 把要补丁的程序拖入PE中点击导入菜单,导入dll函…...
大模型呼出机器人的应用场景
大模型呼出机器人的应用场景 原作者:开源呼叫中心FreeIPCC,其Github:https://github.com/lihaiya/freeipcc 大模型呼出机器人的应用场景十分广泛,涵盖了多个行业和服务领域。以下是对其应用场景的详细归纳: 一、客户…...
el-date-picker筛选时间日期选择范围
el-date-picker 选择时间日期范围-> 昨天 近7天 30天<template><div class"main"><div class"header"><el-form :model"form" label-width"auto"><el-button plain click"setTimeToYesterday&q…...
【Apache Paimon】-- 10 -- Paimon 0.9.0 集成 Hive 3.1.3
参考官方 0.9.0 版本文档:https://paimon.apache.org/docs/0.9/engines/hive/ 1、下载依赖包到 hive lib 下 $ cd $HIVE_HOME/$ mkdir auxlib$ cd auxlib$ wget https://repo.maven.apache.org/maven2/org/apache/paimon/paimon-hive-connector-3.1/0.9.0/paimon-hive-connec…...
vue2如何写一个轮播图
需求描述 写一个轮播图,可以实现如下效果: 页面上展示三个轮播图元素默认状态下,进行自动轮播,循环播放一旦鼠标移入轮播图范围内,并停留在元素a上,则轮播图停止自动播放,同时将元素a放大 核…...
基础库httpx的使用
urllib 库和 requests 库的使用,已经可以爬取绝大多数网站的数据,但对于某些网站依然无能为力。什么情况?这些网站强制使用HTTP/2.0协议访问,这时 urllib 和requests 是无法爬取数据的,因为它们只支持 HTTP/1.1,不支持…...
MYSQL 利用concat函数 生成更新或者插入SQL
有时候需要批量运维一批数据,一条一条写SQL比较麻烦,可以使用下面的方法批量生成select sales_order_number,a.sog_line_id,actual_price,sales_goods_unit_price,b.id,concat(update your_table set actual_price, sales_goods_unit_price, where id,b…...
Backend For Frontend的学习分享
晚上公司开了一个技术分享会,主要内容就是公司的项目架构,会中讲解了项目整体架构是BFF架构,就是在微服务之上多加了一层。 除此之外,还讲解了DDD设计思想,主要用于各个业务中台,如订单中台、用户中台等。…...
KS曲线python实现
目录 实战 实战 # 导入第三方模块 import pandas as pd import numpy as np import matplotlib.pyplot as plt# 自定义绘制ks曲线的函数 def plot_ks(y_test, y_score, positive_flag):# 对y_test重新设置索引y_test.index np.arange(len(y_test))# 构建目标数据集target_dat…...
【GO环境安装】mac系统+GoLand使用
文章目录 下载安装包环境配置GoLandGo Modules 下载安装包 地址:GO下载地址 下载好后直接进行安装: 进入terminal,查看是否安装成功: 环境配置 在文稿下面创建工作目录: 在文稿下新建Go_Works文件夹,在…...
2025年入职/转行网络安全,该如何规划?网络安全职业规划
网络安全是一个日益增长的行业,对于打算进入或转行进入该领域的人来说,制定一个清晰且系统的职业规划非常重要。2025年,网络安全领域将继续发展并面临新的挑战,包括不断变化的技术、法规要求以及日益复杂的威胁环境。以下是一个关…...
linux中 umask 命令
Umask Umask(User File Creation Mode Mask)是Linux系统中的一项命令,用于设定新创建文件和目录的默认权限。 一、umask的作用 Umask通过掩码操作,限制新文件和目录的访问权限。在Linux中,所有的文件和目录都被分配…...
OpenCV函数及其应用
1. 梯度处理的Sobel算子函数 功能 Sobel算子是一种用于边缘检测的离散微分算子,它结合了高斯平滑和微分求导,用于计算图像亮度的空间梯度。 参数 src:输入图像。 dst:输出图像。 ddepth:输出图像的深度。 dxÿ…...
使用ENSP实现NAT(2)
一、NAT的类型 二、静态NAT 1.项目拓扑 2.项目实现 路由器AR1配置: 进入系统视图 sys将路由器命名为AR1 sysname AR1关闭信息中心 undo info-center enable 进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为192.168.10.254/24 ip address 192.168.10.254 24进…...
欢迎 PaliGemma 2 – 来自 Google 的新视觉语言模型
我们很高兴迎来 Google 全新的视觉语言模型 PaliGemma 2,这是 PaliGemma 的一个新版本。与其前代产品一样,PaliGemma 2 使用强大的SigLIP进行视觉处理,但在文本解码部分升级到了最新的 Gemma 2。 https://hf.co/collections/google/siglip-65…...
C++ List(双向链表)
是一个线性链表结构,它的数据由若干个节点构成,每一个节点都包括一个 信息块(即实际存储的数据)、一个前驱指针和一个后驱指针。它无需分配指定 的内存大小且可以任意伸缩,这是因为它存储在非连续的内存空间中&#…...
pip使用方法
1. 安装包: pip install :安装指定的 Python 包。 pip install :安装特定版本的 Python 包。 pip install -r requirements.txt:从文件中读取依赖列表并安装所有列出的包。 pip install --pre :允许安装预发布或开发版…...
websocket再项目中的使用
WebSocket在项目中的使用主要包括以下几个方面: WebSocket的基本概念和原理: 定义:WebSocket是一种基于TCP的协议,实现了浏览器与服务器之间的全双工通信。它通过HTTP/1.1协议的101状态码进行握手,建立连接…...
C语言:指针2(指针变量指向数组)
通过指针引用数组元素 引用一个数组元素,可以用: ① 下标法:如 a[i] 形式。 ② 指针法:如 *(ai) 或者 *(pi) 。其中a是数组名,p是指向数组元素的指针变量,其初值:p a; 案例 需求:…...
心觉:一个人的关注点,决定了他的成长速度
Hi,我是心觉,带你用潜意识化解各种焦虑、内耗,建立无敌自信;教你财富精准显化的实操方法;关注我,伴你一路成长! 每日一省写作265/1000天 在生活和工作中,我们经常会进入一个矛盾:总是…...
【Websokect】服务器https协议下ws连接失败问题及解决办法
在服务器使用HTTPS协议下连接WebSocket时,通常会出现一些常见的问题导致连接失败。以下是一些可能的原因和解决办法: SSL证书配置问题: 确保您的服务器上已正确配置SSL证书,并且证书有效。如果证书配置不正确或者过期,…...
Python 助力 DBA:高效批量管理数据库服务器的多线程解决方案-多库查询汇总工具实现
批量数据库服务器连接测试与数据汇总:Python实现方案 作为数据库服务器运维人员,我们经常需要面对大量服务器的连接测试和数据汇总工作。本文将介绍一个使用Python实现的高效解决方案,可以帮助我们快速完成这些任务。 需求概述 从配置文件…...
如何在繁忙的生活中找到自己的节奏?
目录 一、理解生活节奏的重要性 二、分析当前生活节奏 1. 时间分配 2. 心理状态 3. 身体状况 4. 生活习惯 1. 快慢适中 2. 张弛结合 3. 与目标相符 三、掌握调整生活节奏的策略 1. 设定优先级 2. 合理规划时间 3. 学会拒绝与取舍 4. 保持健康的生活方式 5. 留出…...
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
前言 介绍一下这三种对象使用场景 您前端一旦涉及到文件或图片上传Q到服务器,就势必离不了 Blob/File /base64 三种主流的类型它们之间 互转 也成了常态 Blob - FileBlob -Base64Base64 - BlobFile-Base64Base64 _ File uniapp 上传文件 现在已获取到了blob格式的…...
SQLite建表语句示例(含所有数据类型、索引、自增主键、唯一索引)
下面是一个示例,展示如何创建一个用户信息表。 包含 SQLite 支持的所有数据类型,同时设置主键为自增、一个字段为唯一索引,以及另一个字段为普通索引: -- 创建用户信息表 CREATE TABLE user_info (id INTEGER PRIMARY KEY AUTOI…...
vue常用的一些指令整理
在 Vue.js 中,指令(Directives)是特殊的 HTML 属性,用于在模板中绑定行为。Vue 提供了许多内置指令,你也可以定义自定义指令。以下是指令的分类和常用用法: 1. 内置指令 v-bind 用于动态绑定属性或特性。…...
SSM 搭台,Vue 唱戏:新锐台球厅管理系统的设计与实现盛宴
2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常适…...
#C01L10P01. C01.L10.双重循环、多重循环程序设计.双重循环
双重循环格式: for(循环条件1){语句1;for(循环条件2){语句2;} }...
实现某海外大型车企(T)Cabin Wi-Fi 需求的概述 - 3
大家好,我是Q,邮箱:1042484520qq.com。 今天我们在上一讲的基础上再扩展下 Cabin Wi-Fi 的功能需求,讲讲如何判断 5G TCU 系统中的路由关系。 参考: 实现某海外大型车企(T)Cabin Wi-Fi 需求的概…...
Python+OpenCV系列:AI看图识人、识车、识万物
在人工智能风靡全球的今天,用 Python 和 OpenCV 结合机器学习实现物体识别,不仅是酷炫技能,更是掌握未来的敲门砖。本篇博文手把手教你如何通过摄像头或图片输入,识别人、动物、车辆及其他物品,让你的程序瞬间具备 AI …...
全排列..
本节通过对一个全排列的实例,帮助对深度优先算法的理解. 问题描述: 给定一个集合,实现集合中的元素重排列 思路解析: 按照全排列的常规思维,执行过程如下:先确定第一位,将已经确定的元素放入一个数组中,再用一个循环对剩余数组进行全排列.在对剩余数组进行全排列时,就是递归执…...
用户体验与SEO的结合:如何优化网站以提升谷歌排名?
在SEO领域,算法、关键词和技术手段固然重要,但归根结底,谷歌的核心理念是提供最优质的用户体验。无论算法如何变化,用户体验始终是影响谷歌排名的重要因素之一。一个友好、直观的网站不仅能留住用户,还能直接提升搜索引…...
[计算机网络]ARP协议的故事:小明找小红的奇妙旅程
1.ARP小故事 在一个繁忙的网络世界中,每个设备都有自己的身份标识——MAC地址,就像每个人的身份证号码一样。在这个故事里,我们的主角小明(主机)需要找到小红(目标主机)的MAC地址,才…...
http的MIME类型
在 HTTP 协议中,MIME 类型(Multipurpose Internet Mail Extensions)用于描述传输内容的类型和格式。MIME 类型通过 Content-Type 头字段来指定,告知客户端如何处理和显示接收到的数据。 常见的 MIME 类型 以下是一些常见的 MIME…...
【数字信号处理】数字信号处理试题及答案,离散序列,Z变换,傅里叶变换
关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…...
信号槽【QT】
文章目录 对象树字符集信号槽QT坐标系信号与槽connect自定义槽自定义信号disconnect 对象树 #ifndef MYLABEL_H #define MYLABEL_H#include<QLabel> class MyLabel : public QLabel { public:// 构造函数使用带 QWidget* 版本的.// 确保对象能够加到对象树上MyLabel(QWi…...
【JAVA】JAVA接口公共返回体ResponseData封装
一、JAVA接口公共返回体ResponseData封装,使用泛型的经典 例子 public class ResponseData<T> implements Serializable { /** * */ private static final long serialVersionUID 7098362967623367826L; /** * 响应状态码 */ …...
如何评估并持续优化AI呼出机器人的使用效果
如何评估并持续优化AI呼出机器人的使用效果 作者:开源呼叫中心FreeIPCC 随着人工智能技术的发展,AI呼出机器人在企业中的应用越来越广泛。这些智能系统不仅提高了工作效率、降低了成本,还改善了客户体验。然而,要确保AI呼出机器…...
SQL注入漏洞详解
SQL注入是一种常见且十分严重的安全漏洞。它利用应用程序对用户输入的验证不充分,从而导致恶意的SQL查询被执行,可能导致数据泄露、篡改、甚至系统被攻陷。本文将详细解析SQL注入攻击的原理,举例说明其实现过程,并提供多种防范方案…...
爬虫逆向学习(十四):分享一下某数通用破解服务开发经验
阅前须知 这篇博客不是教大家怎么实现的,而且告知大家有这个东西,或者说一种趋势,借此分享自己大致的实现经验。具体的实现我也不好整理,毕竟是在别人的基础上缝缝补补。 前言 使用补环境方式破解过某数的同学都知道࿰…...
同步升压芯片-FP6276BXR-G1不能工作的原因
电源管理芯片FP6276BXR-G1是一个升压稳压电源,我用来把一节锂电池升压到5V电源 这个芯片是一个神奇的芯片,为什么专门拉出来写一篇文章呢,就是焊接好后,发现点不亮,这个就糟糕了。 这个是网友 memoff的一张图&#…...
Iris简单实现Go web服务器
package mainimport ("github.com/kataras/iris" )func main() {app : iris.New() // 实例一个iris对象//配置路由app.Get("/", func(ctx iris.Context) {ctx.WriteString("Hello Iris")})app.Get("/aa", func(ctx iris.Context) {ct…...
基于Spring Boot的营销项目系统
一、系统背景与意义 随着互联网技术的飞速发展,电子商务已成为现代商业活动的重要组成部分,深刻改变了人们的购物习惯和消费模式。然而,面对日益激烈的市场竞争和消费者需求的多样化,传统的电商管理系统往往存在功能单一、数据处…...
百度飞桨:零基础入门深度学习
目录 前言一、概念:机器学习&深度学习1. 机器学习2. 深度学习 二、实操:波士顿房价预测任务1. 线性回归模型2. 线性回归模型的神经网络结构3. 数据处理4. 模型设计5. 训练配置6. 训练过程6.1. 梯度下降法6.2. 计算梯度6.3. 使用Numpy进行梯度计算6.4…...