一、文章分类 数据库

1、创建 文章分类数据表并填充数据

  1. #【新建】文章分类表
  2. DROP TABLE IF EXISTS `article_cate`;
  3. CREATE TABLE `article_cate` (
  4.   `id` int(10) NOT NULL AUTO_INCREMENT,
  5.   `pid` int(10) NOT NULL DEFAULT '0',
  6.   `title` varchar(255) NOT NULL DEFAULT '' COMMENT '分类名称',
  7.   PRIMARY KEY (`id`)
  8. ) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
  10. #【插入】 文章分类表
  11. INSERT INTO `article_cate` VALUES ('1', '0', '视频');
  12. INSERT INTO `article_cate` VALUES ('2', '1', '热点');
  13. INSERT INTO `article_cate` VALUES ('3', '0', '社会');
  14. INSERT INTO `article_cate` VALUES ('4', '2', '娱乐');
  15. INSERT INTO `article_cate` VALUES ('5', '0', '军事');

" class="reference-link">

二、文章分类 模块

1、创建 文章分类列表 视图模板

2、编辑 文章分类列表 视图模板


resources/views/admins/article/cates.blade.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>文章分类列表</title>
  5.     <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/layui/layui.js"></script>
  7. </head>
  8. <body style="padding: 10px;">
  9. <div style="text-align: right;">
  10.     <button class="layui-btn layui-btn-sm" onclick="add()"><i class="layui-icon layui-icon-addition"></i>添加</button>
  11. </div>
  12. <table class="layui-table">
  13.     <thead>
  14.     <tr>
  15.         <th>ID</th>
  16.         <th>分类名称</th>
  17.         <th>操作</th>
  18.     </tr>
  19.     </thead>
  20.     <tbody>
  21.     @foreach($lists as $item)
  22.         <tr>
  23.             <td>{{$item['id']}}</td>
  24.             <td>{{$item['title']}}</td>
  25.             <td>
  26.                 <button class="layui-btn layui-btn-xs" onclick="edit({{$item['id']}})">修改</button>
  27.             </td>
  28.         </tr>
  29.     @endforeach
  30.     </tbody>
  31. </table>
  32. </body>
  33. </html>
  34. <script type="text/javascript">
  35.     layui.use(['layer'], function () {
  36.         $ = layui.jquery;
  37.         layer = layui.layer;
  38.     });
  40.     // 添加文章分类
  41.     function add() {
  42.         layer.open({
  43.             type: 2,
  44.             title: '添加文章分类',
  45.             shade: 0.3,
  46.             area: ['450px', '200px;'],
  47.             content: '/admins/article/add_cates'
  48.         });
  49.     }
  51.     // 修改文章分类
  52.     function edit(cid) {
  53.         layer.open({
  54.             type: 2,
  55.             title: '修改文章分类',
  56.             shade: 0.3,
  57.             area: ['450px', '200px'],
  58.             content: '/admins/article/edit_cates?cid=' + cid
  59.         });
  60.     }
  61. </script>

3、创建 文章分类 控制器

4、编辑 文章分类 控制器

app/Http/Controllers/admins/Article.php

  1. <?php
  3. namespace App\Http\Controllers\admins;
  5. use App\Http\Controllers\Controller;
  7. /**
  8.  * 文章管理 控制器
  9.  * @package App\Http\Controllers\admins
  10.  */
  11. class Article extends Controller {
  13. }

5、文章分类列表 控制器处理

app/Http/Controllers/admins/Article.php

  1.     // 分类列表
  2.     public function cates() {
  3.         $data['lists'] = DB::table('article_cate')->lists();
  4.         return view('/admins/article/cates', $data);
  5.     }

6、文章分类列表 路由注册

routes/web.php

  1. use App\Http\Controllers\admins\Article;
  3. //显示文章分类列表
  4. Route::get('/admins/article/cates',[Article::class, 'cates']);

7、查看效果

三、文章分类添加与保存 模块

1、创建 文章分类添加与保存 视图模板

2、编辑 文章分类添加与保存 视图模板


resources/views/admins/article/add_cates.blade.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>添加分类</title>
  5.    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  6.    <script type="text/javascript" src="/static/layui/layui.js"></script>
  7. </head>
  8. <body style="padding: 10px;">
  9.    <div class="layui-form">
  10.       @csrf
  11.       <div class="layui-form-item">
  12.          <label class="layui-form-label">分类名称</label>
  13.          <div class="layui-input-block">
  14.             <input type="text" class="layui-input" name="title">
  15.          </div>
  16.       </div>
  17.       <div class="layui-input-block">
  18.          <button class="layui-btn" onclick="save()">保存</button>
  19.       </div>
  20.    </div>
  21. </body>
  22. </html>
  23. <script type="text/javascript">
  24.    layui.use(['layer'],function(){
  25.       layer = layui.layer;
  26.       $ = layui.jquery;
  27.    });
  29.    function save(){
  30.       var title = $('input[name="title"]').val();
  31.       var _token = $('input[name="_token"]').val();
  32.       if(title==''){
  33.          return layer.alert('请输入分类名称',{icon:2});
  34.       }
  35.       $.post('/admins/article/save_cates',{title:title,_token:_token},function(res){
  36.          if(res.code>0){
  37.             return layer.alert(res.msg,{icon:2});
  38.          }
  39.          layer.msg(res.msg);
  40.          setTimeout(function(){parent.window.location.reload();},1000);
  41.       },'json');
  42.    }
  43. </script>

