首页 > 其他分享 >FastAdmin前端开发——词条生成二维码

FastAdmin前端开发——词条生成二维码

时间:2024-08-25 23:22:55浏览次数:12  
标签:index 词条 文件 id 二维码 html FastAdmin 前端开发 view

一、前端开发基础文件

序号文件路径功能
1application/index/controller控制器文件
2application/index/lang/zh-cn语言包
3application/index/model模型文件
4application/index/view/common/sidenav.html左侧菜单栏
5application/index/view/index.html右侧列表视图
6application/index/view/add.html添加页面视图
7application/index/view/edit.html编辑页面视图
8application/index/view/detail.html查看页面视图
9public/assets/js/frontend功能模块JS文件

二、生成二维码操作效果图

三、新增二维码按钮

(1)文件位置:application/index/view/你自己的菜单名/index.html
(2)增加代码:
<a href="javascript:;" data-id="{$list.id}" class="btn btn-success btn-xs btn-qrcode" data-toggle="tooltip" title="生成二维码"><i class="fa fa-qrcode"></i></a>
(3)如下图:

 四、增加对应的点击事件

(1)文件位置:public/assets/js/frontend/菜单名.js
(2)增加代码:
$(".btn-qrcode").click(function(e){
                let id = $(this).data('id');
                e.stopPropagation();
                e.preventDefault();
                Fast.api.ajax({
                    url: '/api/index/createQrcode',
                    data: {
                        id: id
                    },
                    type: 'post'
                }, function (data, ret) {
                      layer.open({
                          title: '二维码',
                          offset: '100px',
                          btn: ['下载二维码']
                          ,content: `<img src="${data.path}" width="300"/>`,
                          yes: function(index, layero){
                            downFile(data.path);
                            //do something
                            layer.close(index); //如果设定了yes回调,需进行手工关闭
                          }
                      });
                });
            })
(3)如下图:

 五、生成二维码接口

(1)文件位置:application/api/controller/index.php
(2)增加代码:
public function createQrcode(){
        if ($this->request->isPost()) {
            $id = $this->request->param('id');
            if (empty($id)) {
                $this->error('参数不能为空!');
            }
            $infourl = url('index/jisuan/viewinfo','id='.$id,'html',true);
            require_once EXTEND_PATH.'phpqrcode/phpqrcode.php';
            // 容错级别
            $errorCorrectionLevel = 'L';
            // 生成图片大小
            $matrixPointSize = 6;
            // 生成二维码图片
            $object = new \QRcode();
            
            //二维码图片保存路径
            $pathname = APP_PATH . '/../public/upload/';
            if (!is_dir($pathname)) { //若目录不存在则创建之
                mkdir($pathname);
            }
            //二维码图片保存路径(若不生成文件则设置为false)
            $name = "/qrcode_" . time() . ".png";
            $filename = $pathname . $name;
            //二维码容错率,默认L
            $level = "L";
            //二维码图片每个黑点的像素,默认4
            $size = '10';
            //二维码边框的间距,默认2
            $padding = 2;
            //保存二维码图片并显示出来,$filename必须传递文件路径
            $saveandprint = true;
            //生成二维码图片
            $object::png($infourl, $filename, $level, $size, $padding, $saveandprint);
            
            $request = Request::instance();
            // 获取应用根域名
            $domain = $request->root();
            // 拼接成完整的域名路径
            $fullPath = $domain . '/upload' . $name;
            
            $this->success('',['path'=>$fullPath]);
        }
   }
(3)如下图:

 六、生成二维码依赖的插件

(1)文件位置:extend/phpqrcode/phpqrcode.php
(2)增加代码:整个文件都是新加的,上传代码包资源
(3)如下图:

七、新增扫码查看详情页面

(1)文件位置:application/index/controller/菜单名.php
(2)增加代码:
 public function viewinfo($id){
        $row = $this->model->get($id);
        if (!$row) {
            $this->error(__('No Results were found'));
        }
        $this->view->assign('title', __('查看详情'));
        $this->view->assign("row", $row);
        return $this->view->fetch('info');
   }
(3)如下图:

七、编写扫码后手机显示详情页面文件

(1)文件位置:application/index/view/菜单名/info.html
(2)增加代码:
<link rel="stylesheet" href="__CDN__/assets/addons/workorder/css/detail.css">
<div class="container">
    <div id="content-container" class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                        <div class="row">
                            <div class="panel panel-default">
                              <div class="panel-heading">查看详情</div>
                              <div class="panel-body">
                              </div>
                              <ul class="list-group">
                                <li class="list-group-item">
                                    <div class="row">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('项目名称')}:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            {$row.project_name|htmlentities}
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('上传人')}:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            {$row.uploader|htmlentities}
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Attachfile')}:</label>
                                        <div class="col-xs-12 col-sm-4">
                                            <a href="{$row.attachfile|htmlentities}" class="thumbnail" target="_blank">
                                              <img src="{$row.attachfile|htmlentities}" alt="">
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Tb_time')}:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            {$row.tb_time|htmlentities}
                                        </div>
                                    </div>
                                </li>
                              </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
