【Uniapp】支付链转二维码

news2024/11/17 1:35:53

前言


提示:这个是一个很小的项目,大概30分钟就能搞定
在这里插入图片描述
实现方式:输入支付代码,存储到对应的数据库表中,二维码访问一个PHP文件通过id来进行重定向,这样就可以使每张二维码都是固定的,替换二维码内容也只需改数据库的即可

文章目录

  • 前言
  • 一、设计UI界面
  • 二、设计数据库
  • 三、设计接口
    • 列表接口
    • 数据更新接口
  • 四、设计重定向访问页面
  • 四、解决跨域问题
    • 第一步
    • 第二步
    • 第三步
  • 总结


提示:以下代码需要导入B-ui插件,或者在页面顶部直接下载资源即可

一、设计UI界面

在这里插入图片描述
在这里插入图片描述

index.vue
<template>
	<view>


		<view class="b-popup " v-if="showPopup" :class="[directionClass,{'b-popup-round':round},{'b-popup-animation':animation}]">
			<view class="b-popup-shade" @click="showPopup = false"></view>
			<view class="b-popup-content">
				<!-- 你的内容写在这里 -->
				<view class="b-p-32" style="width: 500rpx;height: 300rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<input placeholder="填入新的支付代码" v-model="update_url" style="background-color: #ccc;height: 80rpx;width: 487rpx;" />
					<view style="margin-top: 20rpx;">
						<button class="b-btn b-btn-blue" @click="update__()">确认</button>
						<button class="b-btn b-btn-red" @click="show(false)" style="margin-left: 50rpx;">取消</button>
					</view>

				</view>
			</view>
		</view>




		<!-- 	<view class="b-flex-x b-bg-white b-p-32">
			<image src="/static/logo.png" mode="aspectFit" class="logo b-radius-8"></image>
			<view class="b-flex-item b-ml-32">
				<view class="b-text-B b-text-48 b-text-black">支付链接转二维码 v{{BuiVersion}}</view>
				<view class="b-font-24 b-mt-8 b-text-black-dd">@园游会永不打烊</view>
			</view>
		</view> -->
		<!-- <view class="b-flex-grow b-ml-32" style="width: 680rpx;">
			<input type="text" class="b-form-input" placeholder="请输入名称" style="width: 680rpx;" v-model="name">
		</view> -->
		<!-- 	<view class="b-bg-white b-pl-32 b-pr-32 b-pt-24 b-pb-24">
			<button class="b-btn b-btn-blue b-btn-block b-btn-lg"  @click="upload()">上传图片</button>
		</view> -->
		<view class="b-pt-32 b-pr-32 b-pl-32 b-pb-24 b-text-black-dd">列表</view>
		<view class="b-list-user b-bg-white">
			<view class="b-list-item"
				  v-for="(item,index) in list" :key="index">
				<view class="b-flex-x">
					<view class="b-icon b-text-black-d">
						<image src="/static/tabBar/api.png" mode="widthFix" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view style="font-size:20rpx;">位置{{item.id}}</view>
				</view>
				<view class="btns-box">
					<button class="b-btn b-btn-blue b-btn-sm" @click="jumps_edit(item.id)">修改URL</button>
					<button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="jumps(item.id)">生成</button>
					<!-- <button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="delete_(item.id)">删</button> -->
				</view>
			</view>
		</view>

		<view class="b-p-32 b-text-black-dd b-text-c b-text-20">
			<view>欢迎使用 B-ui </view>
			<view class="b-mt-8">&copy; 园游会永不打烊</view>
		</view>
	</view>
</template>

