Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CMS后台管理商城系统（二） 城市管理 广告图片上传 2019年4月10日
Blogger Information
Blog 42
fans 2
comment 0
visits 53960
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CMS后台管理商城系统（二） 城市管理 广告图片上传 2019年4月10日
小明的博客
Original
1436 people have browsed it

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

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

建立省级列表，有添加编辑删除功能，在省级列表中添加按钮，点击跳转到该省下的市级列表，也有添加编辑删除功能，然后以此类推，有该市下面的区的列表。这样就形成了三级城市管理。
有几点需要注意：
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.     }
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post