(3)如下图:

八、将网址上传服务器

将系统网址上传服务器后,手机扫描网站上生成的二维码,就能显示每一词条的详情页面了。

如下图所示:

标签:index,词条,文件,id,二维码,html,FastAdmin,前端开发,view
From: https://blog.csdn.net/pi_pi_lin/article/details/141536047

相关文章

  • FastAdmin目录穿越 CVE-2024-7928
    0x01漏洞描述:FastAdmin是一款基于ThinkPHP+Bootstrap开发的快速后台开发框架。FastAdmin基于Apache2.0开源协议发布,免费且不限制商业使用,目前被广泛应用于各大行业应用后台管理。其接口lang存在目录穿越漏洞,攻击者可通过该漏洞获取系统库敏感信息。0x02影响版本:FastAdmin......
  • 前端开发中的大屏布局方案:使用 rem 单位与动态设置 html 的 font-size
    使用rem单位与动态设置html的font-size前言随着设备尺寸的多样化,网页需要能够在不同大小的屏幕上提供良好的用户体验。传统的布局方式(如使用px)在不同分辨率下可能会导致布局失真。为了解决这个问题,我们可以通过动态设置html元素的font-size并使用rem单位来构......
  • Prettier+Vscode setting提高前端开发效率
    文章目录前言Prettier第一步:下载依赖(团队合作)或下载插件(独立开发)第二步:添加.prettierrc.json文件**以下是我使用的****配置规则**第三步:添加.prettierignore文件**以下是我常用的****配置规则**总结PrettierVSCode中setting设置常见的setting设置配置解释1.编辑器配......
  • 国内Vue.js前端开发的未来:机会与挑战分析
    引言Vue.js是一款渐进式JavaScript框架,因其简单易用、灵活性强而备受开发者青睐。自2014年发布以来,Vue.js在国内外社区中迅速崛起,成为了热门的前端框架之一。本文将深入分析当前国内Vue.js开发的市场行情、未来发展趋势,以及大龄程序员如何在这一领域实现职业提升和转型。......
  • 微信答题小程序产品研发-前端开发
    开发一款答题小程序界面,涉及到的技术栈,主要包括微信小程序的WXML、WXSS、JavaScript等。由于时间有限,我先大致记录一下各个功能模块的基本开发概要,后面有空了再详细整理,分享给大家。1.首页(1)WXML:使用`<view>`标签构建页面结构,包含导航栏、轮播图容器和功能模块入口。(2)WXSS......
  • 【前端领航,简历焕新 —— 前端开发工程师专属简历优化服务】
    手机或电脑浏览器就可以打开,面霸宝典【全拼音】.com这里可以优化简历,模拟面试,企业项目源码,最新最全大厂高并发面试题,项目场景题,算法题,底层原理题在前端技术的浪潮之巅,您是那位勇于探索、不断创新的领航者。每一行代码,都是您智慧的结晶;每一个项目,都见证了您成长的足迹。......
  • 前端开发工程师简历焕新服务 —— 定制专属魅力,引领职场新风尚
    手机或电脑浏览器就可以打开,面霸宝典【全拼音】.com这里可以优化简历,模拟面试,企业项目源码,最新最全大厂高并发面试题,项目场景题,算法题,底层原理题在前端技术的浪潮中,每一位开发工程师都是引领潮流的先锋。但如何在众多求职者中脱颖而出,让招聘者一眼相中?答案在于一份精心......
  • 【匠心打造,前端之路更精彩 —— 前端开发工程师简历优化服务】
    手机或电脑浏览器就可以打开,面霸宝典【全拼音】.com这里可以优化简历,模拟面试,企业项目源码,最新最全大厂高并发面试题,项目场景题,算法题,底层原理题在前端技术的浩瀚宇宙里,您是那位用代码编织梦想、创造未来的探索者。但面对激烈的职场竞争,如何让自己的简历如同璀璨星辰,引......
  • 前端开发中的代码规范
    引言在前端开发中,遵循良好的代码规范是非常重要的。这不仅能提高代码的可读性和可维护性,还能帮助团队成员更好地协作。本文将介绍一些前端开发中常用的代码规范,并探讨它们的重要性。1.代码规范的重要性1.1可读性良好的代码规范可以使代码更易于阅读和理解,这对于维护和调......
  • Web前端开发 CSS常用样式大全
    Web前端开发CSS常用样式大全文章目录1CSS简介2选择器2.1标签选择器2.2类选择器2.3id选择器2.4复合选择器2.4.1后代选择器2.4.2子代选择器2.4.3并集选择器2.4.4交集选择器2.4.5伪类选择器2.5结构伪类选择器2.6伪元素选择器3CSS特性3.1继承性3.2层叠性......