<script>
	export default {
			
			data() {
				return {
					select_id:'',
					update_url:'',
					showPopup:false,
					directionClass:"",
					round:true,
					animation:true,
					name:"",
					BuiVersion:"",
					list:[],
			
			}},
		
			onLoad() {
				this.BuiVersion = uni.Bui.version;
				this.get_list();
			},
			methods: {
				
				update__(){
					let that=this;
						uni.request({
						url: 'https://*****/update.php', 
							data: {
								url:that.update_url,
								id:that.select_id
								},
								method: 'POST',
								header: {
								'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
								},
								success: (res) => {
									if (res.data.code==200) {
										uni.showToast({
											title:res.data.msg
										})
									} else{
										uni.showToast({
											title:res.data.msg
										})
									}
									this.update_url='';
									that.showPopup=false;
								}
						})
				},
				show(status = true){
					this.showPopup = status;
					this.update_url='';
				},
				get_list(){
					 let that=this;
									uni.request({
									url: 'https://*****/get_list.php', 
									data: {
									},
									method: 'POST',
									header: {
									'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
									},
									success: (res) => {
										console.log(res.data)
										that.list=res.data.data;
									}
									})
				},
				
		jump(path){
			uni.navigateTo({
				url:'/pages/video/video?path='+path
			})
		},
		jumps(path){
			console.log(path)
			uni.navigateTo({
				url:'/pages/qrcode/qrcode?path='+path
			})
		},
		jumps_edit(id){
			let that=this;
			that.select_id=id;
			
			that.showPopup = true;
			
			}
				}
		}
</script>

<style lang="scss">
	.logo{
			width: 140rpx;
			height: 140rpx;
		}
		
	
		
		.line-top{
			border-top: #eee solid 1px;
		}
</style>
qrcode.vue
<template xlang="wxml">
	<view class="container">
		<view class="qrimg">
			<view class="qrimg-i">
				<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view>
			<!-- <view class="qrimg-i">
				<tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view> -->
		</view>
		
		
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">设置二维码大小</view>
		</view>
		<view class="body-view">
			<slider :value="size" @change="sliderchange" min="50" max="500" show-value />
		</view>
		<view class="uni-padding-wrap">
			<view class="btns">
				<button type="primary" @tap="selectIcon">选择二维码图标</button>
				<button type="primary" @tap="creatQrcode">生成二维码</button>
				<button type="primary" @tap="saveQrcode">保存到图库</button>
		<!-- 		<button type="warn" @tap="clearQrcode">清除二维码</button>
				<button type="warn" @tap="ifQrcode">显示隐藏二维码</button> -->
			</view>
		</view>
	</view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
export default {
	data() {
		return {
			ifShow: true,
			val: '', // 要生成的二维码值
			size: 300, // 二维码大小
			unit: 'upx', // 单位
			background: '#ffffff', // 背景色
			foreground: '#252625', // 前景色
			pdground: '#252625', // 角标色
			icon: '', // 二维码图标/static/logo.jpg
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '' // 二维码生成后的图片地址或base64
		}
	},
	methods: {
		sliderchange(e) {
			this.size = e.detail.value
		},
		creatQrcode() {
			this.$refs.qrcode._makeCode()
		},
		saveQrcode() {
			this.$refs.qrcode._saveCode()
		},
		qrR(res) {
			this.src = res
		},
		clearQrcode() {
			this.$refs.qrcode._clearCode()
			this.val = ''
		},
		ifQrcode() {
			this.ifShow = !this.ifShow
		},
		selectIcon() {
			let that = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					that.icon = res.tempFilePaths[0]
					setTimeout(() => {
						that.creatQrcode()
					}, 100);
					// console.log(res.tempFilePaths);
				}
			});
		}
	},
	components: {
		tkiQrcode
	},
	onLoad(options) {
		let that = this;
		that.val="https://******/location.php?id="+options.path
	   
	},
}
</script>

<style>
/* @import "../../../common/icon.css"; */
.container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.qrimg {
	display: flex;
	justify-content: center;
}
.qrimg-i{
	margin-right: 10px;
}

slider {
	width: 100%;
}

input {
	width: 100%;
	margin-bottom: 20upx;
}

.btns {
	display: flex;
	flex-direction: column;
	width: 100%;
}

button {
	width: 100%;
	margin-top: 10upx;
}
</style>

二、设计数据库

在这里插入图片描述


三、设计接口

列表接口

固定位置在数据库即可,前端刷新出来通过id进行操作

get_list.php
<?php
// 假设你已经建立了数据库连接 $conn
// 这里我们假设数据库表名为 url_list
include 'conn.php';
// 查询数据库,获取数据
$query = "SELECT * FROM url_list";
$result = $conn->query($query);

// 检查查询结果是否成功
if (!$result) {
    die(
        json_encode(
            array(
                'code' => 500,
                'msg' => '查询失败',
            ),
            JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
        )
    );
}

