博主信息
小明的博客
博文
42
粉丝
2
评论
0
访问量
27318
积分:0
P豆:92
博文分类
作业42篇

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

2020年02月22日 12:05:07阅读数:544博客 / 小明的博客/ 作业

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

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

建立省级列表,有添加编辑删除功能,在省级列表中添加按钮,点击跳转到该省下的市级列表,也有添加编辑删除功能,然后以此类推,有该市下面的区的列表。这样就形成了三级城市管理。
有几点需要注意:
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. */
  8. namespace app\admins\controller;
  9. use think\Controller;
  10. //省市区管理
  11. class City extends BaseAdmin
  12. {
  13. //省列表
  14. public function one_index() {
  15. //查询出省列表发送给前端
  16. $list = $this->db->table('shop_city')->where(array('level'=>1))->lists();
  17. $this->assign('list', $list);
  18. return $this->fetch();
  19. }
  20. //省添加、编辑
  21. public function one_add() {
  22. //接收传过来的id level fid 编辑省的时候fid没有那么就传过来0
  23. // 市的时候 把省的id通过点击市列表是,get传过来然后赋给给fid给到前端
  24. // 前端点击add市把 level fid id都传给 one_add
  25. $id = (int)input('get.id');
  26. $level = (int)input('get.level');
  27. $fid = (int)input('get.fid');
  28. //查询出该id的省的信息
  29. $data = $this->db->table('shop_city')->where(array('id'=>$id))->item();
  30. //把data level给前端
  31. $this->assign('data', $data);
  32. $this->assign('level', $level);
  33. $this->assign('fid', $fid);
  34. return $this->fetch();
  35. }
  36. //省保存
  37. public function one_save() {
  38. //将传过来的数据整理在一起
  39. $id = (int)input('post.id');
  40. $data['name'] = trim(input('post.name'));
  41. $data['initials'] = trim(input('post.initials'));
  42. $data['sort'] = (int)input('post.sort');
  43. $data['status'] = (int)input('post.status');
  44. //判断 如果id存在那么就是修改执行更新操作
  45. if ($id) {
  46. $res = $this->db->table('shop_city')->where(array('id'=>$id))->update($data);
  47. } else {
  48. //如果id不存在 那么就是新增需要把level fid 和data插入
  49. $data['level'] = (int)input('post.level');
  50. $data['fid'] = (int)input('post.fid');
  51. $res = $this->db->table('shop_city')->insert($data);
  52. }
  53. if ($res) {
  54. exit(json_encode(array('code'=>0, 'msg'=>'保存成功')));
  55. } else {
  56. exit(json_encode(array('code'=>1, 'msg'=>'保存失败')));
  57. }
  58. }
  59. //省删除
  60. public function one_del() {
  61. $id = (int)input('post.id');
  62. //16 执行删除操作
  63. $res = $this->db->table('shop_city')->where(array('id'=>$id))->delete();
  64. if (!$res) {
  65. exit(json_encode(array('code'=>1, 'msg'=>'删除失败')));
  66. }
  67. exit(json_encode(array('code'=>0, 'msg'=>'删除成功')));
  68. }
  69. //市列表
  70. public function two_index() {
  71. $fid = (int)input('get.id');
  72. //查找fid下的所有市级城市记录
  73. $list = $this->db->table('shop_city')->where(array('fid'=>$fid))->lists();
  74. $this->assign('list', $list);
  75. $this->assign('fid', $fid);
  76. return $this->fetch();
  77. }
  78. //区列表
  79. public function three_index() {
  80. $fid = (int)input('get.id');
  81. //找到fid的时机城市记录
  82. $two_city = $this->db->table('shop_city')->where(array('id'=>$fid))->item();
  83. //查找fid下的所有市级城市记录
  84. $list = $this->db->table('shop_city')->where(array('fid'=>$fid))->lists();
  85. $this->assign('list', $list);
  86. $this->assign('two_city', $two_city);
  87. $this->assign('fid', $fid);
  88. return $this->fetch();
  89. }
  90. }
  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>
  19. <table class="layui-table">
  20. <thead>
  21. <tr>
  22. <th>ID</th>
  23. <th>名称</th>
  24. <th>首字母</th>
  25. <th>状态</th>
  26. <th>市列表</th>
  27. <th>操作</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <!-- 循环出所有省记录 -->
  32. {volist name="list" id="vo"}
  33. <tr>
  34. <td>{$vo.id}</td>
  35. <td>{$vo.name}</td>
  36. <td>{$vo.initials}</td>
  37. <td>{if condition="$vo.status == 1"}<span style="color: green;">开启</span>{else/}<span style="color: red;">关闭</span>{/if}</td>
  38. <td>
  39. <button class="layui-btn layui-btn-xs" onclick="url({$vo.id})">此省——城市列表</button>
  40. </td>
  41. <td>
  42. <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button>
  43. <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
  44. </td>
  45. </tr>
  46. {/volist}
  47. </tbody>
  48. </table>
  49. <script type="text/javascript">
  50. layui.use(['layer'],function(){
  51. layer = layui.layer;
  52. $ = layui.jquery;
  53. });
  54. // 添加编辑
  55. function add(id) {
  56. layer.open({
  57. type: 2,
  58. title: id>0 ? '编辑省' : '添加省',
  59. shade: 0.3,
  60. area: ['480px', '420px'],
  61. content: '/index.php/admins/City/one_add?id='+id+'&level=1'
  62. });
  63. }
  64. //分类下的广告列表
  65. function url(id) {
  66. window.location.href = "/index.php/admins/City/two_index?id="+id;
  67. }
  68. // 删除
  69. function del(id) {
  70. layer.confirm('确定要删除吗?', {
  71. icon: 3,
  72. btn: ['确定', '取消']
  73. }, function () {
  74. $.post('/index.php/admins/City/one_del', {'id':id}, function (res) {
  75. if (res.code > 0) {
  76. layer.alert(res.msg, {icon:2});
  77. } else {
  78. layer.msg(res.msg);
  79. setTimeout(function () {
  80. window.location.reload();
  81. }, 1000)
  82. }
  83. }, 'json');
  84. });
  85. }
  86. </script>
  87. </body>
  88. </html>
  89. ``````html
  90. <!DOCTYPE html>
  91. <html>
  92. <head>
  93. <title></title>
  94. <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  95. <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  96. </head>
  97. <body style="padding: 10px;">
  98. <form class="layui-form">
  99. <!-- hidden 是把input框隐藏,它的作用是把一些隐藏信息传值到接口中 -->
  100. <input type="hidden" name="id" value="{$data.id}">
  101. <input type="hidden" name="level" value="{$level}">
  102. <input type="hidden" name="fid" value="{$fid}">
  103. <div class="layui-form-item">
  104. <label class="layui-form-label">名称</label>
  105. <div class="layui-input-inline">
  106. <!-- value 是默认值 -->
  107. <!-- 当添加时,传值是0,默认值是空 -->
  108. <!-- readonly 是input里的一个参数,可以禁用input框,只有在修改用户时,才使用 -->
  109. <input type="text" class="layui-input" name="name" value="{$data.name}">
  110. </div>
  111. </div>
  112. <div class="layui-form-item">
  113. <label class="layui-form-label">首字母</label>
  114. <div class="layui-input-inline">
  115. <input type="text" class="layui-input" name="initials" value="{$data.initials}">
  116. </div>
  117. </div>
  118. <div class="layui-form-item">
  119. <label class="layui-form-label">排序</label>
  120. <div class="layui-input-inline">
  121. <input type="text" class="layui-input" name="sort" value="{$data.sort}">
  122. </div>
  123. </div>
  124. <div class="layui-form-item">
  125. <label class="layui-form-label">状态</label>
  126. <div class="layui-input-inline">
  127. <input type="checkbox" name="status" lay-skin="primary" title="开启" value="1" {$data.status==1 || !$data ?'checked':''}>
  128. </div>
  129. </div>
  130. </form>
  131. <div class="layui-form-item">
  132. <div class="layui-input-block">
  133. <button class="layui-btn" onclick="save()">保存</button>
  134. </div>
  135. </div>
  136. <script type="text/javascript">
  137. layui.use(['layer','form'],function(){
  138. form = layui.form;
  139. layer = layui.layer;
  140. $ = layui.jquery;
  141. });
  142. // 保存管理员
  143. function save(){
  144. // 用js 获取省名称 首字母
  145. var name = $.trim($('input[name="name"]').val());
  146. var initials = $.trim($('input[name="initials"]').val());
  147. if(name==''){
  148. layer.alert('请输入省名称',{icon:2});
  149. return;
  150. }
  151. if(initials==''){
  152. layer.alert('请输入首字母',{icon:2});
  153. return;
  154. }
  155. // 请求保存接口,把数据传值到接口中。
  156. $.post('/index.php/admins/City/one_save',$('form').serialize(),function(res){
  157. if(res.code>0){
  158. layer.alert(res.msg,{icon:2});
  159. }else{
  160. layer.msg(res.msg);
  161. setTimeout(function(){parent.window.location.reload();},1000);
  162. }
  163. },'json');
  164. }
  165. </script>
  166. </body>
  167. </html>
  168. ``````html
  169. <!DOCTYPE html>
  170. <html>
  171. <head>
  172. <title></title>
  173. <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  174. <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  175. <style type="text/css">
  176. .header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
  177. .header div{border-bottom: solid 2px #009688;margin-top: 8px;}
  178. .header button{float: right;margin-top: -5px;}
  179. </style>
  180. </head>
  181. <body style="padding: 10px;">
  182. <div class="header">
  183. <span style="background-color:#999;"><a href="/index.php/admins/City/one_index" style="color:#fff;">省列表</a></span>
  184. <span>市列表</span>
  185. <button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
  186. <div></div>
  187. </div>
  188. <table class="layui-table">
  189. <thead>
  190. <tr>
  191. <th>ID</th>
  192. <th>名称</th>
  193. <th>首字母</th>
  194. <th>状态</th>
  195. <th>区列表</th>
  196. <th>操作</th>
  197. </tr>
  198. </thead>
  199. <tbody>
  200. <!-- 循环出所有省记录 -->
  201. {volist name="list" id="vo"}
  202. <tr>
  203. <td>{$vo.id}</td>
  204. <td>{$vo.name}</td>
  205. <td>{$vo.initials}</td>
  206. <td>{if condition="$vo.status == 1"}<span style="color: green;">开启</span>{else/}<span style="color: red;">关闭</span>{/if}</td>
  207. <td>
  208. <button class="layui-btn layui-btn-xs" onclick="url({$vo.id})">此市——区列表</button>
  209. </td>
  210. <td>
  211. <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button>
  212. <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
  213. </td>
  214. </tr>
  215. {/volist}
  216. </tbody>
  217. </table>
  218. <script type="text/javascript">
  219. layui.use(['layer'],function(){
  220. layer = layui.layer;
  221. $ = layui.jquery;
  222. });
  223. var fid = {$fid};
  224. // 添加编辑
  225. function add(id) {
  226. layer.open({
  227. type: 2,
  228. title: id>0 ? '编辑市' : '添加市',
  229. shade: 0.3,
  230. area: ['480px', '420px'],
  231. content: '/index.php/admins/City/one_add?id='+id+'&level=2&fid='+fid
  232. });
  233. }
  234. //分类下的广告列表
  235. function url(id) {
  236. window.location.href = "/index.php/admins/City/three_index?id="+id;
  237. }
  238. // 删除
  239. function del(id) {
  240. layer.confirm('确定要删除吗?', {
  241. icon: 3,
  242. btn: ['确定', '取消']
  243. }, function () {
  244. $.post('/index.php/admins/City/one_del', {'id':id}, function (res) {
  245. if (res.code > 0) {
  246. layer.alert(res.msg, {icon:2});
  247. } else {
  248. layer.msg(res.msg);
  249. setTimeout(function () {
  250. window.location.reload();
  251. }, 1000)
  252. }
  253. }, 'json');
  254. });
  255. }
  256. </script>
  257. </body>
  258. </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>
  21. <table class="layui-table">
  22. <thead>
  23. <tr>
  24. <th>ID</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="add({$vo.id})">编辑</button>
  41. <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
  42. </td>
  43. </tr>
  44. {/volist}
  45. </tbody>
  46. </table>
  47. <script type="text/javascript">
  48. layui.use(['layer'],function(){
  49. layer = layui.layer;
  50. $ = layui.jquery;
  51. });
  52. var fid = {$fid};
  53. // 添加编辑
  54. function add(id) {
  55. layer.open({
  56. type: 2,
  57. title: id>0 ? '编辑市' : '添加市',
  58. shade: 0.3,
  59. area: ['480px', '420px'],
  60. content: '/index.php/admins/City/one_add?id='+id+'&level=3&fid='+fid
  61. });
  62. }
  63. // 删除
  64. function del(id) {
  65. layer.confirm('确定要删除吗?', {
  66. icon: 3,
  67. btn: ['确定', '取消']
  68. }, function () {
  69. $.post('/index.php/admins/City/one_del', {'id':id}, function (res) {
  70. if (res.code > 0) {
  71. layer.alert(res.msg, {icon:2});
  72. } else {
  73. layer.msg(res.msg);
  74. setTimeout(function () {
  75. window.location.reload();
  76. }, 1000)
  77. }
  78. }, 'json');
  79. });
  80. }
  81. </script>
  82. </body>
  83. </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)));
  18. }
批改状态:未批改

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论