數(shù)據(jù)庫結(jié)構(gòu)如下:
CREATE TABLE `friend_link` ( `link_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '友鏈id', `link_name` varchar(255) NOT NULL COMMENT '友鏈名稱', `link_url` varchar(255) NOT NULL COMMENT '友鏈URL地址', `link_img` varchar(255) DEFAULT NULL COMMENT '友鏈頭像', `link_des` varchar(255) DEFAULT NULL COMMENT '友鏈描述', `link_target` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '是否在新頁面打開', `link_visible` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'Y' COMMENT '是否顯示', `link_updated` datetime NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '更新時間', PRIMARY KEY (`link_id`)) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
效果預(yù)覽:
admin/controller/Setting.php控制器
// 友鏈列表 public function link(){ if(Request::isAjax()){ // 當前第幾頁 $page = input('get.page'); // 每頁條數(shù) $limit = input('get.limit'); // 總條數(shù) $count = Db::table('friend_link')->count(); // 友鏈列表 $links = Db::table('friend_link')->page($page,$limit)->select(); if($links){ exit(json_encode(['code'=>0,'msg'=>'查詢成功','count'=>$count,'data'=>$links])); } } return View::fetch('/setting/link'); }
view/Settting/link.php 友鏈列表視圖
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="/static/layui/css/public.css"> <script type="text/javascript" src="/static/layui/layui.js"></script> <style> .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;} </style></head><body style="padding: 20px;"> <div class="layui-card"> <div class="layui-card-header"><h3>友情鏈接</h3></div> <div class="layui-card-body"> <span class="layui-breadcrumb"> <a>網(wǎng)站設(shè)置</a> <a href="/admin/setting/basesetting"><cite>友情鏈接</cite></a> </span> <hr class="layui-border-blue"> <div class="layuimini-main"> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button> <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 刪除 </button> </div> </script> <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table> <script type="text/html" id="currentTableBar"> <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">編輯</a> <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">刪除</a> </script> </div> </div> </div></body></html><script> layui.use(['form', 'table'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table.render({ elem: '#currentTableId', url: '/admin/setting/link', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [[ {type: "checkbox", width: 50}, {field: 'link_id', width: 80, title: 'ID', sort: true}, {field: 'link_name', width: 120, title: '友鏈名稱'}, {field: 'link_url', width: 120, title: '友鏈地址'}, {field: 'link_img', width: 100, title: '友鏈頭像',templet:function(res){ return '<img style="width:30px;height:30px;border-radius: 50%;" src="'+res.link_img+'">'; }}, {field: 'link_des', title: '友鏈描述', minWidth: 130}, {field: 'link_target', width: 100, title: '打開方式',templet:function(res){ return `<a href="${res.link_url}" target="${res.link_target}"><button style="float: right;" type="button" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs"> <i class="layui-icon layui-icon-link"></i> 點擊預(yù)覽 </button></a>`; }}, {field: 'link_visible', width: 100, title: '是否顯示',templet:function(res){ if(res.link_visible == 'Y'){ return '<span style="color:green;">顯示</span>'; }else{ return '<span style="color:grey;">隱藏</span>'; } }}, {field: 'link_updated', title: '加入時間', sort: true}, {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} ]], limits: [10, 15, 20, 25, 50, 100], limit: 8, page: true, skin: 'line', height: 'full-100' }); /** * toolbar監(jiān)聽事件 */ table.on('toolbar(currentTableFilter)', function (obj) { if (obj.event === 'add') { // 監(jiān)聽添加操作 var index = layer.open({ title: '添加友鏈', type: 2, shade: 0.5, maxmin:true, shadeClose: true, area: ['60%', '80%'], content: '/admin/setting/link_add', }); $(window).on("resize", function () { layer.full(index); }); } if (obj.event === 'delete') { // 監(jiān)聽刪除操作 var checkStatus = table.checkStatus('currentTableId') var data = checkStatus.data; if(data==''){ layer.msg('請選擇要刪除的行'); }else{ layer.confirm('親,真的刪除么!', function (index) { $.post('/admin/setting/link_del',{link:data},function(res){ if(res.code>0){ return parent.layer.alert(res.msg,{icon:2}); } parent.layer.alert(res.msg, {icon:1}); setTimeout(()=>{window.location.reload();},1000); },'json'); layer.close(index); }); } } }); //監(jiān)聽表格復選框選擇 table.on('checkbox(currentTableFilter)', function (obj) { console.log(obj) }); table.on('tool(currentTableFilter)', function (obj) { var data = obj.data; if (obj.event === 'edit') { var index = layer.open({ title: '編輯友鏈', type: 2, shade: 0.5, maxmin:true, shadeClose: true, area: ['60%', '80%'], content: '/admin/setting/link_edit?link_id='+obj.data.link_id, }); $(window).on("resize", function () { layer.full(index); }); return false; } else if (obj.event === 'delete') { layer.confirm('親,真的刪除么!', function (index) { $.post('/admin/setting/link_del',{link:[obj.data]},function(res){ if(res.code>0){ return parent.layer.alert(res.msg,{icon:2}); } obj.del(); parent.layer.alert(res.msg, {icon:1}); setTimeout(()=>{window.location.reload();},1000); },'json'); layer.close(index); }); } }); });</script>
添加控制器方法
// 添加友鏈 public function link_add(){ if(Request::isPost()){ $data = Request::post(); Db::table('friend_link')->save($data); exit(json_encode(['code'=>0,'msg'=>'友鏈添加成功'])); }else{ return View::fetch('/setting/link_add'); } }
添加頁面視圖
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="/static/layui/css/public.css"> <script type="text/javascript" src="/static/layui/layui.js"></script> <style> body { background-color: #ffffff; } </style></head><body><div class="layui-form layuimini-form"> <div class="layui-form-item"> <label class="layui-form-label required">友鏈名稱</label> <div class="layui-input-block"> <input type="text" name="link_name" lay-verify="required" lay-reqtext="友鏈名稱不能為空" placeholder="請輸入友鏈名稱" value="" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">友鏈地址</label> <div class="layui-input-block"> <input type="text" name="link_url" lay-verify="url" autocomplete="off" lay-reqtext="友鏈地址不能為空" placeholder="請輸入友鏈地址" value="" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">友鏈頭像</label> <div class="layui-input-block"> <input type="text" name="link_img" lay-verify="url" autocomplete="off" lay-reqtext="友鏈頭像不能為空" placeholder="請輸入網(wǎng)站頭像的URL地址" value="" class="layui-input"> <tip>請確保頭像鏈接可以正常訪問,以免無法顯示!</tip> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">是否顯示</label> <div class="layui-input-block"> <input type="radio" name="link_visible" value="Y" title="顯示" checked=""> <input type="radio" name="link_visible" value="N" title="隱藏"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">打開方式</label> <div class="layui-input-block"> <input type="radio" name="link_target" value="_blank" title="在新窗口中打開" checked=""> <input type="radio" name="link_target" value="_self" title="在當前頁面打開"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">友鏈描述</label> <div class="layui-input-block"> <textarea name="link_des" class="layui-textarea" placeholder="請輸入友鏈描述"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">確認保存</button> </div> </div></div><script> layui.use(['form'], function () { var form = layui.form, layer = layui.layer, $ = layui.$; //監(jiān)聽提交 form.on('submit(saveBtn)', function (data) { $.post('/admin/setting/link_add',data.field,function(res){ if(res.code>0){ return parent.layer.alert(res.msg,{icon:2}); } parent.layer.alert(res.msg, {icon:1}); setTimeout(()=>{parent.window.location.reload();},1000); },'json'); }); });</script></body></html>
修改控制器方法
// 修改友鏈 public function link_edit(){ if(Request::isPost()){ $data = Request::post(); Db::table('friend_link')->save($data); exit(json_encode(['code'=>0,'msg'=>'友鏈修改成功'])); }else{ $link_id = input('get.link_id'); $link = Db::table('friend_link')->where('link_id',$link_id)->find(); return view('/setting/link_edit',$link); } }
修改頁面視圖
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="/static/layui/css/public.css"> <script type="text/javascript" src="/static/layui/layui.js"></script> <style> body {background-color: #ffffff;} </style></head><body><div class="layui-form layuimini-form"> <input type="text" name="link_id" value="{$link_id}" hidden=""> <div class="layui-form-item"> <label class="layui-form-label required">友鏈名稱</label> <div class="layui-input-block"> <input type="text" name="link_name" lay-verify="required" lay-reqtext="友鏈名稱不能為空" placeholder="請輸入友鏈名稱" value="{$link_name}" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">友鏈地址</label> <div class="layui-input-block"> <input type="text" name="link_url" lay-verify="url" autocomplete="off" lay-reqtext="友鏈地址不能為空" placeholder="請輸入友鏈地址" value="{$link_url}" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">友鏈頭像</label> <div class="layui-input-block"> <input type="text" name="link_img" lay-verify="url" autocomplete="off" lay-reqtext="友鏈頭像不能為空" placeholder="請輸入網(wǎng)站頭像的URL地址" value="{$link_img}" class="layui-input"> <tip>請確保頭像鏈接可以正常訪問,以免無法顯示!</tip> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <img style="width:50px;" src="{$link_img}"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">是否顯示</label> <div class="layui-input-block"> <input type="radio" name="link_visible" value="Y" title="顯示" {if $link_visible=='Y'}checked{/if}> <input type="radio" name="link_visible" value="N" title="隱藏" {if $link_visible=='N'}checked{/if}> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">打開方式</label> <div class="layui-input-block"> <input type="radio" name="link_target" value="_blank" title="在新窗口中打開" {if $link_target=='_blank'}checked{/if}> <input type="radio" name="link_target" value="_self" title="在當前頁面打開" {if $link_target=='_self'}checked{/if}> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">友鏈描述</label> <div class="layui-input-block"> <textarea name="link_des" class="layui-textarea" placeholder="請輸入友鏈描述">{$link_des}</textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">確認保存</button> </div> </div></div><script> layui.use(['form'], function () { var form = layui.form, layer = layui.layer, $ = layui.$; //監(jiān)聽提交 form.on('submit(saveBtn)', function (data) { $.post('/admin/setting/link_edit',data.field,function(res){ if(res.code>0){ return parent.layer.alert(res.msg,{icon:2}); } parent.layer.alert(res.msg, {icon:1}); setTimeout(()=>{parent.window.location.reload();},1000); },'json'); }); });</script></body></html>
刪除控制器方法
這里可以刪除一個也可以同時刪除多個,所以傳遞過來的友鏈id是一個數(shù)組形式的
// 刪除友鏈 public function link_del(){ $data = Request::post(); $link_id = []; foreach ($data['link'] as $key => $value) { $link_id[] = $value['link_id']; } $res = Db::table('friend_link')->delete($link_id); if($res){ exit(json_encode(['code'=>0,'msg'=>'刪除成功'])); }else{ exit(json_encode(['code'=>1,'msg'=>'刪除失敗,請重試……'])); } }
網(wǎng)站基礎(chǔ)設(shè)置效果
后端采用thinkphp6.0,首先是網(wǎng)站基礎(chǔ)設(shè)置,網(wǎng)站基礎(chǔ)在數(shù)據(jù)庫中可以建立一個單獨的表,但是這個單獨的表存放的信息很特殊,表里可以存商品規(guī)格,或者別的數(shù)據(jù),因為這個網(wǎng)站設(shè)置就是設(shè)置網(wǎng)站的tdk,表字段的名稱是這樣的,names,values,就只有這兩個字段,names的字段可以存tdk,或者商品名稱,第二個values,可以存放tdk的信息,還有商品規(guī)格信息,我們將這些數(shù)據(jù)轉(zhuǎn)換成json存入表中,需要的時候再json_decode取出渲染到前端頁面。
這種存儲方式和商品的SUK很相似,因為同一個商品,很能有很多規(guī)格,我們不可能給每個商品在創(chuàng)建一個對應(yīng)的規(guī)格表,這里的網(wǎng)站設(shè)置也是,我們?nèi)绻o例如網(wǎng)站名稱關(guān)鍵字描述備案號創(chuàng)建一個表的話,那么網(wǎng)站的輪播圖也要單獨創(chuàng)建一個表,后續(xù)接入第三方接口有一些配置參數(shù),我們又要新建一個表來存儲,這樣過于浪費,里面新建了幾個字段,可能就一行記錄。
我們采用JSON形式存儲到記錄中,將對象轉(zhuǎn)換為JSON字符串存儲到一條記錄中,起一個name名稱。對象的描述能力是很強的,我們將需要存儲的信息放到對象中,然后轉(zhuǎn)換為json字符串放到表中,下一次取出來json字符串在將其轉(zhuǎn)換為對象。這樣就可以一張表存儲很多數(shù)據(jù)配置了,我們將文章設(shè)置的一些信息存儲為name叫tdk,vals為對應(yīng)的配置信息json字符串。
控制器Setting.php
這里我們先查詢name名叫tdk的記錄是否存在,如果第一次設(shè)置配置信息,不存在該條記錄則插入配置信息記錄,如果查詢到了該條配置信息,這更新網(wǎng)站配置信息。注意:我們接受的是一個對象,存儲數(shù)據(jù)庫的時候,要將其轉(zhuǎn)換為json字符串才可以,存儲渲染的時候也要轉(zhuǎn)回數(shù)組對象。
<?phpnamespace app\admin\controller;use app\BaseController;use think\facade\Session;use think\facade\Db;use think\facade\View;use think\facade\Cache;use think\facade\Request;/** * 后臺設(shè)置 */class Setting extends BaseController{ public function basesetting(){ if(Request::isPost()){ $data = Request::post(); // 設(shè)置保存配置文件的names字段名稱 $names = 'tdk'; // 查詢表中names等于tdk的記錄是否已存在,存在則更新配置,否則新增一條配置 $item = Db::table('setting')->where('names',$names)->find(); // 查詢出來有該條記錄不為空則更新配置記錄 if(!empty($item)){ $res = Db::table('setting')->where('names',$names)->update(['vals'=>json_encode($data)]); }else{ // 如果第一次不存在該條配置文件,則新增一條 $res = Db::table('setting')->insert(['names'=>$names,'vals'=>json_encode($data)]); } if($res){ exit(json_encode(['code'=>0,'msg'=>'設(shè)置成功'])); }else{ exit(json_encode(['code'=>1,'msg'=>'設(shè)置失敗,請重試……'])); } }else{ $data['item'] = Db::table('setting')->where('names','tdk')->find(); $data['item']['vals'] = json_decode($data['item']['vals'],true); return View::fetch('/setting/basesetting',$data); } }}
展示視圖 Setting/basesetting.php
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="/static/layui/css/public.css"> <script type="text/javascript" src="/static/layui/layui.js"></script> <style> .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;} </style></head><body style="padding: 20px;"> <div class="layui-card"> <div class="layui-card-header"><h3>基礎(chǔ)設(shè)置</h3></div> <div class="layui-card-body"> <span class="layui-breadcrumb"> <a>網(wǎng)站設(shè)置</a> <a href="/admin/setting/basesetting"><cite>基礎(chǔ)設(shè)置</cite></a> </span> <hr class="layui-border-blue"> <div class="layuimini-main"> <div class="layui-form layuimini-form"> <div class="layui-form-item"> <label class="layui-form-label required">網(wǎng)站名稱</label> <div class="layui-input-block"> <input type="text" name="sitename" lay-verify="required" lay-reqtext="網(wǎng)站名稱不能為空" placeholder="請輸入網(wǎng)站名稱" value="{$item['vals']['sitename']}" class="layui-input"> <tip>填寫自己部署網(wǎng)站的名稱。</tip> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">網(wǎng)站域名</label> <div class="layui-input-block"> <input type="text" name="domain" lay-verify="required" lay-reqtext="網(wǎng)站域名不能為空" placeholder="請輸入網(wǎng)站域名" value="{$item['vals']['domain']}" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">客服QQ</label> <div class="layui-input-block"> <input type="text" name="qq" placeholder="請輸入網(wǎng)站客服QQ" value="{$item['vals']['qq']}" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">客服電話</label> <div class="layui-input-block"> <input type="text" name="phone" placeholder="請輸入網(wǎng)站客服電話" value="{$item['vals']['phone']}" class="layui-input"> <tip>客服電話默認與微信同步</tip> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">最大文件上傳</label> <div class="layui-input-inline" style="width: 80px;"> <input type="text" name="cache" lay-verify="number" value="{$item['vals']['cache']}" class="layui-input"> </div> <div class="layui-input-inline layui-input-company">KB</div> <div class="layui-form-mid layui-word-aux">提示:1 M = 1024 KB</div> </div> <div class="layui-form-item"> <label class="layui-form-label">上傳文件類型</label> <div class="layui-input-block"> <input type="text" name="type" value="{$item['vals']['type']}" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label required">title首頁標題</label> <div class="layui-input-block"> <textarea name="title" class="layui-textarea">{$item['vals']['title']}</textarea> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">keywords關(guān)鍵詞</label> <div class="layui-input-block"> <textarea name="keywords" class="layui-textarea" placeholder="多個關(guān)鍵詞用英文狀態(tài) , 號分割">{$item['vals']['keywords']}</textarea> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">description描述</label> <div class="layui-input-block"> <textarea name="description" class="layui-textarea">{$item['vals']['description']}</textarea> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label required">版權(quán)信息</label> <div class="layui-input-block"> <textarea name="copyright" class="layui-textarea">{$item['vals']['copyright']}</textarea> </div> </div> <div class="layui-form-item"> <label class="layui-form-label ">網(wǎng)站備案號</label> <div class="layui-input-block"> <input type="text" name="record" placeholder="請輸入備案號" value="{$item['vals']['record']}" class="layui-input"> <tip>填寫自己的網(wǎng)站備案號</tip> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="setting">確認保存</button> </div> </div> </div> </div> </div> </div></body></html><script> layui.use(['form'], function () { var form = layui.form var layer = layui.layer; var $ = layui.jquery; //監(jiān)聽提交 form.on('submit(setting)', function (data) { $.post('/admin/setting/basesetting',data.field,function(res){ if(res.code>0){ return parent.layer.alert(res.msg,{icon:2}); } parent.layer.alert(res.msg, {icon:1}); setTimeout(()=>{parent.window.location.reload();},1000); },'json'); }); });</script>
1.【商城后臺管理系統(tǒng)】基于TP6開發(fā)后臺管理員登陸頁面渲染部署
2.【商城后臺管理系統(tǒng)】基于TP6開發(fā)后臺管理界面渲染與無限級菜單查詢
3.【商城后臺管理系統(tǒng)】基于TP6開發(fā)登陸授權(quán)重定向攔截操作及管理員列表操作
4.【商城后臺管理系統(tǒng)】基于TP6開發(fā)后臺無限極菜單的管理顯示與增刪改查操作
5.【商城后臺管理系統(tǒng)】基于TP6開發(fā)RBAC角色權(quán)限管理權(quán)限分配等技術(shù)點詳解
6.【商城后臺管理系統(tǒng)】基于TP6開發(fā)角色的權(quán)限分配遞歸生成無限極權(quán)限菜單樹
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號