search

博客列表 >laravel通用后台-新闻文章系统开发

laravel通用后台-新闻文章系统开发

我是郭富城
我是郭富城原创
2020年06月20日 05:56:281367浏览

1.创建路由

  1. //新闻系统
  2.     Route::get('/admins/article/index','Article@index');//文章列表
  3.     Route::get('/admins/article/add','Article@add');//文章添加
  4.     Route::post('/admins/article/save','Article@save');//文章保存
  5.     Route::post('/admins/article/del','Article@del');//删除文章
  6.     Route::get('/admins/article/cates','Article@cates');//文章分类
  7.     Route::get('/admins/article/add_cate','Article@add_cate');//添加文章分类
  8.     Route::post('/admins/article/save_cate','Article@save_cate');//保存文章分类
  9.     Route::post('/admins/article/del_cate','Article@del_cate');//删除文章分类
  11.     // 上传系统
  12.     Route::post('/admins/files/upload_img','Files@upload_img');//文章缩略图上传

2. 创建后台控制器

利用laravel的artisan命令轻松创建

  1. php artisan make:controller admins/Article
  2. php artisan make:controller admins/Files

3. 控制器代码

  1. <?php
  3. namespace App\Http\Controllers\admins;
  5. use App\Http\Controllers\Controller;
  6. use Illuminate\Http\Request;
  7. use Illuminate\Support\Facades\DB;
  8. use Illuminate\Support\Facades\Auth;
  10. class Article extends Controller
  11. {
  12.     // 添加新闻
  13.     public function add(Request $request)
  14.     {
  15.         $aid=(int)$request->aid;
  16.         $data['article']=DB::table('article')->where('id',$aid)->item();
  17.         $data['contents']=DB::table('article_detail')->where('aid',$aid)->item();
  18.         $data['cates']=DB::table('article_cate')->lists();
  19.         return view('admins/article/add',$data);
  20.     }
  21.     // 保存新闻
  22.     public function save(Request $request)
  23.     {
  24.         $aid=(int)$request->aid;
  25.         $admin=Auth::user();
  26.         $data['cid']=(int)$request->cid;
  27.         $data['title']=trim($request->title);
  28.         $data['subtitle']=trim($request->subtitle);
  29.         $data['thumb']=trim($request->preview_img);
  30.         $data['keywords']=trim($request->keywords);
  31.         $data['descs']=trim($request->descs);
  32.         $data['auther_id']=$admin->id;
  33.         // echo '<pre>';
  34.         // print_r($data);
  35.         // print_r($admin);
  36.         // return;
  37.         $data['pv']=0;
  38.         $data['status']=(int)$request->status;
  41.         $contents=trim($request->contents);
  43.         if ($data['title']==='') {
  44.             exit(json_encode(['code'=>1,'message'=>'文章标题怎么可以没有呢？']));
  45.         }
  47.         if ($aid===0) {
  48.             $data['add_time']=time();
  49.             $aid = DB::table('article')->insertGetId($data);
  50.             if($aid>0){
  51.                 DB::table('article_detail')->insert(['aid'=>$aid,'contents'=>$contents]);
  52.             }
  53.         } else {
  54.             DB::table('article')->where('id',$aid)->update($data);
  55.             DB::table('article_detail')->where('aid',$aid)->update(['aid'=>$aid,'contents'=>$contents]);
  56.         }
  58.         exit(json_encode(['code'=>0,'message'=>'保存新闻成功']));
  60.     }
  62.     // 删除新闻
  63.     public function del(Request $request) {
  64.         $aid=(int)$request->aid;
  65.         // echo $aid;
  66.         // exit;
  67.         DB::table('article')->where('id',$aid)->delete();
  68.         DB::table('article_detail')->where('aid',$aid)->delete();
  69.         exit(json_encode(['code'=>0,'message'=>'删除文章成功']));
  70.     }
  71.     // 新闻列表
  72.     public function index(Request $request) {
  73.         $data['cates']=DB::table('article_cate')->cates('cid');
  74.         // echo '<pre>';
  75.         // print_r($data);
  76.         // return;
  77.         $data['auth']=DB::table('new_admin')->cates('id');
  78.         // echo '<pre>';
  79.         // print_r($data);
  80.         // return;
  81.         // $data['lists']=DB::table('article')->lists();
  82.         $data['page']=(int)$request->page;
  83.         $data['pageSize']=5;
  84.         $pages= DB::table('article')->orderBy('id','desc')->pages($data['pageSize']);
  85.         // 列表
  86.         $data['article_lists']=$pages['lists'];
  87.         // 总数
  88.         $data['total']=$pages['total'];
  89.         // echo '<pre>';
  90.         // print_r($data);
  91.         // return;
  92.         return view('admins/article/index',$data);
  93.     }
  94.     //新闻分类
  95.     public function cates() {
  96.         $data['lists']=DB::table('article_cate')->lists();
  97.         return view('admins/article/cates',$data);
  98.     }
  99.     // 添加分类
  100.     public function add_cate(Request $request) {
  101.         $cid=(int)$request->cid;
  102.         $data['title']=DB::table('article_cate')->where('cid',$cid)->item();
  103.         if(!$data['title']) {
  104.             $data['title']['cid']=0;
  105.             $data['title']['title']='';
  106.         }
  107.         // echo '<pre>';
  108.         // print_r($data);
  109.         return view('admins/article/add_cate',$data);
  110.     }
  111.     // 保存分类
  112.     public function save_cate(Request $request) {
  113.         $cid=(int)$request->cid;
  114.         $title=trim($request->title);
  115.         if ($title==='') {
  116.             exit(json_encode(['code'=>1,'message'=>'分类名称不能为空']));
  117.         }
  118.         if ($cid===0) {
  119.             DB::table('article_cate')->insert(['title'=>$title]);
  120.         } else {
  121.             DB::table('article_cate')->where('cid',$cid)->update(['title'=>$title]);
  122.         }
  124.         exit(json_encode(['code'=>0,'message'=>'保存分类成功']));
  125.     }
  127.     // 删除分类
  128.     public function del_cate(Request $request) {
  129.         $cid=(int)$request->cid;
  130.         // echo $aid;
  131.         // exit;
  132.         DB::table('article_cate')->where('cid',$cid)->delete();
  133.         exit(json_encode(['code'=>0,'message'=>'删除分类成功']));
  134.     }
  135. }