// 将查询结果转换为关联数组
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}

// 释放查询结果资源
mysqli_free_result($result);

// 输出JSON格式的数据
die(
    json_encode(
        array(
            'code' => 200,
            'data' => $data,
            'msg' => '查询成功',
        ),
        JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
    )
);
?>

数据更新接口

既然要实现,不更改二维码替换内容,那数据库的数据需要改变,就不得不弄一个能修改的操作

update.php
<?php
include 'conn.php';
if ($_POST) {
    $url=$_POST['url'];
    $id=$_POST['id'];
    $sql="UPDATE `url_list` SET `url` = '$url' WHERE `id` = '$id'";
    $res=$conn->query($sql);
     die(
        json_encode(
            array(
            'code' => 200,
            'msg' => '更改成功'
        ),480)
);
} else {
   die(
        json_encode(
            array(
            'code' => 100,
            'msg' => '请求失败'
        ),480)
);
}




四、设计重定向访问页面

上述工作都做完了,现在就差重定向页面。什么是重定向?

重定向是指将一个网页、URL或文件请求从一个位置转发到另一个位置的过程。在互联网和计算机领域,重定向是一种常见的技术,用于将用户从一个网址或链接导向到另一个网址或链接。

重定向通常有两种类型:

  1. 服务器端重定向:当用户访问一个网页或URL时,服务器会检测到这个请求,并根据预先设定的规则,将用户的请求从原始网址转发到新的目标网址。这个过程是在服务器端完成的,用户通常无法察觉到重定向的发生。服务器端重定向是通过HTTP状态码实现的,如301永久重定向、302临时重定向等。
  2. 客户端重定向:这种重定向是通过网页上的特定代码(通常是JavaScript或HTML的标签)来实现的。当用户访问一个网页时,网页上的代码会检测到用户的请求,并将用户自动导向到新的目标网址。客户端重定向可以通过页面刷新或页面跳转来实现。
    重定向在网站管理和维护中有多种用途。一些常见的应用包括:
  3. 网址更改:当网站的URL发生变化时,可以使用重定向将原始URL导向到新的URL,以确保用户仍能够访问到所需内容。
  4. 域名重定向:当网站的域名更改或网站需要多个域名来访问时,可以使用重定向将用户从一个域名导向到另一个域名。
  5. 错误页面处理:当用户访问一个不存在的页面或出现错误时,可以使用重定向将用户引导到一个有效的页面,或者返回一个合适的错误信息。
  6. 流量管理:通过重定向,网站管理员可以控制特定页面的访问量,将用户导向不同的内容或服务。

总之,重定向是一种有用的技术,能够为网站提供更好的用户体验和更有效的管理,可实现域名跳转。

我们通过对二维码的设置使每个栏位根据id来生成二维码,通过传递id给重定向文件,然后重定向文件去数据库查询最新的URL来实现跳转

onLoad(options) {
		let that = this;
		that.val="https://******/location.php?id="+options.path
	   
	},
location.php
<?php
// 重定向的目标链接
include("conn.php");
if ($_GET['id']) {
$id=$_GET['id'];
$query = "SELECT url FROM `url_list` WHERE `id` = '$id'";
$result = $conn->query($query);

if ($result->num_rows > 0) {
    // If at least one row is found, extract the id
    $row = $result->fetch_assoc();
    $url = $row['url'];
    $redirect_url = $url;
    // 执行重定向
    header("Location: " . $redirect_url);
} else {
    // If no data is found, display a message
    echo "没有数据";
}

// Don't forget to close the database connection after using it
$conn->close();
exit();
   



} else {
 die("参数不合法");
}


?>

四、解决跨域问题

第一步

打开manifest.json,勾选Https等其他如图
在这里插入图片描述

第二步

替换所有的域名http为https

第三步

服务端配置SSL证书,设置为强制
在这里插入图片描述

总结

以上就是今天记录的内容,本次项目很简单,是一个新手练手的项目,重定向解决办法就是保持协议一致,你也可以不按我的来,只要统一即可

🍋希望你能喜欢我的其他作品
《记一次云之家签到抓包》
《记一次视频抓包m3u8解密过程》
《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》
《Python】记录抓包分析自动领取芝麻HTTP每日免费IP(成品+教程)》
《某课抓包视频 安卓手机:黄鸟+某课app+VirtualXposed虚拟框架》

