【uniapp】文件授权验真系统(含代码)

在这里插入图片描述

文章目录

  • 前言
  • 一、框架选用
  • 二、数据库设计
  • 三、设计上传列表
  • 四、上传操作
    • 1.前端
    • 2.后端
  • 五、修改操作
  • 六、访问操作
  • 七、二维码生成
  • 八、二维码访问
  • 九、删除操作
  • 总结

前言

吐槽：终于开通了【资源绑定】的功能了，之前还要一个一个的去贴链接
在这里插入图片描述

之前的同学联系我说，他们公司想做一个能将客户的证明材料通过二维码扫描显示验真结果的一个系统（经他们公司核对无误后的验真），这个功能不难开发，我们先梳理一下思路：

  1. 设计上传后显示的文件列表
  2. 具有替换、访问、删除、生成二维码、插入的功能
  3. 二维码扫描后显示验真结果

一、框架选用

这里用的是黄河爱浪大佬的B-ui插件
在这里插入图片描述

二、数据库设计

由于项目比较简单，只用了一个表
在这里插入图片描述

数据表字段说明
id自增id
name文件名（废弃）
path_name文件路径
cre_time创建时间

三、设计上传列表

在这里插入图片描述
index.vue

<template>
	<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">B-ui 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.cre_time}}</view>
				</view>
				<view class="btns-box">
					<button class="b-btn b-btn-blue b-btn-sm" @click="jumps_edit(item.id)">改</button>
					<button class="b-btn b-btn-blue b-btn-sm" @click="jump(item.path_name)" style="margin-left: 10rpx;">访</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>

四、上传操作

在这里插入图片描述

1.前端

视图

<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>

js

upload(){
let that=this;
console.log("我被点击了");
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
console.log(tempFilePaths);
uni.uploadFile({
url: 'http://fzj.taila.club/upload.php', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
// name:that.name
},
methods:"POST",
success: (uploadFileRes) => {
let json_data = JSON.parse(uploadFileRes.data)
console.log(uploadFileRes);
if (json_data['errCode']==0) {
uni.showToast({
title: json_data['error_message'],
icon:'none',
duration: 2000
});
} else{

}

that.get_list();
}
});
}
});

},

2.后端

<?php 
include 'conn.php';
// 上传图片 
function uploadimg($conn) { 
    $file = $_FILES['file'];
    // $name = $_REQUEST['name'];
    if ($file) { 
        // 获取文件后缀名
        $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
        // 创建随机文件夹
        $folder = 'upload/' . uniqid();
        if (!is_dir($folder)) {
            mkdir($folder, 0777, true);
        }
        // 生成文件名
        $filename = '验证结果.' . $ext;
        $target = $folder . '/' . $filename;
        // 转移图片地址
        if (!move_uploaded_file($file['tmp_name'], $target)) {
            $GLOBALS['error_message'] = '上传图片失败';
            echo error_message;
        }
        $sql="INSERT INTO `img_` (`id`, `name`, `path_name`, `cre_time`) VALUES (NULL, '', '$target', CURRENT_TIMESTAMP)";
        $resss=$conn->query($sql);
        die(
            json_encode(
                array(
                    'errCode' => 0,
                    'error_message'=>'图片上传成功',
                    'file'=>$target
                ),480)
        );
    }
}

uploadimg($conn);
?>

五、修改操作

在这里插入图片描述

因为他们可能会对，已经上传了的文件进行替换，所以替换需要根据记录id来进行修改，将新的文件替换对应记录

所以，只需要前端传值对应的id即可

<button class="b-btn b-btn-blue b-btn-sm" @click="jumps_edit(item.id)">改</button>

js
进行图片上传，将新的地址对应id修改到数据库中

jumps_edit(id){
console.log(id)
uni.showToast({
title:'选择一张图片进行替换',
icon:'none'
})
setTimeout(function() {}, 1200);
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
console.log(tempFilePaths);
uni.uploadFile({
url: 'http://fzj.taila.club/upload_edit.php', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
id:id
},
methods:"POST",
success: (uploadFileRes) => {
let json_data = JSON.parse(uploadFileRes.data)
console.log(uploadFileRes);
if (json_data['errCode']==0) {
uni.showToast({
title: json_data['error_message'],
icon:'none',
duration: 2000
});
uni.showToast({
title:'替换成功刷新生效',
icon:'none'
})

} else{
}
that.get_list();
}
});
}
});



}

