search

博客列表 >CMS后台管理商城系统（二） 城市管理 广告图片上传 2019年4月10日

CMS后台管理商城系统（二） 城市管理 广告图片上传 2019年4月10日

小明的博客
小明的博客原创
2020年02月22日 12:05:071435浏览

省市区三级城市管理功能、广告中图片上传功能。

一、城市管理功能
这里同之前的功能是一样的，主要说一下流程，然后把该功能独有的特点说一下。

建立省级列表，有添加编辑删除功能，在省级列表中添加按钮，点击跳转到该省下的市级列表，也有添加编辑删除功能，然后以此类推，有该市下面的区的列表。这样就形成了三级城市管理。
有几点需要注意：
1、分别建立3级城市列表的前端展示页，然后共用add save delete功能。实现思路是：在后端add方法中通过get分别得到id fid level，当然如果是省级列表那么fid是没有的只有通过前端列表的add方法get到id和level，市级是通过add方法get到上面3个值；有了这三个值（主要用在新增,因为新增form表单中没有上面这三个值，）需要通过隐藏域post到后端save方法执行数据库操作。
2、在区级城市列表前端页面中，上面的省级列表、市级列表a链接导航，需要注意，市级列表导航需要id参数，这个参数传递给后端two_index方法，从发放中看到需要市级的fid，所以，在three_index方法中需要查询出当前市级城市记录，然后在前端引用该记录的fid值

  1. <?php
  2. /**
  3.  * Created by PhpStorm.
  4.  * User: apple
  5.  * Date: 2020/2/21
  6.  * Time: 10:26 PM
  7.  */
  9. namespace app\admins\controller;
  10. use think\Controller;
  12. //省市区管理
  13. class City extends BaseAdmin
  14. {
  15.     //省列表
  16.     public function one_index() {
  17.         //查询出省列表发送给前端
  18.         $list = $this->db->table('shop_city')->where(array('level'=>1))->lists();
  19.         $this->assign('list', $list);
  20.         return $this->fetch();
  21.     }
  22.     //省添加、编辑
  23.     public function one_add() {
  24.         //接收传过来的id level fid  编辑省的时候fid没有那么就传过来0
  25.         // 市的时候 把省的id通过点击市列表是，get传过来然后赋给给fid给到前端
  26.         // 前端点击add市把 level fid id都传给 one_add
  28.         $id = (int)input('get.id');
  29.         $level = (int)input('get.level');
  30.         $fid =  (int)input('get.fid');
  31.         //查询出该id的省的信息
  32.         $data = $this->db->table('shop_city')->where(array('id'=>$id))->item();
  33.         //把data  level给前端
  34.         $this->assign('data', $data);
  35.         $this->assign('level', $level);
  36.         $this->assign('fid', $fid);
  37.         return $this->fetch();
  38.     }
  39.     //省保存
  40.     public function one_save() {
  41.         //将传过来的数据整理在一起
  42.         $id = (int)input('post.id');
  43.         $data['name'] = trim(input('post.name'));
  44.         $data['initials'] = trim(input('post.initials'));
  45.         $data['sort'] = (int)input('post.sort');
  46.         $data['status'] = (int)input('post.status');
  47.         //判断 如果id存在那么就是修改执行更新操作
  48.         if ($id) {
  49.             $res = $this->db->table('shop_city')->where(array('id'=>$id))->update($data);
  50.         } else {
  51.             //如果id不存在 那么就是新增需要把level fid 和data插入
  52.             $data['level'] = (int)input('post.level');
  53.             $data['fid'] = (int)input('post.fid');
  54.             $res = $this->db->table('shop_city')->insert($data);
  55.         }
  56.         if ($res) {
  57.             exit(json_encode(array('code'=>0, 'msg'=>'保存成功')));
  58.         } else {
  59.             exit(json_encode(array('code'=>1, 'msg'=>'保存失败')));
  60.         }
  61.     }
  62.     //省删除
  63.     public function one_del() {
  64.         $id = (int)input('post.id');
  65.         //16 执行删除操作
  66.         $res = $this->db->table('shop_city')->where(array('id'=>$id))->delete();
  67.         if (!$res) {
  68.             exit(json_encode(array('code'=>1, 'msg'=>'删除失败')));
  69.         }
  70.         exit(json_encode(array('code'=>0, 'msg'=>'删除成功')));
  71.     }
  72.     //市列表
  73.     public function two_index() {
  74.         $fid = (int)input('get.id');
  75.         //查找fid下的所有市级城市记录
  76.         $list = $this->db->table('shop_city')->where(array('fid'=>$fid))->lists();
  77.         $this->assign('list', $list);
  78.         $this->assign('fid', $fid);
  79.         return $this->fetch();
  80.     }
  81.     //区列表
  82.     public function three_index() {
  83.         $fid = (int)input('get.id');
  84.         //找到fid的时机城市记录
  85.         $two_city = $this->db->table('shop_city')->where(array('id'=>$fid))->item();
  86.         //查找fid下的所有市级城市记录
  87.         $list = $this->db->table('shop_city')->where(array('fid'=>$fid))->lists();
  88.         $this->assign('list', $list);
  89.         $this->assign('two_city', $two_city);
  90.         $this->assign('fid', $fid);
  91.         return $this->fetch();
  92.     }
  93. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  7.     <style type="text/css">
  8.         .header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
  9.         .header div{border-bottom: solid 2px #009688;margin-top: 8px;}
  10.         .header button{float: right;margin-top: -5px;}
  11.     </style>
  12. </head>
  13. <body style="padding: 10px;">
  14. <div class="header">
  15.     <span>省列表</span>
  16.     <button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
  17.     <div></div>
  18. </div>
  20. <table class="layui-table">
  21.     <thead>
  22.     <tr>
  23.         <th>ID</th>
  24.         <th>名称</th>
  25.         <th>首字母</th>
  26.         <th>状态</th>
  27.         <th>市列表</th>
  28.         <th>操作</th>
  29.     </tr>
  30.     </thead>
  31.     <tbody>
  32.     <!-- 循环出所有省记录       -->
  33.     {volist name="list" id="vo"}
  34.     <tr>
  35.         <td>{$vo.id}</td>
  36.         <td>{$vo.name}</td>
  37.         <td>{$vo.initials}</td>
  38.         <td>{if condition="$vo.status == 1"}<span style="color: green;">开启</span>{else/}<span style="color: red;">关闭</span>{/if}</td>
  39.         <td>
  40.             <button class="layui-btn layui-btn-xs" onclick="url({$vo.id})">此省——城市列表</button>
  41.         </td>
  42.         <td>
  43.             <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button>
  44.             <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
  45.         </td>
  46.     </tr>
  47.     {/volist}
  48.     </tbody>
  49. </table>
  51. <script type="text/javascript">
  52.     layui.use(['layer'],function(){
  53.         layer = layui.layer;
  54.         $ = layui.jquery;
  55.     });
  57.     // 添加编辑
  58.     function add(id) {
  59.         layer.open({
  60.             type: 2,
  61.             title: id>0 ? '编辑省' : '添加省',
  62.             shade: 0.3,
  63.             area: ['480px', '420px'],
  64.             content: '/index.php/admins/City/one_add?id='+id+'&level=1'
  65.         });
  66.     }
  67.     //分类下的广告列表
  68.     function url(id) {
  69.         window.location.href = "/index.php/admins/City/two_index?id="+id;
  70.     }
  72.     // 删除
  73.     function del(id) {
  74.         layer.confirm('确定要删除吗？', {
  75.             icon: 3,
  76.             btn: ['确定', '取消']
  77.         }, function () {
  78.             $.post('/index.php/admins/City/one_del', {'id':id}, function (res) {
  79.                 if (res.code > 0) {
  80.                     layer.alert(res.msg, {icon:2});
  81.                 } else {
  82.                     layer.msg(res.msg);
  83.                     setTimeout(function () {
  84.                         window.location.reload();
  85.                     }, 1000)
  86.                 }
  87.             }, 'json');
  88.         });
  89.     }
  90. </script>
  91. </body>
  92. </html>
  93. ``````html
  94. <!DOCTYPE html>
  95. <html>
  96. <head>
  97.     <title></title>
  98.     <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  99.     <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  100. </head>
  101. <body style="padding: 10px;">
  102. <form class="layui-form">
  103.     <!-- hidden 是把input框隐藏，它的作用是把一些隐藏信息传值到接口中 -->
  104.     <input type="hidden" name="id" value="{$data.id}">
  105.     <input type="hidden" name="level" value="{$level}">
  106.     <input type="hidden" name="fid" value="{$fid}">
  107.     <div class="layui-form-item">
  108.         <label class="layui-form-label">名称</label>
  109.         <div class="layui-input-inline">
  110.             <!-- value 是默认值 -->
  111.             <!-- 当添加时，传值是0，默认值是空 -->
  112.             <!-- readonly 是input里的一个参数，可以禁用input框，只有在修改用户时，才使用 -->
  113.             <input type="text" class="layui-input" name="name" value="{$data.name}">
  114.         </div>
  115.     </div>
  117.     <div class="layui-form-item">
  118.         <label class="layui-form-label">首字母</label>
  119.         <div class="layui-input-inline">
  120.             <input type="text" class="layui-input" name="initials" value="{$data.initials}">
  121.         </div>
  122.     </div>
  123.     <div class="layui-form-item">
  124.         <label class="layui-form-label">排序</label>
  125.         <div class="layui-input-inline">
  126.             <input type="text" class="layui-input" name="sort" value="{$data.sort}">
  127.         </div>
  128.     </div>
  129.     <div class="layui-form-item">
  130.         <label class="layui-form-label">状态</label>
  131.         <div class="layui-input-inline">
  132.             <input type="checkbox" name="status" lay-skin="primary" title="开启" value="1" {$data.status==1 || !$data ?'checked':''}>
  133.         </div>
  134.     </div>
  135. </form>
  136. <div class="layui-form-item">
  137.     <div class="layui-input-block">
  138.         <button class="layui-btn" onclick="save()">保存</button>
  139.     </div>
  140. </div>
  142. <script type="text/javascript">
  143.     layui.use(['layer','form'],function(){
  144.         form = layui.form;
  145.         layer = layui.layer;
  146.         $ = layui.jquery;
  147.     });
  149.     // 保存管理员
  150.     function save(){
  151.         // 用js 获取省名称 首字母
  152.         var name = $.trim($('input[name="name"]').val());
  153.         var initials = $.trim($('input[name="initials"]').val());
  155.         if(name==''){
  156.             layer.alert('请输入省名称',{icon:2});
  157.             return;
  158.         }
  159.         if(initials==''){
  160.             layer.alert('请输入首字母',{icon:2});
  161.             return;
  162.         }
  164.         // 请求保存接口，把数据传值到接口中。
  165.         $.post('/index.php/admins/City/one_save',$('form').serialize(),function(res){
  166.             if(res.code>0){
  167.                 layer.alert(res.msg,{icon:2});
  168.             }else{
  169.                 layer.msg(res.msg);
  170.                 setTimeout(function(){parent.window.location.reload();},1000);
  171.             }
  172.         },'json');
  173.     }
  175. </script>
  176. </body>
  177. </html>
  178. ``````html
  179. <!DOCTYPE html>
  180. <html>
  181. <head>
  182.     <title></title>
  183.     <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  184.     <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  185.     <style type="text/css">
  186.         .header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
  187.         .header div{border-bottom: solid 2px #009688;margin-top: 8px;}
  188.         .header button{float: right;margin-top: -5px;}
  189.     </style>
  190. </head>
  191. <body style="padding: 10px;">
  192. <div class="header">
  193.     <span style="background-color:#999;"><a href="/index.php/admins/City/one_index" style="color:#fff;">省列表</a></span>
  194.     <span>市列表</span>
  195.     <button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
  196.     <div></div>
  197. </div>
  199. <table class="layui-table">
  200.     <thead>
  201.     <tr>
  202.         <th>ID</th>
  203.         <th>名称</th>
  204.         <th>首字母</th>
  205.         <th>状态</th>
  206.         <th>区列表</th>
  207.         <th>操作</th>
  208.     </tr>
  209.     </thead>
  210.     <tbody>
  211.     <!-- 循环出所有省记录       -->
  212.     {volist name="list" id="vo"}
  213.     <tr>
  214.         <td>{$vo.id}</td>
  215.         <td>{$vo.name}</td>
  216.         <td>{$vo.initials}</td>
  217.         <td>{if condition="$vo.status == 1"}<span style="color: green;">开启</span>{else/}<span style="color: red;">关闭</span>{/if}</td>
  218.         <td>
  219.             <button class="layui-btn layui-btn-xs" onclick="url({$vo.id})">此市——区列表</button>
  220.         </td>
  221.         <td>
  222.             <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button>
  223.             <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
  224.         </td>
  225.     </tr>
  226.     {/volist}
  227.     </tbody>
  228. </table>
  230. <script type="text/javascript">
  231.     layui.use(['layer'],function(){
  232.         layer = layui.layer;
  233.         $ = layui.jquery;
  234.     });
  235.     var fid = {$fid};
  236.     // 添加编辑
  237.     function add(id) {
  238.         layer.open({
  239.             type: 2,
  240.             title: id>0 ? '编辑市' : '添加市',
  241.             shade: 0.3,
  242.             area: ['480px', '420px'],
  243.             content: '/index.php/admins/City/one_add?id='+id+'&level=2&fid='+fid
  244.         });
  245.     }
  246.     //分类下的广告列表
  247.     function url(id) {
  248.         window.location.href = "/index.php/admins/City/three_index?id="+id;
  249.     }
  251.     // 删除
  252.     function del(id) {
  253.         layer.confirm('确定要删除吗？', {
  254.             icon: 3,
  255.             btn: ['确定', '取消']
  256.         }, function () {
  257.             $.post('/index.php/admins/City/one_del', {'id':id}, function (res) {
  258.                 if (res.code > 0) {
  259.                     layer.alert(res.msg, {icon:2});
  260.                 } else {
  261.                     layer.msg(res.msg);
  262.                     setTimeout(function () {
  263.                         window.location.reload();
  264.                     }, 1000)
  265.                 }
  266.             }, 'json');
  267.         });
  268.     }
  269. </script>
  270. </body>
  271. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  7.     <style type="text/css">
  8.         .header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
  9.         .header div{border-bottom: solid 2px #009688;margin-top: 8px;}
  10.         .header button{float: right;margin-top: -5px;}
  11.     </style>
  12. </head>
  13. <body style="padding: 10px;">
  14. <div class="header">
  15.     <span style="background-color:#999;"><a href="/index.php/admins/City/one_index" style="color:#fff;">省列表</a></span>
  16.     <span style="background-color:#999;"><a href="/index.php/admins/City/two_index?id={$two_city['fid']}" style="color:#fff;">市列表</a></span>
  17.     <span>区列表</span>
  18.     <button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
  19.     <div></div>
  20. </div>
  22. <table class="layui-table">
  23.     <thead>
  24.     <tr>
  25.         <th>ID</th>
  26.         <th>名称</th>
  27.         <th>首字母</th>
  28.         <th>状态</th>
  29.         <th>操作</th>
  30.     </tr>
  31.     </thead>
  32.     <tbody>
  33.     <!-- 循环出所有省记录       -->
  34.     {volist name="list" id="vo"}
  35.     <tr>
  36.         <td>{$vo.id}</td>
  37.         <td>{$vo.name}</td>
  38.         <td>{$vo.initials}</td>
  39.         <td>{if condition="$vo.status == 1"}<span style="color: green;">开启</span>{else/}<span style="color: red;">关闭</span>{/if}</td>
  40.         <td>
  41.             <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button>
  42.             <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
  43.         </td>
  44.     </tr>
  45.     {/volist}
  46.     </tbody>
  47. </table>
  49. <script type="text/javascript">
  50.     layui.use(['layer'],function(){
  51.         layer = layui.layer;
  52.         $ = layui.jquery;
  53.     });
  54.     var fid = {$fid};
  55.     // 添加编辑
  56.     function add(id) {
  57.         layer.open({
  58.             type: 2,
  59.             title: id>0 ? '编辑市' : '添加市',
  60.             shade: 0.3,
  61.             area: ['480px', '420px'],
  62.             content: '/index.php/admins/City/one_add?id='+id+'&level=3&fid='+fid
  63.         });
  64.     }
  67.     // 删除
  68.     function del(id) {
  69.         layer.confirm('确定要删除吗？', {
  70.             icon: 3,
  71.             btn: ['确定', '取消']
  72.         }, function () {
  73.             $.post('/index.php/admins/City/one_del', {'id':id}, function (res) {
  74.                 if (res.code > 0) {
  75.                     layer.alert(res.msg, {icon:2});
  76.                 } else {
  77.                     layer.msg(res.msg);
  78.                     setTimeout(function () {
  79.                         window.location.reload();
  80.                     }, 1000)
  81.                 }
  82.             }, 'json');
  83.         });
  84.     }
  85. </script>
  86. </body>
  87. </html>
二、图片上传功能
需要在广告列表list前端上添加图片的标签，然后调用到数据库的数据
  1. <thead>
  2.     <tr>
  3.         <th>ID</th>
  4.         <th>广告标题</th>
  5.         <th>图片</th>
  6.         <th>状态</th>
  7.         <th>操作</th>
  8.     </tr>
  9.     </thead>
  10.     <tbody>
  11.     <!-- 循环出所有广告       -->
  12.     {volist name="list" id="vo"}
  13.     <tr>
  14.         <td>{$vo.id}</td>
  15.         <td><a href="{$vo.cat_url}" target="_blank">{$vo.cat_title}</a></td>
  16.         <td><img src="{$vo.cat_img}" alt="" style="width: 30px;height: 30px;"></td>
  17.         <td>{if condition="$vo.status == 1"}<span style="color: green;">开启</span>{else/}<span style="color: red;">关闭</span>{/if}</td>
  18.         <td>
  19.             <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button>
  20.             <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
  21.         </td>
  22.     </tr>
  23.     {/volist}
在新增广告团出框页面，需要利用layui的上传组件和js代码,(需要隐藏域name=’cat_img’方便post传表单数据是把图片链接赋给cat_img传给后端)
  1. //隐藏域
  2. <input type="hidden" name="cat_img" value="">
  3. //上传组建
  4. <div class="layui-form-item">
  5.         <label class="layui-form-label">图片上传</label>
  6.         <div class="layui-upload">
  7.             <button type="button" class="layui-btn" id="test1">上传图片</button>
  8.         </div>
  9.     </div>
  10.     <div class="layui-form-item">
  11.         <label class="layui-form-label">图片预览</label>
  12.         <div class="layui-upload-list">
  13.             <img class="layui-upload-img" id="demo1" name="cat_img" style="width: 200px;">
  14.             <p id="demoText"></p>
  15.         </div>
  16.     </div>
组册upload组件，然后引用实例upload.render，可以实现预处理before，上传后处理done，失败后处理error。url是将照片数据较给该路径下的方法处理
  1. layui.use(['layer','form', 'upload'],function(){
  2.         form = layui.form;
  3.         layer = layui.layer;
  4.         $ = layui.jquery;
  5.         upload = layui.upload;
  6.         var uploadInst = upload.render({
  7.             elem: '#test1'
  8.             ,url: '/index.php/admins/Home/up_img'
  9.             ,before: function(obj){
  10.                 //预读本地文件示例，不支持ie8
  11.                 obj.preview(function(index, file, result){
  12.                     $('#demo1').attr('src', result); //图片链接（base64）
  13.                 });
  14.             }
  15.             ,done: function(res){
  16.                 //如果上传失败
  17.                 if(res.code > 0){
  18.                     return layer.msg('上传失败');
  19.                 }else{
  20.                     $('#demo1').attr('src', res.data); //图片链接（base64）
  21.                     $('input[name="cat_img"]').val(res.data); //图片链接（base64）
  22.                 }
  23.                 //上传成功
  24.             }
  25.             ,error: function(){
  26.                 //演示失败状态，并实现重传
  27.                 var demoText = $('#demoText');
  28.                 demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
  29.                 demoText.find('.demo-reload').on('click', function(){
  30.                     uploadInst.upload();
  31.                 });
  32.             }
  33.         });
在Home下新建up_img方法处理图片数据，将图片保存为图片流数据，然后判断是否上传，然后将临时图片保存在指定位置，得到上传文件后缀名，对图片格式加以约束，然后将图片的路径整合好，将路径 code msg以json形式传给前端js方法处理
  1. //图片上传
  2.     public function up_img() {
  3.         //获取上传的图片信息流
  4.         $file = request()->file('file');
  5.         //判断没有上传
  6.         if (!$file) {
  7.             exit(json_encode(array('code'=>1, 'msg'=>'上传失败')));
  8.         }
  9.         //把上传的临时文件移动到指定文件夹，tp会自动创建当前日期的文件夹
  10.         $up = $file->move('../public/uploads');
  11.         $img = $up->getExtension();
  12.         if( $img!='jpg' AND $img!='png' ){
  13.             exit(json_encode(array('code'=>1,'msg'=>'图片格式不对，请重新上传！')));
  14.         }
  15.         $img_url = '/uploads/'.$up->getSaveName();
  16.         // /uploads/20190410\3ca658d42c5e241347254e006949a0c7.jpg
  17.         exit(json_encode(array('code'=>0,'msg'=>'上传成功','data'=>$img_url)));
  20.     }
上一条：02月19日作业：单文件和多文件上传下一条：laravel扩展数据库访问类
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多