4. 新闻列表页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>新闻列表</title>
  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  9.     <script src="/static/plugins/layui/layui.js"></script>
  10.     <link rel="stylesheet" href="/static/css/admin_index.css">
  11. </head>
  13. <body style="padding: 20px">
  14.     <div class="article_add">
  15.         <button class="layui-btn" onclick="add()">添加新闻</button>
  16.     </div>
  18.     <table class="layui-table">
  19.         @csrf
  20.         <thead>
  21.             <tr>
  22.                 <th>ID</th>
  23.                 <th>新闻分类</th>
  24.                 <th>缩略图</th>
  25.                 <th>文章标题</th>
  26.                 <th>文章作者</th>
  27.                 <th>浏览量</th>
  28.                 <th>发布时间</th>
  29.                 <th>状态</th>
  30.                 <th>操作</th>
  31.             </tr>
  32.         </thead>
  33.         <tbody>
  34.             @foreach ($article_lists as $item)
  35.             <tr>
  36.                 <td>{{$item['id']}}</td>
  37.                 <td>{{$cates[$item['cid']]['title']}}</td>
  38.                 <td><img src="{{$item['thumb']}}" /></td>
  39.                 <td>{{$item['title']}}</td>
  40.                 <td>{{$auth[$item['auther_id']]['name']}}</td>
  41.                 <td>{{$item['pv']}}</td>
  42.                 <td>{{date('Y-m-d H:i:s',$item['add_time'])}}</td>
  43.                 <td>{{$item['status']==0?'草稿':'已发布'}}</td>
  44.                 <td>
  45.                     <button class="layui-btn layui-btn-xs" onclick="add({{$item['id']}})">编辑</button>
  46.                     <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({{$item['id']}})">删除</button>
  47.                 </td>
  48.             </tr>
  49.             @endforeach
  50.         </tbody>
  51.     </table>
  52.     <div id="pages"></div>
  53. </body>
  55. </html>
  57. <script>
  58. layui.use(['layer', 'laypage'], function() {
  59.     var layer = layui.layer;
  60.     var laypage = layui.laypage;
  61.     $ = layui.jquery;
  62.     //执行一个laypage实例
  63.     laypage.render({
  64.         limit: {{$pageSize}},
  65.         elem: 'pages', //注意，这里的 test1 是 ID，不用加 # 号
  66.         count: {{$total}}, //数据总数，从服务端得到
  67.         curr:{{$page}},
  68.         layout:['count','prev', 'page', 'next','skip'],
  69.         jump: function(obj, first){
  70.             //obj包含了当前分页的所有参数，比如：
  71.             //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
  72.             //console.log(obj.limit); 得到每页显示的条数
  74.             //首次不执行
  75.             if(!first){
  76.               //do something
  77.               window.location.href='?page='+obj.curr;
  78.             }
  79.           }
  80.     });
  81. });
  83. // 修改文章
  84. function add(aid) {
  85.     //iframe层
  86.     layer.open({
  87.         type: 2,
  88.         title: aid>0?'修改新闻文章':'添加新闻文章',
  89.         shadeClose: true,
  90.         shade: 0.8,
  91.         area: ['80%', '90%'],
  92.         content: '/admins/article/add?aid='+aid, //iframe的url
  93.         btn: ['保存'],
  94.         yes: function(index, layero) {
  95.             var body = layer.getChildFrame('body', index);
  96.             var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
  97.             iframeWin.save();
  98.         }
  99.     });
  101. }
  103. //删除文章
  104. function del(aid) {
  105.     //询问框
  106.     layer.confirm('是否确定删除？', {
  107.         icon: 3,
  108.         btn: ['确定', '取消'] //按钮
  109.     }, function() {
  110.         var _token = $('input[name="_token"]').val();
  111.         $.post('/admins/article/del', {
  112.             aid: aid,
  113.             _token: _token
  114.         }, function(res) {
  115.             if (res.code > 0) {
  116.                 return layer.alert(res.message, {
  117.                     icon: 2
  118.                 });
  119.             }
  120.             layer.msg('删除文章成功');
  121.             setTimeout(function() {
  122.                 window.location.reload();
  123.             }, 1000)
  124.         }, 'json');
  125.     });
  126. }
  128. </script>