六、访问操作

在这里插入图片描述

首页点击访问视图

<button class="b-btn b-btn-blue b-btn-sm" @click="jump(item.path_name)" style="margin-left: 10rpx;">访</button>

点击事件js

jumps(path){
console.log(path)
uni.navigateTo({
url:'/pages/qrcode/qrcode?path='+path
})
},

新建一个vue文件，将前端传过来的path与域名拼接即可，得到完整的文件地址,在onload事件中接收即可

video.vue

<template>
    <view>
      <view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
      	<image :src="src" mode="widthFix" style="margin: auto;"></image>
      </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            src: ''
        }
    },
   
	onLoad(options) {
		this.src="http://fzj.taila.club/"+options.path
		
	},
    methods: {
      
    }
}
</script>

七、二维码生成

二维码生成用的链接可以是图片的url或者是上面访问操作的页面，但是客户要的效果是这个样子的：
在这里插入图片描述
也就是，标题必须是验真结果
所以就必须还要新建一个HTML用于显示标题，还要将图片显示出来

新建qrcode.vue文件
这里采用了qocode插件，具体是哪一个我忘记了，可以下载资源包看
二维码的url，对应拼接一下就行，例如：
"http://域名/show.php?id="+options.path，这里options.path在后面改成了id，因为替换的路径会变会导致二维码生成的图片不唯一，改成id用id去查询即可

<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: 'http://www.taila.club', // 要生成的二维码值
				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="http://fzj.taila.club/show.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>

八、二维码访问

二维码生成后，访问到"http://域名/show.php文件
新建show.php

<?php
include("conn.php");
?>
<!DOCTYPE html>
<html>
<head>
    <title>验真结果查询</title>
</head>
<body>
    <?php
     $id=$_GET['id'];
    // 图片路径
    
    $sql="SELECT `path_name` FROM `img_` WHERE `id`='$id'";
    $res=$conn->query($sql);
    if ($row=mysqli_fetch_assoc($res)) {
        // code...
        $imagePath = $row['path_name'];

    // 获取图片的宽度和高度
    list($width, $height) = getimagesize($imagePath);

    // 设置网页标题
    echo '<script>document.title = "验真结果";</script>';

    // 加载图片
    // echo '<div style="display: flex;justify-content: center;">';
    echo '<img src="' . $imagePath . '" alt="图片">';
    // echo '</div>';
    } else {
       die("查询不到数据");
    }
    
    
    
    ?>
</body>
</html>

在加载图片的时候将标题改为“验真结果”

 // 设置网页标题
    echo '<script>document.title = "验真结果";</script>';

九、删除操作

同理，根据id删除数据库记录即可

首页视图层

<button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="delete_(item.id)">删</button>

新建delete.php

<?php
include('conn.php');
if ($_POST) {
$id=$_POST['id'];
$sql="DELETE FROM `img_` WHERE `id` = '$id'";
$re=$conn->query($sql);
 die(
        json_encode(
            array(
            'code' => 100,
            'msg' => '删除成功'
        ),480)
);
} else {
   die(
        json_encode(
            array(
            'code' => 200,
            'msg' => '缺少参数'
        ),480)
);
}

总结

以上就是今天记录的内容，本文仅仅简单介绍了文件授权验真系统的制作过程，具体的资源包下载在这里。

喜欢爬虫类文章的可以订阅我专栏哦
⭐⭐欢迎订阅⭐⭐ ⭐⭐欢迎订阅⭐⭐
🚀Python爬虫项目实战系列文章！！
⭐⭐欢迎订阅⭐⭐ ⭐⭐欢迎订阅⭐⭐

🚀Python爬虫项目实战系列文章！！
⭐⭐往期文章⭐⭐

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

⭐⭐往期文章⭐⭐

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Java12新增特性

Java12新增特性

前言 前面的文章&#xff0c;我们对Java9、Java10、Java11的特性进行了介绍&#xff0c;对应的文章如下 Java9新增特性 Java10新增特性 Java11新增特性 今天我们来介绍一下Java12版本的新增特性 版本介绍 Java 12是Java SE的第12个版本&#xff0c;于2019年3月19日发布。这个…
阅读更多...
口袋参谋：新品上架如何实现月销1w?

口袋参谋：新品上架如何实现月销1w?