推荐专栏:

《Python爬虫脚本项目实战》

该专栏往期文章:
《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码(过Authorization认证)》

🥦如果感觉看完文章还不过瘾,欢迎查看我的其它专栏
🥦作者对python有很大的兴趣,完成过很多独立的项目:例如滇医通等等脚本,但是由于版权的原因下架了,爬虫这一类审核比较严谨,稍有不慎就侵权违规了,所以在保证质量的同时会对文章进行筛选

如果您对爬虫感兴趣请收藏或者订阅该专栏哦《Python爬虫脚本项目实战》,如果你有项目欢迎联系我,我会同步教程到本专栏!

🚀Python爬虫项目实战系列文章!!
⭐⭐欢迎订阅⭐⭐

【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码(过Authorization认证)
【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口

⭐⭐欢迎订阅⭐⭐
在这里插入图片描述

Python爬虫脚本项目实战
在这里插入图片描述

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

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

相关文章

CS5213 国产HDMI转VGA带音频方案芯片|CS5213规格书|CS5213原理图

集睿致远/ASL推出的CS5213芯片是一个国产HDMI&#xff08;高清多媒体接口&#xff09;到VGA桥接芯片。它将HDMI信号转换为标准VGA信号它可以在适配器、智能电缆等设备中设计 CS5213特征 将HDMI信号转换为VGA输出 支持数字信号到模似信号的转换 支持 HDCP 1.0/1.1/1.2 操作简…

OpenAI API访问速度不佳?试试用Vercel来加速!

前言 众所周知&#xff0c;使用openAI API在国内访问体验并不佳&#xff0c;经常遇到访问较慢或者访问失败的问题。本文着重讲讲怎么解决这个问题&#xff0c;让我们日常开发和使用能够更方便的体验到AI带来的便利 为了帮大家省钱&#xff0c;也为了方便操作&#xff0c;实现…

论文解读|进一步融合:体积融合中6D姿态估计的多对象推理

原创 | 文 BFT机器人 01 背景 机器人等智能设备需要从它们的车载视觉系统中获得高效的基于物体的场景表示&#xff0c;以解释接触、物理和遮挡。已识别的精确对象模型将与未识别结构的非参数重建一起发挥重要作用。 本文提出了一个系统用于估计实时的接触和遮挡的精确姿态。从…

手写openFeign

目录 背景步骤应用级别&#xff1a;1、建立被调用方2、建立调用方引入依赖 3、实现效果 原理级别&#xff1a;调动方代码&#xff08;注意impl在启动的时候里边是空的&#xff09;引入jar包的代码&#xff08;写好以后推到nexus上&#xff0c;再拉到上述调用方服务中&#xff0…

收集用户隐私行为规范与修改指引

为更好地保护用户隐私信息&#xff0c;优化用户体验&#xff0c;平台对小程序内的收集用户隐私行为进行规范&#xff0c;开发者可自查所涉及的违规内容&#xff0c;并参照修改指引进行相应整改。 常见违规内容 一、隐私政策协议默示同意 小程序在收集用户数据前&#xff0c;…

【高级程序设计语言C++】二叉搜索树

1. 二叉搜索树的概念2. 二叉搜索树的功能2.1. 二叉搜索树的简单模型2.2. 二叉搜索树的查找2.3. 二叉搜索树的插入2.4. 二叉搜索树的删除 3. 二叉搜索树的性能分析 1. 二叉搜索树的概念 二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称BST&#xff09;是一种常见的二…

【C/C++】类之间的纵向关系——继承的概念

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

C++——继承(2)详解

目录 一.子类和父类对象的赋值转换 子类对象赋值父类对象的另外两种方式&#xff1a; 总结&#xff1a; 二.父类与子类的作用域 1. 在继承体系中基类和派生类都有独立的作用域。 例&#xff1a; 2.作用域练习 练习1&#xff1a; 解决方法: 一.子类和父类对象的赋值转换 …

深入理解Java类加载机制中的双亲委派模型--根据源码探讨