5 新增文章页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>添加文章</title>
  6.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  7.     <script src="/static/plugins/layui/layui.js"></script>
  8.     <link rel="stylesheet" href="/static/css/admin_index.css">
  9.     <!-- 配置文件 -->
  10.     <script type="text/javascript" src="/static/plugins/ueditor/ueditor.config.js"></script>
  11.     <!-- 编辑器源码文件 -->
  12.     <script type="text/javascript" src="/static/plugins/ueditor/ueditor.all.js"></script>
  13. </head>
  14. <body style="padding: 20px">
  15.     <div class="layui-form">
  16.         @csrf
  17.         <input type="hidden" name="aid" value="{{$article['id']}}">
  18.         <div class="layui-form-item">
  19.             <label class="layui-form-label">文章标题</label>
  20.             <div class="layui-input-block">
  21.                 <input type="text" name="title" class="layui-input" value="{{$article['title']}}">
  22.             </div>
  23.         </div>
  24.         <div class="layui-form-item">
  25.             <label class="layui-form-label">文章副标题</label>
  26.             <div class="layui-input-block">
  27.                 <input type="text" name="subtitle" class="layui-input" value="{{$article['subtitle']}}">
  28.             </div>
  29.         </div>
  30.         <div class="layui-form-item">
  31.             <label class="layui-form-label">文章分类</label>
  32.             <div class="layui-input-block">
  33.                 <select name="cid">
  34.                     <option value="0">请选择新闻的分类</option>
  35.                     @foreach ($cates as $cate)
  36.                     <option value="{{$cate['cid']}}" {{$cate['cid']===$article['cid']?'selected':''}}>{{$cate['title']}}</option>
  37.                     @endforeach
  38.                 </select>
  39.             </div>
  40.         </div>
  41.         <div class="layui-form-item">
  42.             <label class="layui-form-label">封面图</label>
  43.             <div class="layui-input-block">
  44.                 <img id="preview_img" src="{{$article['thumb']}}" style="height: 30px">
  45.                 <button type="button" class="layui-btn" id="img_upload">
  46.                       <i class="layui-icon">&#xe67c;</i>上传图片
  47.                 </button>
  48.             </div>
  49.         </div>
  50.         <div class="layui-form-item">
  51.             <label class="layui-form-label">关键词</label>
  52.             <div class="layui-input-block">
  53.                 <input type="text" name="keywords" class="layui-input" value="{{$article['keywords']}}">
  54.             </div>
  55.         </div>
  56.         <div class="layui-form-item">
  57.             <label class="layui-form-label">描述</label>
  58.             <div class="layui-input-block">
  59.                 <textarea name="descs" placeholder="请输入内容" class="layui-textarea">{{$article['descs']}}</textarea>
  60.             </div>
  61.         </div>
  62.         <!-- 文章详情 -->
  63.         <div class="layui-form-item">
  64.             <label class="layui-form-label">文章内容</label>
  65.             <div class="layui-input-block">
  66.             <!-- 加载编辑器的容器 -->
  67.                 <script id="container" name="contents" type="text/plain">{!!$contents['contents']!!}</script>
  68.             </div>
  69.         </div>
  70.         <div class="layui-form-item">
  71.             <label class="layui-form-label">状态</label>
  72.             <div class="layui-input-block">
  73.                 <input type="checkbox" name="status" {{$article['status']===1?'checked':''}} lay-skin="primary" title="发布">
  74.             </div>
  75.         </div>
  76.     </div>
  77. </body>
  78. </html>
  79. <script>
  80.     layui.use(['upload','form'], function(){
  81.       var upload = layui.upload;
  82.       var form = layui.form;
  83.       $ = layui.jquery;
  84.       var _token=$('input[name="_token"]').val();
  85.       //执行实例
  86.       var uploadInst = upload.render({
  87.         elem: '#img_upload' //绑定元素
  88.         ,url: '/admins/files/upload_img' //上传接口
  89.         ,data: {_token:_token}
  90.         ,done: function(res){
  91.           //上传完毕回调
  92.           // console.log('success');
  93.           $('#preview_img').attr('src',res.data.src);
  94.         }
  95.         ,error: function(){
  96.           //请求异常回调
  97.         }
  98.       });
  99.       // 实例化编辑器
  100.         // var ue = UE.getContent();
  101.         // 不要有var
  102.         ue = UE.getEditor('container', {
  103.             autoHeightEnabled: true
  104.             ,initialFrameWidth: '100%'  //初始化编辑器宽度,默认1000
  105.             ,minFrameWidth: '760'    //编辑器拖动时最小宽度,默认800
  106.             ,initialFrameHeight: 450 //初始化高度
  107.             ,minFrameHeight:630 
  108.             ,initialContent:'请输入详细的内容'
  109.         });
  110.     });
  112.     // 文章保存
  113.     function save() {
  114.         // var title = $.trim($('input[name="title"]').val());
  115.         // var subtitle = $.trim($('input[name="subtitle"]').val());
  116.         // var cid = parseInt($('select[name="cid"]').val());
  117.         // var preview_img = $('#preview_img').arrt('src');
  118.         // var keywords = $('input[name="keywords"]').val();
  119.         // var descs = $('textarea[name="descs"]').val();
  120.         // var content = UE.getContent();
  121.         // var status = $('input[name="status"]').is(':checked')?1:0;
  123.         var data={};
  124.         data.aid=$('input[name="aid"]').val();
  125.         data.title=$.trim($('input[name="title"]').val());
  126.         data.subtitle=$.trim($('input[name="subtitle"]').val());
  127.         data.cid=parseInt($('select[name="cid"]').val());
  128.         data.preview_img=$('#preview_img').attr('src');
  129.         data.keywords=$('input[name="keywords"]').val();
  130.         data.descs=$('textarea[name="descs"]').val();
  131.         // 全局变量
  132.         data.contents=ue.getContent();
  133.         data.status=$('input[name="status"]').is(':checked')?1:0;
  134.         data._token=$('input[name="_token"]').val();
  136.         if (data.title==='') {
  137.             return layer.alert('填写文章标题',{icon:2});
  138.         }
  139.         if (isNaN(data.cid) || data.cid<=0) {
  140.             return layer.alert('请勾选文章分类',{icon:2});
  141.         }
  142.         $.post('/admins/article/save',data,function(res){
  143.             if (res.code > 0) {
  144.                 return layer.alert(res.message, {
  145.                     icon: 2
  146.                 });
  147.             }
  148.             layer.msg('添加文章成功');
  149.             setTimeout(function() {
  150.                 parent.window.location.reload();
  151.             }, 1000)
  152.         },'json');
  153.     }
  154. </script>

