一、前端开发基础文件
序号 | 文件路径 | 功能 |
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)如下图:
八、将网址上传服务器
将系统网址上传服务器后,手机扫描网站上生成的二维码,就能显示每一词条的详情页面了。
如下图所示:
标签:index,词条,文件,id,二维码,html,FastAdmin,前端开发,view From: https://blog.csdn.net/pi_pi_lin/article/details/141536047