​如今在淘宝天猫上&#xff0c;开新店上新品&#xff0c;想要出单是很不容易的。很多商家在新品上架之后&#xff0c;都是非常焦虑的&#xff0c;总是在担心一直没销量该咋办&#xff1f; 以下这几个方法&#xff0c;大家不妨尝试一下&#xff1b; ①打造店铺和产品人群的一致…
阅读更多...
MYSQL5.7和MYSQL8配置主从

MYSQL5.7和MYSQL8配置主从

1、创建专门主从的账号 #登录 mysql -u root -p #创建用户 我这里用户名为test5&#xff0c;注意这里的ip是从库服务器的ip CREATE USER test5192.168.1.20 IDENTIFIED WITH mysql_native_password BY xxxxx; #给主从复制账号授权 grant replication slave on *.* to test5192…
阅读更多...
基于Qt Linux开发板USER-KEY按键实现

基于Qt Linux开发板USER-KEY按键实现

介绍如何在 Qt 应用上使用嵌入式 GET6818 Linux 开发板 上的按键。 工具：Qt Creator 5.14.2 平台：windows ## 资源简介 在GET6818 开发板，开发板板载资源上有两个用户按键。如下图原理图（下图开发板的按键原理图）。 ## 应用实例 想要监测这个 KEY0，首先出厂内核已经…
阅读更多...
Spring的缓存机制-循环依赖

Spring的缓存机制-循环依赖

群公告 Java每日大厂面试题&#xff1a; 1、Spring 是如何解决循环依赖&#xff1f; 答案&#xff1a;三级缓存&#xff0c;简单来说&#xff0c;A创建过程中需要B&#xff0c;于是A将自己放到三级缓存里面&#xff0c;去实例化B&#xff0c;B实例化的时候发现需要…
阅读更多...
01 计算机图形学概述

01 计算机图形学概述

什么是图形学 合成和操作视觉信息。 图形学的应用 游戏 电影 动画 模拟 设计 可视化 虚拟现实VR&增强现实AR 电子绘画 图形化UI 字体 图形学的挑战 思维上的挑战 创建与虚拟世界互动需要了解物理世界的各个方面新的计算方法&#xff0c;显示&#xff0c;技术 技术上…
阅读更多...
SpringBoot不同环境加载不同配置文件(dev,sit,uat)

SpringBoot不同环境加载不同配置文件(dev,sit,uat)

目录 一、springboot的profile配置profile多配置文件 二、maven的profiles策略 我们在使用spring的时候&#xff0c;一般都会有不同的环境需要部署&#xff1a;开发环境、测试环境和验收环境&#xff0c;而不同的环境则会有不同的配置&#xff0c;比如数据库ip。解决这个问题&a…
阅读更多...
视频批量剪辑：视频合并技巧全攻略，成为视频剪辑专家

视频批量剪辑：视频合并技巧全攻略，成为视频剪辑专家

在视频制作的过程中&#xff0c;我们常常会遇到需要将多个视频片段合并的需求。这不仅涉及到视频的排列和组合&#xff0c;还需要考虑过渡效果、音频同步等因素。在视频制作过程中&#xff0c;视频批量剪辑是一个非常关键的环节。它可以大大提高工作效率&#xff0c;减少重复劳…
阅读更多...
经典OJ题：奇偶链表

经典OJ题：奇偶链表

目录 题目&#xff1a; 示例&#xff1a; 解题思路&#xff1a; 方法一&#xff1a;双链表链接法 图例&#xff1a; 代码演示&#xff1a; 解题效果&#xff1a; 方法二&#xff1a;奇偶指针 图例&#xff1a; 代码演示&#xff1a; 题目&#xff1a; 给定单链表…
阅读更多...
双H桥直流马达步进电机驱动芯片SS8833E

双H桥直流马达步进电机驱动芯片SS8833E

由工采网代理的率能SS8833E是一款适用于有刷直流或双极步进电机的集成电机驱动芯片&#xff1b;采用eTSSOP16封装&#xff1b;该器件集成了两个PNMOS H桥和电流调节电路&#xff1b;电机输出电流可以由外部脉宽调制器&#xff08;PWM&#xff09;或内部PWM电流控制器控制。 工…
阅读更多...
【Swagger 】提示 ‘Unable to find specification for group default‘

【Swagger 】提示 ‘Unable to find specification for group default‘