6 增加文章分类页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>文章分类添加</title>
  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  9.     <script src="/static/plugins/layui/layui.js"></script>
  10.     <link rel="stylesheet" href="/static/css/admin_index.css">
  11. </head>
  13. <body style="padding:20px;">
  15. </body>
  16. <div class="layui-form">
  17.     @csrf
  18.     <input type="hidden" name="cid" value="{{$title['cid']}}">
  19.     <div class="layui-form-item">
  20.         <label class="layui-form-label">分类名称</label>
  21.         <div class="layui-input-block">
  22.             <input type="text" class="layui-input" name="title" value="{{$title['title']}}">
  23.         </div>
  24.     </div>
  25.     <!-- <div class="layui-input-block">
  26.         <button class="layui-btn" onclick="save()">保存</button>
  27.     </div> -->
  28. </div>
  30. </html>
  31. <script>
  32. layui.use(['layer'], function() {
  33.     var layer = layui.layer;
  34.     $ = layui.jquery;
  35. });
  37. function save() {
  38.     var title = $.trim($('input[name="title"]').val());
  39.     var cid = $('input[name="cid"]').val();
  40.     if (title === '') {
  41.         return layer.alert('请填写分类标题', {
  42.             icon: 2
  43.         });
  44.     }
  45.     var _token = $('input[name="_token"]').val();
  46.     $.post('/admins/article/save_cate', {
  47.         cid: cid,
  48.         title: title,
  49.         _token: _token
  50.     }, function(res) {
  51.         if (res.code > 0) {
  52.             return layer.alert(res.message, {
  53.                 icon: 2
  54.             });
  55.         }
  56.         layer.msg('添加分类成功');
  57.         setTimeout(function() {
  58.             parent.window.location.reload();
  59.         }, 1000)
  60.     }, 'json');
  61. }
  62. </script>

