Community Learn Tools Library Leisure
search
English
Home > List of blog posts > laravel通用后台-新闻文章系统开发
Blogger Information
Blog 62
fans 7
comment 2
visits 58202
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
laravel通用后台-新闻文章系统开发
我是郭富城
Original
1359 people have browsed it

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快速开发一个小型门户博客文章系统，不仅速度快，而且维护方便。

Correcting teacher：WJWJ

Correction status：qualified

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