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

一、前端开发基础文件

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

八、将网址上传服务器

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

如下图所示：