当前位置: 首页 > article >正文

添加按钮跳转页面并且根据网站的用户状态判断是否显示按钮

        现在我们需要的是为页面添加一个按钮,这个按钮是动态的,需要根据网站用户登录过后是否是vip来判断是否显示,然后按钮的效果是跳转到某个页面。

        首先我们需要在页面中找到我们需要添加按钮的位置,找到对应的文件,然后比较好的是按钮下面有一个sign out退出按钮,那么我们要在这上面添加一个按钮,样式可以和signout一致,

那么我们就之间复制粘贴,现在页面上面有2个signout,我们改变文本内容subscription,我们就有了一个订阅按钮,但是我们更改id值为subscription-btn,然后在这个页面的js中document.getElementById获取元素,然后改display为none默认不显示,然后发送fetch给后端路径,然后用data获取返回的response对象,然后定义我们跳转的页面portalURl=data?portal.url ,

如果portalURl存在,给按钮外面的a标签添加href=portalURL,然后就实现我们想要的效果了。

        但是呢还有react框架的一套页面也需要添加,也是在signout复制一下,有2个signout,然后我们改文本,在组件里面我们发现后端以及其他组件已经写好了获取portal的方法api,我们直接解构赋值获取就行,然后组件里面有subscription里面保存这订阅内容的对象,我们设置hasSubscription布尔值通过subscription的data对象长度来判断是否订阅,那么按钮无非就是添加点击事件,用window.open直接跳转portal路径,这样添加订阅按钮的任务就完成了。

        这只是完成的思路,我现在写代码离不开ai,可能有思路但是还是下手难,还是写的少,希望坚持就有收获。

相关文章:

添加按钮跳转页面并且根据网站的用户状态判断是否显示按钮

现在我们需要的是为页面添加一个按钮,这个按钮是动态的,需要根据网站用户登录过后是否是vip来判断是否显示,然后按钮的效果是跳转到某个页面。 首先我们需要在页面中找到我们需要添加按钮的位置,找到对应的文件,然后比…...

Gerrit+repo管理git仓库,如果本地有新分支不能执行repo sync来同步远程所有修改,会报错

问题:创建一个本地分支TEST 来关联远程已有分支origin/TEST,直接执行repo sync可能会出现问题:比如,本地分支TES会错乱关联到origin/master,或者拉不下最新代码等问题。 // git checkout -b 新分支名 远程分支名字 git…...

豆瓣图书评论数据分析与可视化

【题目描述】豆瓣图书评论数据爬取。以《平凡的世界》、《都挺好》等为分析对象,编写程序爬取豆瓣读书上针对该图书的短评信息,要求: (1)对前3页短评信息进行跨页连续爬取; (2)爬取…...

Vue ④-组件通信 || 进阶语法

组件三大部分 template:只有能一个根元素 style:全局样式(默认):影响所有组件。局部样式:scoped 下样式,只作用于当前组件 script:el 根实例独有,data 是一个函数,其他配置项一致…...

0x-2-Oracle Linux 9上安装JDK配置环境变量

一、JDK选择和使用 安装完Oracle Linux9.6,同时使用rpm包安装Oracle 23 ai free后, 将面临sqlcl程序无法使用和java无法使用,需要相应进行变量配置问题。 1、java 环境运行不存在,Oracle 23ai free安装后默认安装JDK 11 /opt/…...

深入理解卷积神经网络:从原理到应用

在人工智能领域,卷积神经网络(Convolutional Neural Network, CNN)无疑是计算机视觉领域的璀璨明珠。从 1998 年 Yann LeCun 提出 LeNet-5 实现手写数字识别,到 2012 年 AlexNet 在 ImageNet 大赛上创造历史性突破,CNN…...

从入门到实战:AI学习路线全解析——避坑指南

分享一下阿里的人工智能学习路线,为感兴趣系统学习的小伙伴们探路。 一、谁适合学这门AI课程?五类人群的精准定位 无论你是零基础小白还是职场转型者,这套系统化课程都能为你量身定制成长路径: 零基础爱好者(无编程/数学背景) 课程提供Python和数学前置学习建议,先补基…...

Spring Boot + Thymeleaf 防重复提交