前言&#xff1a; 今天和大家探讨一道Java中经典的面试题&#xff0c;这道面试题经常出现在各个公司的面试中&#xff0c;本篇文章主要讲解ava类加载机制中的双亲委派模型的知识。该专栏比较适合刚入坑Java的小白以及准备秋招的大佬阅读。 如果文章有什么需要改进的地方欢迎大…

Cesium态势标绘专题-三角旗标、矩形旗标、曲线旗标(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

前端JavaScript作用域详解

目录 前言 什么是作用域 作用域类型 全局作用域 局部作用域 块级作用域 ES6之前 ES6以后 作用域链 变量提升 基础概念 优先级问题 闭包 定义 特点 使用场景 封装私有变量 延长变量周期 模块化、命名空间 缓存 ES6的作用域 const、let 块级作用域 变量提…

tinymce4/5实现将word中内容(文字图片等)直接粘贴至编辑器中——利用插件tinymce-powerpaste-plugin

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有&#xff1a;UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势&#xff1a; 开源可商用&#xff0c;基于LGPL2.1 插件丰富&#xff0c;自带插件基本涵盖日常…

关于时序图

时序图 01 什么是时序图&#xff1f;02 时序图的组成元素2.1 对象2.2 生命线2.3 消息 03 如何绘制 01 什么是时序图&#xff1f; 时序图是UML交互图中的一类&#xff0c;又名序列图、顺序图。 用于描述对象之间的传递消息的时间顺序&#xff08;包括发送消息、接收消息、处理…

一个女程序员的成长之路

2013年大学毕业了&#xff0c;带着迷茫与好玩&#xff0c;我还年轻的心态&#xff0c;开始在郑州寻觅工作机会&#xff0c;最后很荣幸的在一家小公司入职了&#xff0c;工作的内容是给种植大棚的用户打电话&#xff0c;推销农药。每天就是在网上各种农业平台上面找号码&#xf…

ASIC-WORLD Verilog(11)过程时序控制

写在前面 在自己准备写一些简单的verilog教程之前&#xff0c;参考了许多资料----Asic-World网站的这套verilog教程即是其一。这套教程写得极好&#xff0c;奈何没有中文&#xff0c;在下只好斗胆翻译过来&#xff08;加了自己的理解&#xff09;分享给大家。 这是网站原文&…

【vue】vue中Mixins的用法(jeecg-boot为例):

文章目录 一、jeecg-boot本身只有JeecgListMixin.js二、使用Mixin:三、mixins详解&#xff1a;【1】由于每个项目的接口和参数不同>这里引进js进行处理&#xff0c;不在Mixin里面处理了&#xff08;Mixin只做公共数据处理&#xff09;【2】公共的页面字典【3】解决方法里面不…

2009年上半年 软件设计师 上午试卷3

●下图属于UML 中的&#xff08;46),其中&#xff0c;AccountManagement 需要&#xff08;47)。 (46)A.组件图 B.部署图 C.类图 D.对象图 (47)A.实现 IdentityVerifier 接口并被 CreditCardServices 调用 B.调用 CreditCardServices 实现的 Identity Verifier 接口 C.实现 I…

设计模式大白话——装饰者模式

装饰者模式 文章目录 装饰者模式一、概述二、应用场景三、代码示例四、小结 一、概述 ​ 装饰者模式&#xff0c;此模式最核心之处在于装饰二字&#xff0c;之所以需要装饰&#xff0c;是因为基础的功能无法满足需求&#xff0c;并且装饰是临时的&#xff0c;并不是永久的&…

基于Java+spring+springMvc+mybatis+jsp学生选课管理系统

基于JavaspringspringMvcmybatisjsp学生选课管理系统 一、系统介绍二、功能展示1.课程列表(学生)2.已选课程(学生)3.已修课程(学生)4.我的课程&#xff08;老师&#xff09;5.课程打分&#xff08;老师&#xff09;6.课程管理、学生管理、教师管理&#xff08;系统管理员&#…

python字典:怎么取出key对应的值

目录 python中的字典是什么 怎么判断key是否在字典中 怎么取出key对应的值 总结 python中的字典是什么 在Python中&#xff0c;字典&#xff08;Dictionary&#xff09;是一种无序且可变的数据类型&#xff0c;用于存储键-值&#xff08;Key-Value&#xff09;对。字典通过…