接口文档用的好好的&#xff0c;突然就开始找不到模块 问题记录 1. 接口文档访问不了 swagger 提示 ‘Unable to find specification for group default’ unable to find specification for group default 找不到组默认值的规范 原因&#xff1a;实体类里面是属性使用public…
阅读更多...
补坑：Java的字符串String类（2）：一些OJ题目

补坑：Java的字符串String类（2）：一些OJ题目

有关String的方法可以看看我上一篇博客 补坑&#xff1a;Java的字符串String类&#xff08;1&#xff09;-CSDN博客 387. 字符串中的第一个唯一字符 - 力扣&#xff08;LeetCode&#xff09; 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它…
阅读更多...
计算机提示找不到xinput1_3.dll怎么办？6个xinput1_3.dll丢失完美解决方案分享

计算机提示找不到xinput1_3.dll怎么办？6个xinput1_3.dll丢失完美解决方案分享

xinput1_3.dll是Windows操作系统中的一个重要动态链接库文件&#xff0c;它负责处理游戏控制器和其他输入设备的相关功能。当计算机出现xinput1_3.dll缺失的问题时&#xff0c;可能会导致无法正常使用游戏控制器或其他输入设备。下面是针对这个问题的6个解决方法&#xff1a; 方…
阅读更多...
物联网AI MicroPython学习之语法 uhashlib哈希算法

物联网AI MicroPython学习之语法 uhashlib哈希算法

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; uhashlib 介绍 实现二进制数据散列算法&#xff0c;支持sha256&#xff0c;sha1&#xff0c;MD5。 接口介绍 sha256 - 创建一个SHA256哈希对象 参数原型&#xff1a;hash_obj uhashlib.sha256([bytes]) …
阅读更多...
时序预测 | MATLAB实现WOA-CNN-GRU-Attention时间序列预测（SE注意力机制）

时序预测 | MATLAB实现WOA-CNN-GRU-Attention时间序列预测（SE注意力机制）

时序预测 | MATLAB实现WOA-CNN-GRU-Attention时间序列预测&#xff08;SE注意力机制&#xff09; 目录 时序预测 | MATLAB实现WOA-CNN-GRU-Attention时间序列预测&#xff08;SE注意力机制&#xff09;预测效果基本描述模型描述程序设计参考资料 预测效果 基本描述 1.MATLAB实现…
阅读更多...
threejs(11)-shader着色器打造漫天飞舞孔明灯

threejs(11)-shader着色器打造漫天飞舞孔明灯

src/main/main.js import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import gsap from "gsap"; // 动画库 import vertexShader from "../shaders/flylight/vertex.glsl"…
阅读更多...
类和对象(2)：构造函数，析构函数

类和对象(2)：构造函数，析构函数

一、构造函数 1.1 概念 构造函数是一种特殊的成员函数&#xff0c;名字与类名相同&#xff0c;创建类类型对象时编译器自动调用——初始化对象&#xff0c;在对象整个生命周期内只调用一次。 PS: 1. 构造函数无返回值&#xff1b;2. 构造函数支持重载。 class Date { public:…
阅读更多...
Image透明度点击简述以及Unity2019之后存在无法点击的BUG修复

Image透明度点击简述以及Unity2019之后存在无法点击的BUG修复

前言 自Unity2019之后Unity将UGUI模块从内置库修改成了通过PackageManger引入的方式。Image就来源于com.unity.modules.imgui模块。其实代码大体代码跟2018是一致的&#xff0c;但是还是有些细微差别&#xff0c;Image透明度点击不命中就是2019之后才有的问题&#xff0c;2018…
阅读更多...
提升中小企业效率的不可或缺的企业云盘网盘

提升中小企业效率的不可或缺的企业云盘网盘

相比之大型企业&#xff0c;中小型企业在挑选企业云盘工具更注重灵活性和成本。那么市面上有哪些企业云盘产品更适合中小企业呢&#xff1f; 说起中小企业不能错过的企业云盘网盘&#xff0c;Zoho Workdrive企业云盘绝对榜上有名&#xff01; Zoho Workdrive企业云盘为用户提…
阅读更多...
打印图形

打印图形

题目描述 由键盘输入一个大写字母 ( 到 中的任意一个 ) &#xff0c;输出如下图所示由相关大写字母组成的图形。 所输入的字母一定为输出文件的第一个字符( 位于图形的左上角 ) &#xff0c;其余部分的字母构成规律和分布由样例给出。 输入格式 一行&#xff0c;仅为一个大写…
阅读更多...
最新文章

Copyright @ 2022~2023