在 Spring Boot 与 Thymeleaf 结合的 Web 应用中,防止重复提交可以采用token 机制 客户端禁用按钮的方式实现,在高并发场景下,考虑使用 Redis 存储 token 而非 Session。 第一步:后端实现 Controller public class FormControl…...

uniapp实现的简约美观的星级评分组件

采用 uniapp 实现的一款简约美观的星级评分模板,提供丝滑动画效果,用户可根据自身需求进行自定义修改、扩展,纯CSS、HTML实现,支持web、H5、微信小程序(其他小程序请自行测试) 可到插件市场下载尝试&#x…...

AWS Elastic Beanstalk + CodePipeline(Python Flask Web的国区CI/CD)

目标 需要使用AWS Elastic Beanstalk 部署一个Python的Flask Web应用,并且使用CodePipeline作为CI/CD工作流。 eb部署图 前提 假设你已经有一个能够正常运行的Python的Flask Web应用项目代码,而且需要对已有Flask工程做一些调整。由于AWS Elastic Bea…...

多线程语音识别工具

软件介绍 本文介绍一款支持大厂接口的语音转文字工具,具备免配置、免费使用的特点。 软件特性 该工具是一款完全免费的桌面端应用程序,部署于开源社区平台,其核心优势在于整合了多家技术供应商的接口资源。 操作方式 用户只需将音频…...

前端对WebSocket进行封装,并建立心跳监测

WebSocket的介绍: WebSocket 是一种在客户端和服务器之间进行全双工、双向通信的协议。它是基于 HTTP 协议,但通过升级(HTTP 升级请求)将连接转换为 WebSocket 协议,从而提供更高效的实时数据交换。 WebSocket 的特点…...

DiMTAIC 2024 数字医学技术及应用创新大赛-甲状腺B超静态及动态影像算法赛-参赛项目

参赛成绩 项目介绍 去年参加完这个比赛之后,整理了项目文件和代码,虽然比赛没有获奖,但是参赛过程中自己也很有收获,自己一个人搭建了完整的pipeline并基于此提交了多次提高成绩,现在把这个项目梳理成博客&#xff0c…...

window安装docker\docker-compose

安装前配置 打开控制面板,参照下图打开“启动或关闭windows功能”,Hyper-V 和容器需要启用 程序和功能 启动或关闭windows功能 勾选Hyper-V 安装路径配置 Docker在Windows上的默认安装路径为C:\Program Files\Docker。 以管理员身份运行CMD在D盘,dev文件夹下创建Docker文…...

Jenkins的学习与使用(CI/CD)

文章目录 前言背景CI/CDJenkins简介Jenkins特性 安装Jenkins工作流程(仅供参考)安装maven和其他插件新建任务任务源码管理配置maven配置git(非必需) 尝试手动构建jar包可能遇到的错误 发布到远程服务器前置清理工作构建触发器git钩…...

vue-14(使用 ‘router.push‘ 和 ‘router.replace‘ 进行编程导航)

使用 ‘router.push’ 和 ‘router.replace’ 进行编程导航 编程导航是使用 Vue Router 构建动态和交互式 Web 应用程序的一个重要方面。它允许您根据应用程序逻辑、用户作或特定条件控制用户的导航流。您可以使用 router.push 和 router.replace 方法以编程方式导航到不同的路…...

使用WPF的Microsoft.Xaml.Behaviors.Wpf中通用 UI 元素事件

Nuget下载之后记得要先引用下面的 xmlns:i"http://schemas.microsoft.com/xaml/behaviors" <!-- 鼠标事件 --> <i:EventTrigger EventName"MouseEnter"/> <!-- 鼠标进入 --> <i:EventTrigger EventName"MouseLeave"/&g…...

Elasticsearch中的监控(Monitoring)功能介绍

Elasticsearch 的 监控&#xff08;Monitoring&#xff09; 功能用于实时跟踪集群的运行状态、性能指标和资源使用情况&#xff0c;帮助管理员及时发现潜在问题、优化配置并确保集群稳定高效运行。它通过内置工具和集成方案&#xff0c;提供从节点到集群、从硬件到服务层的全方…...

Centos7.6图文安装mysql8.4详细步骤记录