3、文章分类添加与保存 控制器处理

app/Http/Controllers/admins/Article.php

  1. // 添加分类
  2.     public function add_cates() {
  3.         return view('/admins/article/add_cates');
  4.     }
  6.     // 保存分类
  7.     public function save_cates(Request $req) {
  8.         $title = trim($req->title);
  9.         // 查看一下有没有重复的分类
  10.         $item = DB::table('article_cate')->where('title', $title)->item();
  11.         if ($item) {
  12.             return json_encode(array('code' => 1, 'msg' => '该分类已存在'));
  13.         }
  14.         DB::table('article_cate')->insert(['title' => $title]);
  15.         return json_encode(array('code' => 0, 'msg' => '保存成功'));
  16.     }

4、文章分类添加与保存 路由注册

  1.     //添加文章分类 弹窗
  2.     Route::get('/admins/article/add_cates',[Article::class, 'add_cates']);
  3.     //保存文章分类 处理
  4.     Route::post('/admins/article/save_cates',[Article::class, 'save_cates']);

5、查看效果

四、文章分类编辑与保存编辑 模块

1、创建 文章分类编辑与保存编辑 视图模板

2、编辑 文章分类编辑与保存编辑 视图模板


resources/views/admins/article/edit_cates.blade.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>修改分类</title>
  5.     <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/layui/layui.js"></script>
  7. </head>
  8. <body style="padding: 10px;">
  9. <div class="layui-form">
  10.     @csrf
  11.     <input type="hidden" name="cid" value="{{$item['id']}}">
  12.     <div class="layui-form-item">
  13.         <label class="layui-form-label">分类名称</label>
  14.         <div class="layui-input-block">
  15.             <input type="text" class="layui-input" name="title" value="{{$item['title']}}">
  16.         </div>
  17.     </div>
  18.     <div class="layui-input-block">
  19.         <button class="layui-btn" onclick="save()">保存</button>
  20.     </div>
  21. </div>
  22. </body>
  23. </html>
  24. <script type="text/javascript">
  25.     layui.use(['layer'],function(){
  26.         layer = layui.layer;
  27.         $ = layui.jquery;
  28.     });
  30.     function save(){
  31.         var cid = $('input[name="cid"]').val();
  32.         var title = $('input[name="title"]').val();
  33.         var _token = $('input[name="_token"]').val();
  34.         if(title==''){
  35.             return layer.alert('请输入分类名称',{icon:2});
  36.         }
  37.         $.post('/admins/article/save_edit_cates',{cid:cid,title:title,_token:_token},function(res){
  38.             if(res.code>0){
  39.                 return layer.alert(res.msg,{icon:2});
  40.             }
  41.             layer.msg(res.msg);
  42.             setTimeout(function(){parent.window.location.reload();},1000);
  43.         },'json');
  44.     }
  45. </script>

3、文章分类编辑与保存编辑 控制器处理

  1. // 修改分类
  2.     public function edit_cates(Request $req) {
  3.         $cid = (int)$req->cid;
  4.         $data['item'] = DB::table('article_cate')->where('id', $cid)->item();
  5.         return view('/admins/article/edit_cates', $data);
  6.     }
  8.     // 保存修改分类
  9.     public function save_edit_cates(Request $req) {
  10.         $cid = (int)$req->cid;
  11.         $title = trim($req->title);
  12.         DB::table('article_cate')->where('id', $cid)->update(['title' => $title]);
  13.         return json_encode(array('code' => 0, 'msg' => '保存成功'));
  14.     }

4、文章分类编辑与保存编辑 注册路由

routes/web.php

  1. //编辑文章分类 弹窗
  2.     Route::get('/admins/article/edit_cates',[Article::class, 'edit_cates']);
  3.     //保存编辑文章分类 处理
  4.     Route::post('/admins/article/save_edit_cates',[Article::class, 'save_edit_cates']);

5、查看效果

更多相关文章

  1. 后台七 友情链接
  2. VIM 文本编辑器
  3. 几个大神程序猿更喜欢用的Python编辑器！
  4. 后台五 角色管理
  5. 后台四 菜单列表
  6. 后台三 账号列表
  7. 后台一 搭建项目
  8. 一个 Markdown 编辑器的诞生
  9. VScode编辑器设置中文的教程，超详细的

随机推荐

  1. 成天说要删库跑路，这次真的有人干了
  2. Python+Kepler.gl轻松制作时间轮播地图
  3. 必知必会的8个Python列表技巧
  4. JavaScript的工作原理：V8引擎内部机制及优
  5. 对比Excel，学习pandas数据透视表
  6. 数据分析实战：利用python对心脏病数据集进
  7. 机器学习中最常见的四种分类模型
  8. 基于geopandas的空间数据分析——空间计
  9. Github 30000 Star的免费BI工具：Superset
  10. RocketMQ安装部署