7 文章分类列表页

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>新闻分类列表</title>
  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  9.     <script src="/static/plugins/layui/layui.js"></script>
  10.     <link rel="stylesheet" href="/static/css/admin_index.css">
  11. </head>
  13. <body style="padding: 20px;">
  14.     <div style="float: right;padding: 10px;">
  15.         <button class="layui-btn" onclick="add()">添加</button>
  16.     </div>
  17.     <table class="layui-table">
  18.         @csrf
  19.         <thead>
  20.             <tr>
  21.                 <th>ID</th>
  22.                 <th>分类名称</th>
  23.                 <th>操作</th>
  24.             </tr>
  25.         </thead>
  26.         <tbody>
  27.             @foreach ($lists as $item)
  28.             <tr>
  29.                 <td>{{$item['cid']}}</td>
  30.                 <td>{{$item['title']}}</td>
  31.                 <td>
  32.                     <button class="layui-btn layui-btn-xs" onclick="add({{$item['cid']}})">修改</button>
  33.                     <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({{$item['cid']}})">删除</button>
  34.                 </td>
  35.             </tr>
  36.             @endforeach
  37.         </tbody>
  38.     </table>
  39. </body>
  41. </html>
  42. <script>
  43. layui.use(['layer'], function() {
  44.     var layer = layui.layer;
  45.     $ = layui.jquery;
  46. });
  48. function add(cid) {
  49.     //iframe层
  50.     layer.open({
  51.         type: 2,
  52.         title: cid > 0 ? '修改分类' : '添加分类',
  53.         shadeClose: true,
  54.         shade: 0.8,
  55.         area: ['500px', '400px'],
  56.         content: '/admins/article/add_cate?cid=' + cid, //iframe的url
  57.         btn: ['保存'],
  58.         yes: function(index, layero) {
  59.             var body = layer.getChildFrame('body', index);
  60.             var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
  61.             iframeWin.save();
  62.         }
  63.     });
  64. }
  66. function del(cid) {
  67.     //询问框
  68.     layer.confirm('是否确定删除分类？', {
  69.         icon: 3,
  70.         btn: ['确定', '取消'] //按钮
  71.     }, function() {
  72.         var _token = $('input[name="_token"]').val();
  73.         $.post('/admins/article/del_cate', {
  74.             cid: cid,
  75.             _token: _token
  76.         }, function(res) {
  77.             if (res.code > 0) {
  78.                 return layer.alert(res.message, {
  79.                     icon: 2
  80.                 });
  81.             }
  82.             layer.msg('删除分类成功');
  83.             setTimeout(function() {
  84.                 window.location.reload();
  85.             }, 1000)
  86.         }, 'json');
  87.     });
  88. }
  89. </script>

8 演示地址

http://www.php520.vip/
测试账号：admin 密码：123456 权限：超管
测试账号：ceshi 密码：123456 权限：普管

9 总结

一个完整的博客应用不能没有后台管理系统。laravel框架结合layui快速开发一个小型门户博客文章系统，不仅速度快，而且维护方便。

上一条：laravel通用后台-视频管理系统开发下一条：演示简单，上下文和结构伪类选择器（0615）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多