1 前提条件 1.1 关闭数据库服务器的防火墙 # 关闭数据库服务器的防火墙 systemctl stop firewalld systemctl disable firewalld 1.2 关闭SELinux # 编辑 /etc/selinux/configvi /etc/selinux/config#内容更改为disabledSELINUXdisabled 1.3 卸载系统自身带的mysql&#…...

AI短视频创富营

课程内容&#xff1a; 相关资料 【第一章】前期准备 001.【涨粉技巧】新账号如何快速涨粉?_ev(1).mp4 002.【带贷权限】如何开通账号带贷权限?(1).mp4 003.【费用缴纳】如何缴纳账号保证金?_ev(1).mp4 004.【账号检测】如何检测账号是否限流?(1).mp4 005.【风险规避…...

C++.OpenGL (4/64)纹理(Texture)

纹理(Texture) 纹理映射核心流程 #mermaid-svg-XxVbt4fizulzb5H3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XxVbt4fizulzb5H3 .error-icon{fill:#552222;}#mermaid-svg-XxVbt4fizulzb5H3 .error-text{fill:…...

spring中的@RabbitListener注解详解

基本用法主要属性1. queues / queueNames2. containerFactory3. id4. concurrency5. ackMode6. priority7. bindings 高级特性1. 消息转换器2. 手动确认3. 条件监听4. 错误处理 配置监听容器工厂注意事项完整示例循环依赖解决1. 使用 Setter 注入2. 使用 Lazy 注解3. 重构代码结…...

MySQL-运维篇

运维篇 日志 错误日志 错误日志是 MySQL 中最重要的日志之一&#xff0c;它记录了当 mysqld 启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息当数据库出现任何故障导致无法正常使用时&#xff0c;建议首先查看此日志。 该日志是默认开启的&am…...

深度优先算法学习

1: 从 1点出发到 15点 #include <stdio.h>#define MAX_NODES 100typedef struct {int node_id;int *nextNodes;int nextNodesSize; } Node;// 假设我们有一个节点数组&#xff0c;全局保存了所有节点 Node nodes[MAX_NODES];void dfs(int node_id) {Node *node &n…...

青少年编程与数学 01-011 系统软件简介 08 Windows操作系统

青少年编程与数学 01-011 系统软件简介 08 Windows操作系统 1. Windows操作系统的起源与发展1.1 早期版本&#xff08;1985-1995&#xff09;1.2 Windows 9x系列&#xff08;1995-2000&#xff09;1.3 Windows NT系列&#xff08;1993-2001&#xff09;1.4 Windows XP及以后版…...

前端技能包

ES6 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><script>// 变量定义var a1;let b5; // 现在使用let 定义变量// 对象解构let person{&quo…...

Vue-github 用户搜索案例

一、前言 在 Vue 开发中&#xff0c;与后端或第三方 API 接口进行交互是非常常见的需求。GitHub 提供了开放的 RESTful API&#xff0c;非常适合用来练习 Vue 的异步请求和数据绑定功能。 本文将带你一步步实现一个完整的 GitHub 用户搜索系统&#xff0c;包括&#xff1a; …...

Mac版Visual Studio Code Copilot 无法使用的解决方法

1 app文件夹删除Visual Studio Code 2 终端里面 输入以下指令&#xff0c;删除各种缓存 rm -fr ~/Library/Preferences/com.microsoft.VSCode.helper.plist rm -fr ~/Library/Preferences/com.microsoft.VSCode.plist rm -fr ~/Library/Caches/com.microsoft.VSCode rm -f…...

【笔记】PyCharm 使用问题反馈与官方进展速览

#工作记录 https://youtrack.jetbrains.com/issue/IJPL-190308 【笔记】记一次PyCharm的问题反馈_the polyglot context is using an implementation th-CSDN博客 【笔记】与PyCharm官方沟通解决开发环境问题-CSDN博客 与 JetBrains 官方沟通记录&#xff08;PyCharm 相关问题…...

操作系统期末版

文章目录 概论处理机管理进程线程处理机调度生产者消费者问题 死锁简介死锁的四个必要条件解决死锁的方法 存储管理链接的三种方式静态链接装入时动态链接运行时链接 装入内存的三种方式绝对装入可重定位装入动态运行时装入 覆盖交换存储管理方式连续分配**分段存储管理方式***…...