【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.jpgiconsize: 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 = thisuni.chooseImage({count: 1, //默认9sizeType: ['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还原验证算法-解密某宝伪知网数据接口

⭐⭐往期文章⭐⭐

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

家居美学:将水离子壁炉融入你的现代装饰

当谈及家居装饰和壁炉选择时&#xff0c;水离子雾化壁炉是一个备受瞩目的话题。水离子雾化壁炉的美学价值&#xff0c;还为室内装饰带来全新的维度。它甚至能够激发室内装饰的灵感。 水离子雾化壁炉是现代美学的标志&#xff0c;融合了简洁、线条清晰的设计。这种壁炉常常采用不…

地区 IP 库

地区 & IP 库 yudao-spring-boot-starter-biz-ip (opens new window)业务组件&#xff0c;提供地区 & IP 库的封装。 #1. 地区 AreaUtils (opens new window)是地区工具类&#xff0c;可以查询中国的省、市、区县&#xff0c;也可以查询国外的国家。 它的数据来自 …

React动态生成二维码和毫米(mm)单位转像素(px)单位

一、使用qrcode.react生成二维码&#xff0c;qrcode.react - npm 很简单&#xff0c;安装依赖包&#xff0c;然后引用就行了 npm install qrcode.react或者 yarn add qrcode.react直接上写好的代码 import React, {useEffect, useState} from react; import QRCode from qr…

6.存储器概述,主存储器

目录 一. 存储系统基本概念 &#xff08;1&#xff09;存储系统的层次结构 &#xff08;2&#xff09;分类 &#xff08;3&#xff09;存储器的性能指标 二. 主存储器的基本组成 三. SRAM和DRAM 四. 只读存储器ROM 五. 提升主存速度的方法 &#xff08;1&#xff09;双…

复杂度计算实例

1.常见时间复杂度计算举例 实例1 实例1基本操作执行了2N10次&#xff0c;通过推导大O阶方法知道&#xff0c;时间复杂度为 O(N) 实例2 实例2基本操作执行了MN次&#xff0c;有两个未知数M和N&#xff0c;时间复杂度为 O(NM) 实例3 实例3基本操作执行了100次&#xff0c;通过…

FTP、NFS以及SAMBA服务

一、FTP服务 1、Linux下ftp客户端管理工具 ftp、lftp都是Linux下ftp的客户端管理工具&#xff0c;但是需要独立安装 # yum install ftp lftp -y ☆ ftp工具 # ftp 10.1.1.10 Connected to 10.1.1.10 (10.1.1.10). 220 (vsFTPd 3.0.2) Name (10.1.1.10:root): 输入FTP的账号…

游戏公司数据分析师必备知识(持续补充中...)

1.如何撰写专题报告&#xff1f; ①原则 只有一个主题&#xff1a;即使不讲ppt&#xff0c;业务方也能看得懂行文通俗简单易懂&#xff1a;学习产品经理平常是如何写报告的明确的数据结论和落地项先行&#xff1a;跟业务方多沟通数据结论&#xff0c;让他们给出落地项 ②结构…

【星海随笔】git的使用

1.在终端&#xff0c;检查git是否安装 git --version 2.没有安装的话去&#xff0c;官网&#xff0c;下载git 3.一直点下一步即可 4.安装后在终端检查git是否安装好 5.设置用户名和邮件地址(最好和GitHub的用户名/邮箱保持一致) git config --global user.name “自己的用户名”…

Linux编写一个极简版本的Shell

Linux编写一个极简版本的Shell &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容在Linux环境下&#xff…

Markdown使用教程

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

笔记本电脑的麦克风没有声音

笔记本电脑的麦克风没有声音是一个常见的问题&#xff0c;可能是由于以下几个原因导致的&#xff1a; 第一&#xff0c;麦克风没有启用或者被禁用了。在Windows系统中&#xff0c;右键单击任务栏上的音量图标&#xff0c;选择“录音设备”&#xff0c;在弹出窗口中找到麦克风&a…

Python+Appium自动化测试-编写自动化脚本

一&#xff0c;连接测试手机&#xff0c;获取测试机及被测APP配置 配置信息如下&#xff1a; {"platformName": "Android","platformVersion": "10","deviceName": "PCT_AL10","appPackage": "c…

【技术支持】DevTools中重写覆盖源js文件

sources面板下&#xff0c;左侧overrides标签下添加一个文件夹&#xff0c;并同意。 勾选Enable Local overrides 然后在page标签下&#xff0c;修改文件后ctrls保存 直接就保存在overrides的文件夹下了 或者文件上右键Override content

【leaflet】1. 初见

▒ 目录 ▒ &#x1f6eb; 导读需求开发环境 1️⃣ 概念概念解释特点 2️⃣ 学习路线图3️⃣ html示例&#x1f6ec; 文章小结&#x1f4d6; 参考资料 &#x1f6eb; 导读 需求 要做游戏地图了&#xff0c;看到大量产品都使用的leaflet&#xff0c;所以开始学习这个。 开发环境…

【操作系统内核】线程

【操作系统内核】线程 为什么需要线程 比如我要做一个视频播放器&#xff0c;就需要实现三个功能&#xff1a; ① 从磁盘读取视频数据 ② 对读取到的视频数据进行解码 ③ 对解码的数据进行播放 如果串行执行&#xff08;通过一个进程来执行&#xff09;&#xff1a; 那么…

redis配置文件详解

一、配置文件位置 以配置文件启动 Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf ( Windows名为redis.windows. conf) 例: # 这里要改成你自己的安装目录 cd ./redis-6.0.8 vim redis.conf redis对配置文件对大小写不敏感 二、配置文件 1、获取当前服务的…

CSS特效第一弹:右上角tag标志纯代码前端实现(非图片)

&#x1f60e;效果&#xff1a; &#x1f937;‍♂️思路&#xff1a; 分为2个部分&#xff1a; 1.文字方块右下角折角 文字方块用绝对定位z-index让文字方块悬浮在右上角的位置 2.右下角折角通过before伪元素border属性实现(三角形实现方法&#xff09; &#x1f44d;核心代…

15 # 手写 throttle 节流方法

什么是节流 节流是限制事件触发的频率&#xff0c;当持续触发事件时&#xff0c;在一定时间内只执行一次事件&#xff0c;这个效果跟英雄联盟里的闪现技能释放差不多。 函数防抖关注一定时间连续触发的事件只在最后执行一次&#xff0c;而函数节流侧重于一段时间内只执行一次…

现在个人想上架微信小游戏已经这么难了吗...

点击上方亿元程序员关注和★星标 引言 大家好&#xff0c;最近我突然想起来我还有一款微信小游戏还没有上架&#xff0c;于是捣鼓了一天把游戏完善了一下&#xff0c;然后准备提交审核&#xff0c;却发现异常的艰难… 1.为什么难&#xff1f; 相信大家都大概知道&#xff0c…

畅通工程之局部最小花费问题 (C++)

目录 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 结果 题目&#xff1a; 思路&#xff1a; 详细思路都在代码注释里 。 代码&#xff1a; #include<iostream>//无向图邻接矩阵 #include<map> #include<algorithm> #define mvnum 1005 using …