Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实战3 ele于tp：菜单操作(增删改）、左侧栏目循环展示
Blogger Information
Blog 77
fans 0
comment 0
visits 55013
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
实战3 ele于tp：菜单操作(增删改）、左侧栏目循环展示
Jet的博客
Original
358 people have browsed it

一、涉及代码文件

文件：

  • shop/src/views/Menu.vue (新增：菜单管理 新建/修改/删除方法)
  • shop/src/network/Index.js (更新：菜单管理 新建/修改/删除请求方法)
  • tp6/app/admin/controller/Index.php (更新：菜单管理 新建/修改/删除 方法、左侧栏目 循环展示方法，给 Menu.vue 和 Index.vue 访问提供数据)
  • shop/src/views/Index.vue (更新：左侧栏目 循环展示)

1、Menu.vue文件代码

  1. <template>
  2.     <div>
  3.     <!--
  4.     <el-space wrap style="margin-bottom:20px;">
  5.         <el-input v-model="data.search" size="small" placeholder="Type to search" />
  6.         <el-button type="" @click="search()">搜索</el-button>
  7.     </el-space>-->
  8.     <el-space wrap style="margin-bottom:20px;">
  9.         <el-button type="" @click="add()">添加</el-button>
  10.         <el-button type="" @click="go_url(1)" v-if="data.level==2" >上一级</el-button>
  11.     </el-space>
  13.     <el-table 
  14.         :data="data.table" 
  15.         border 
  16.         style="width: 100%"
  17.         @select="select"
  18.     >
  19.     <!--
  20.     <el-table-column align="right">
  21.     </el-table-column>
  22.       <el-table-column label="选择" type="selection" />-->
  23.       <el-table-column prop="sort" label="排序" min-width="50" />
  24.       <el-table-column prop="mid" label="ID" />
  25.       <el-table-column prop="label" label="菜单名">
  26.       </el-table-column>
  27.       <el-table-column prop="type" label="菜单类型">
  28.         <!--插槽-->
  29.         <!-- scope 相当于循环里的一次数据
  30.             foreach ( $data['table] as $v)
  31.             scope.row 就是相当于是 $v
  32.             -->
  33.         <template #default="scope">
  34.             <span v-if="scope.row.type == 0">
  35.                 分组
  36.             </span>
  37.             <span v-else-if="scope.row.type == 1">
  38.                 内部跳转
  39.             </span>
  40.             <span v-else-if="scope.row.type == 2">
  41.                 外部跳转
  42.             </span>
  43.         </template>
  44.       </el-table-column>
  45.       <el-table-column prop="src" label="链接源">      
  46.         <template #default="scope">
  47.             {{ scope.row.src ? scope.row.src : '' }}
  48.         </template>
  49.       </el-table-column>
  50.       <el-table-column prop="status" label="状态">
  51.         <template #default="scope">
  52.             <span v-if="scope.row.status == 1">
  53.                 正常
  54.             </span>
  55.             <span v-else-if="scope.row.status == 2">
  56.                 隐藏
  57.             </span>
  58.         </template>
  59.       </el-table-column>
  60.       <el-table-column prop="mid" label="操作">      
  61.         <template #default="scope">
  62.             <!-- 可直接返回
  63.             <el-button type="primary" @click="go_url(scope.row)" v-if="scope.row.parent_id == 0">下一级</el-button>-->
  64.             <el-button type="primary" @click="go_url(2,scope.row.mid)" v-if="scope.row.type == 0">下一级</el-button>
  65.             <el-button type="warning" @click="add(scope.row)">修改</el-button>
  66.             <el-button type="danger" @click="del(scope.row)">删除</el-button>
  67.         </template>
  68.       </el-table-column>
  69.     </el-table>
  70.     <el-pagination 
  71.         layout="prev, pager, next" 
  72.         :total="data.total"
  73.         :page-size="10"
  74.         @current-change="fun"
  75.     />
  76.     <!--
  77.         total:总条数
  78.         page-size:一页显示多少条
  79.     -->
  81.     <!--添加/修改 弹窗-->
  82.     <el-dialog v-model="data.add_form" :title="data.title">
  83.         <el-form :model="form" label-width="120px" size="large">
  84.             <el-form-item label="菜单名">
  85.                 <el-input v-model="form.label" />
  86.             </el-form-item>
  87.             <el-form-item label="所属">
  88.                 <el-select v-model="form.parent_id" class="m-2" placeholder="Select" size="large">
  89.                     <el-option label="顶层" value="0" />
  90.                     <el-option :label="item.label" :value="item.mid" v-for="(item,index,key) in data.ss" />
  91.                 </el-select>
  92.             </el-form-item>
  93.             <el-form-item label="菜单类型">                
  94.                 <el-select v-model="form.type" class="m-2" placeholder="Select" size="large">
  95.                     <el-option label="分组" :value="0" />
  96.                     <el-option label="内部跳转" :value="1" />
  97.                     <el-option label="外部跳转" :value="2" />
  98.                 </el-select>
  99.             </el-form-item>
  100.             <el-form-item label="链接源">
  101.                 <el-input v-model="form.src" />
  102.             </el-form-item>
  103.             <el-form-item label="排序">
  104.                 <el-input v-model="form.sort" />
  105.             </el-form-item>
  106.             <el-form-item label="状态">
  107.                 <el-select v-model="form.status" class="m-2" placeholder="Select" size="large">
  108.                     <el-option label="开启" value="1" />
  109.                     <el-option label="关闭" value="0" />
  110.                 </el-select>
  111.             </el-form-item>
  112.         </el-form>
  114.         <template #footer>
  115.             <span class="dialog-footer">
  116.                 <el-button @click="data.add_form = false">取消</el-button>
  117.                 <el-button type="primary" @click="add_form_json()">
  118.                     {{ data.title }}
  119.                 </el-button>
  120.             </span>
  121.         </template>
  123.     </el-dialog>
  125. </div>
  126. </template>
  127. <script>
  128. import { reactive } from "vue"; // 引入动态创建
  129. import { useRoute, useRouter } from "vue-router";   //跳转路由
  130. import { MenuLists , MenuAdd , MenuDel  } from "../network/index";
  131. export default{
  132.     setup () {
  133.         // 展示数据
  134.         const data = reactive({
  135.             table : [],
  136.             total : 0,
  137.             ss : [],
  138.             search : '',
  139.             add_form : false,
  140.             title : '添加',
  141.             level : 1 , // 当前为1, 下面判断上一级下一级按钮是否显示依据
  142.         });
  144.         // 展示的请求接口
  145.         MenuLists().then( (e)=>{
  146.             data.table = e.data.data.menu;
  147.             data.total = e.data.data.count;
  148.             //console.log(data.table);
  149.             data.ss = e.data.data.ss;
  150.         })
  152.         // 选择事件
  153.         const select = (selection,row)=>{
  154.             console.log(selection);
  155.             console.log(row);
  156.         }
  158.         // 翻页方法
  159.         const fun = (p) => {
  160.             MenuLists({p:p}).then( (e)=>{
  161.                 data.table = e.data.data.menu;
  162.             })
  163.             // Index.php接收传值
  164.         }
  166.         // 菜单 下一跳转
  167.         const router = useRouter();
  168.         /* 这方法可行
  169.         const go_url = (e) => {
  170.             /*
  171.             router.push({
  172.                 path: "/index/menu",
  173.                 query: {
  174.                     mid : e.mid
  175.                 }
  176.             })
  178.             MenuLists({mid:e.mid}).then( (e)=>{
  179.                 data.table = e.data.data.menu;
  180.                 data.total = e.data.data.count;
  181.             })
  182.         }
  183.         */
  184.         const go_url = (e,mid) => {
  185.             let m = 0;
  186.             if ( e == 2 ){
  187.                 m = mid;
  188.                 data.level = 2;
  189.             } else {
  190.                 m = 0;
  191.                 data.level = 1;
  192.             }
  193.             MenuLists({mid:m}).then( (ee)=>{
  194.                 data.table = ee.data.data.menu;
  195.                 data.total = ee.data.data.count;
  196.                 //data.ss = e.data.data.ss;
  197.             })
  198.         }
  200.         // 搜索方法
  201.         const search = () => {
  202.             MenuLists({search:data.search}).then( (e)=>{
  203.                 data.table = e.data.data.menu;
  204.                 data.total = e.data.data.count;
  205.                 data.ss = e.data.data.ss;
  206.             })
  207.         }
  209.         // 添加 修改
  210.         // 展开form表单
  211.         const form = reactive({
  212.             mid : 0,
  213.             label: '',
  214.             type: '0',
  215.             src : '',
  216.             sort : 0,
  217.             status: '1',
  218.             parent_id: '0',
  219.         })
  220.         // 添加方法,如果为真,打开表单
  221.         // 点击接收传uid数据,若有
  222.         const add = (e) => {
  223.             console.log(e);
  224.             data.add_form = true;
  225.             if(e){
  226.                 form.mid = e.mid;
  227.                 form.label = e.label;
  228.                 form.parent_id = e.parent_id;
  229.                 form.type = e.type;
  230.                 form.src = e.src;
  231.                 form.sort = e.sort;
  232.                 form.status = e.status;
  233.                 data.title = '修改';
  234.             }else{
  235.                 form.mid = 0;
  236.                 form.label = '';
  237.                 form.parent_id = '0';
  238.                 form.type = '0' ;
  239.                 form.src = '';
  240.                 form.sort = 0 ;
  241.                 form.status = '1' ;
  242.                 data.title = '添加';
  243.             }
  244.         }
  245.         // 确定提交添加的数据
  246.         const add_form_json = () => {
  247.             // 需要把数据提交给php接口
  248.             // console.log(form);
  249.             MenuAdd(form).then((e) =>{
  250.                 // console.log(e);
  251.                 alert(e.data.msg);
  252.                 if(e.data.code == 0){
  253.                     MenuLists().then( (e)=>{
  254.                         // 添加成功后自动刷新数据
  255.                         data.table = e.data.data.menu;
  256.                         data.total = e.data.data.count;
  257.                         console.log(data.table);
  258.                         // 关闭添加表单
  259.                         data.add_form = false;
  260.                     })
  261.                 }
  262.             })
  264.         }
  266.         // 删除
  267.         const del = (e) => {
  268.             MenuDel({mid:e.mid}).then( (res) => {
  269.                 alert(res.data.msg);
  270.                 if( res.data.code == 0 ){
  271.                     MenuLists().then( (e)=>{
  272.                         // 添加成功后自动刷新数据
  273.                         data.table = e.data.data.menu;
  274.                         data.total = e.data.data.count;
  275.                         data.add_form = false;
  276.                     })
  277.                 }
  278.             })
  279.         }
  281.         // 数据暴露出去
  282.         return {
  283.             data,
  284.             select,
  285.             fun,
  286.             go_url,
  287.             search,
  288.             add,
  289.             form,
  290.             add_form_json,
  291.             del,
  292.         }
  293.     }
  294. }
  295. </script>

2、index.js文件代码

  1. import { request } from "./request.js";
  3. // 跳转至tp项目文件
  4. export function login(data){
  5.     return request ({
  6.         url : "Login/index",
  7.         method: "POST",
  8.         data
  9.     })
  10. }
  12. // 首页左侧菜单
  13. export function Index(data){
  14.     return request ({
  15.         url : "Index/index",
  16.         method: "POST",
  17.         data
  18.     })
  19. }
  21. // =======================管理员列表===============================
  23. // 展示管理员请求
  24. export function UserLists(data){
  25.     return request ({
  26.         url : "Index/UserLists",
  27.         method: "POST",
  28.         data
  29.     })
  30. }
  32. // 添加数据请求
  33. export function UserAdd(data){
  34.     return request ({
  35.         url : "Index/UserAdd",
  36.         method: "POST",
  37.         data
  38.     })
  39. }
  41. // 修改数据请求
  42. export function UserEdit(data){
  43.     return request ({
  44.         url : "Index/UserEdit",
  45.         method: "POST",
  46.         data
  47.     })
  48. }
  51. // 删除数据请求
  52. export function UserDel(data){
  53.     return request ({
  54.         url : "Index/UserDel",
  55.         method: "POST",
  56.         data
  57.     })
  58. }
  60. // =======================管理组列表===============================
  61. // 展示管理组请求
  62. export function GroupLists(data){
  63.     return request ({
  64.         url : "Index/GroupLists",
  65.         method: "POST",
  66.         data
  67.     })
  68. }
  70. // 新增管理组请求
  71. export function GroupAdd(data){
  72.     return request ({
  73.         url : "Index/GroupAdd",
  74.         method: "post",
  75.         data
  76.     })
  77. }
  79. // 删除管理组请求
  80. export function GroupDel(data){
  81.     return request ({
  82.         url : "Index/GroupDel",
  83.         method: "post",
  84.         data
  85.     })
  86. }
  89. // =======================菜单列表===============================
  91. // 展示菜单数据请求
  92. export function MenuLists(data){
  93.     return request ({
  94.         url : "Index/MenuLists",
  95.         method: "POST",
  96.         data
  97.     })
  98. }
  100. // 新增菜单请求
  101. export function MenuAdd(data){
  102.     return request ({
  103.         url : "Index/MenuAdd",
  104.         method: "post",
  105.         data
  106.     })
  107. }
  109. // 删除菜单请求
  110. export function MenuDel(data){
  111.     return request ({
  112.         url : "Index/MenuDel",
  113.         method: "post",
  114.         data
  115.     })
  116. }

3、Index.php文件代码

  1. <?php
  2. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Db;
  7. class Index extends BaseController
  8. {
  9.     public function __construct(){
  10.         // 跨域请求
  11.         header("Access-Control-Allow-Origin:*");
  12.     }
  14.     // 首页左侧菜单 
  15.     public function index(){
  16.         // 状态为1的全部展示出来，但是1级和2级的都在一起
  17.         $tmp = Db::table('bew_admin_sys_menu')->where('status',1)->order('parent_id')->select()->toArray();
  19.         $menu = [];
  20.         foreach ($tmp as $v){
  21.             if($v['parent_id'] == 0){
  22.                 // 将 menu为1000或者100的下标 保存到 这个菜单
  23.                 $menu[ $v['mid'] ] = $v;
  24.             } else {
  25.                 // 现在时二级菜单，它的上一级，就是parent_id，找到它自己的parent_id
  26.                 // $v['mid']  一级菜单的下标   $v['parent_id'] 二级菜单的上级下标
  27.                 $menu[ $v['parent_id'] ] ['son'] [] = $v;
  28.             }
  29.         }
  31.         echo json_encode([
  32.             'code' => 0,
  33.             'msg' => '成功',
  34.             'data' => $menu
  35.         ]);
  36.     }
  38.     /*
  39.     public function index()
  40.     {
  41.         return '<style type="text/css">*{ padding: 0; margin: 0; } div{ padding: 4px 48px;} a{color:#2E5CD5;cursor: pointer;text-decoration: none} a:hover{text-decoration:underline; } body{ background: #fff; font-family: "Century Gothic","Microsoft yahei"; color: #333;font-size:18px;} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.6em; font-size: 42px }</style><div style="padding: 24px 48px;"> <h1>:) </h1><p> ThinkPHP V' . \think\facade\App::version() . '<br/><span style="font-size:30px;">16载初心不改 - 你值得信赖的PHP框架</span></p><span style="font-size:25px;">[ V6.0 版本由 <a href="https://www.yisu.com/" target="yisu">亿速云</a> 独家赞助发布 ]</span></div><script type="text/javascript" src="https://e.topthink.com/Public/static/client.js"></script><think id="ee9b1aa918103c4fc"></think>';
  42.     }
  43.     */
  44.     // =======================管理员方法===============================
  46.     // 管理员列表
  47.     public function UserLists(){
  48.         $p = input('post.p',1);
  49.         $search = input('post.search','');
  51.         // 在查询数出来的时候，
  52.         // $user = Db::table('xpcms_admin')->select()->toArray();
  54.         // limit方法、pgae方法
  55.         // count方法统计数据库有多少条数据
  57.         $where = [];
  58.         if(!empty($search)){
  59.             $where1 = [['account','like','%'.$search.'%']];
  60.             $where2 = [['name','like','%'.$search.'%']];
  61.             $where3 = [['phone','like','%'.$search.'%']];
  62.             $where = [$where1,$where2,$where3];
  63.         }
  64.         $count = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->count();
  65.         $user = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->page($p,5)->select()->toArray();
  66.         // toArray 数组形式，显示时间戳
  67.         foreach($user as &$u){
  68.             $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
  69.         }
  71.         $arr = [
  72.             'count' => $count,
  73.             'user' => $user,
  74.         ];
  76.         // php接口、只能有一次输出结果值
  77.         echo json_encode([
  78.             'code' => 0,
  79.             'msg' => '成功',
  80.             'data' => $arr
  81.         ]);
  82.     }
  84.     // 添加&修改管理员，接收数据
  85.     public function UserAdd(){
  86.         $post = input('post.');
  88.         $data = [
  89.             'account' => $post['account'],
  90.             'name' => $post['name'],
  91.             'phone' => $post['phone'],
  92.             'qq' => $post['qq'],
  93.             'sex' => $post['sex'],
  94.             'time_last' => time(),
  95.         ];
  97.         // 查询单条数据
  98.         $user = Db::table('bew_admin_user')->where('account',$post['account'])->find();
  101.         if ( $post['uid'] == 0 ){
  103.             // 判断查询出来的用户是否存在，若存在就退出，否则新建
  104.             if(!empty($user)){
  105.                 echo json_encode([
  106.                     'code' => 1,
  107.                     'msg' => '账号已存在'
  108.                 ]);
  109.                 exit;
  110.             }
  112.             // 如果为0.就添加
  113.             $data['password'] = md5($post['password']);
  114.             $data['time_add'] = time();
  115.             $ret = Db::table('bew_admin_user')->insert($data);
  117.         } else {
  119.             // 判断查询出来的用户名是否存在，且是不等于查询出来的uid，则修改
  120.             if(!empty($user) && $post['uid'] != $user['uid']){
  121.                 echo json_encode([
  122.                     'code' => 1,
  123.                     'msg' => '账号已存在'
  124.                 ]);
  125.                 exit;
  126.             }
  128.             // 如果不为0 就修改
  129.             if(!empty($post['password'])){
  130.                 $data['password'] = md5($post['password']);
  131.             }
  132.             $ret = Db::table('bew_admin_user')->where('uid', $post['uid'])->update($data);
  134.         }
  136.         // 添加&修改 后输出结果
  137.         if( $post['uid'] == 0 ){
  138.             if(empty($ret)){
  139.                 echo json_encode([
  140.                     'code' => 1,
  141.                     'msg' => '添加失败，请重试'
  142.                 ]);
  143.                 exit;
  144.             };    
  145.             echo json_encode([
  146.                 'code' => 0,
  147.                 'msg' => '添加成功'
  148.             ]);
  149.         } else {        
  150.             if(empty($ret)){
  151.                 echo json_encode([
  152.                     'code' => 1,
  153.                     'msg' => '修改失败，请重试'
  154.                 ]);
  155.                 exit;
  156.             };    
  157.             echo json_encode([
  158.                 'code' => 0,
  159.                 'msg' => '修改成功'
  160.             ]);
  161.         }
  162.     }
  164.     // 删除方法
  165.     public function UserDel(){
  166.         $uid = input('post.uid',0);
  167.         if($uid ==0){
  168.             echo json_encode([
  169.                 'code' => 1,
  170.                 'msg' => '请选择要删除的账号'
  171.             ]);
  172.             exit;
  173.         }
  175.         $del = Db::table('bew_admin_user')->where('uid', $uid)->update([
  176.             'status'=>2,
  177.             'time_last' => time(),
  178.         ]);
  180.         if(empty($del)){
  181.             echo json_encode([
  182.                 'code' => 1,
  183.                 'msg' => '删除失败，请重试'
  184.             ]);
  185.             exit;
  186.         }
  188.         echo json_encode([
  189.             'code' => 0,
  190.             'msg' => '删除成功'
  191.         ]);
  192.         exit;
  193.     }
  195.     // =======================管理组方法===============================
  197.     // 管理组列表接口
  198.     public function GroupLists(){
  199.         $p = input('post.p',1);
  200.         $search = input('post.search','');
  201.         $where = [];
  202.         if(!empty($search)){
  203.             $where[] = ['group_name','like','%'.$search.'%'];
  204.         }
  206.         $count = Db::table('bew_admin_user_group')->where('status','<>',0)->where($where)->count();
  207.         $group = Db::table('bew_admin_user_group')->where('status','<>',0)->where($where)->page($p,3)->select()->toArray();
  208.         foreach($group as &$u){
  209.             $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
  210.         }
  213.         // =================================================================================================
  214.         // 新增权限管理
  215.         // 状态为1的全部展示出来，但是1级和2级的都在一起
  216.         $tmp = Db::table('bew_admin_sys_menu')->where('status',1)->order('parent_id')->select()->toArray();
  218.         $menu = [];
  219.         foreach ($tmp as $v){
  220.             if($v['parent_id'] == 0){
  221.                 // 将 menu为1000或者100的下标 保存到 这个菜单
  222.                 $menu[ $v['mid'] ] = $v;
  223.             } else {
  224.                 // 现在时二级菜单，它的上一级，就是parent_id，找到它自己的parent_id
  225.                 // $v['mid']  一级菜单的下标   $v['parent_id'] 二级菜单的上级下标
  226.                 $menu[ $v['parent_id'] ] ['son'] [] = $v;
  227.             }
  228.         }
  230.         // =================================================================================================
  233.         $arr = [
  234.             'count' => $count,
  235.             'group' => $group,
  236.             'menu' => $menu,
  237.         ];
  239.         // php接口、只能有一次输出结果值
  240.         echo json_encode([
  241.             'code' => 0,
  242.             'msg' => '成功',
  243.             'data' => $arr
  244.         ]);
  246.     }
  248.     // 添加管理组
  249.     public function GroupAdd(){
  250.         $post = input('post.');
  252.         $group = Db::table('bew_admin_user_group')->where('group_name', $post['group_name'])->find();
  254.         if($post['group_id'] == 0){
  255.             if(!empty($group)){
  256.                 echo json_encode([
  257.                     'code' => 1,
  258.                     'msg' => '添加失败，部门已存在'
  259.                 ]);
  260.                 exit;
  261.             }
  262.             $ret = Db::table('bew_admin_user_group')->insert([
  263.                 'group_name' => $post['group_name'],
  264.                 'status' => $post['status'],
  265.                 'rights' => json_encode($post['checkList']),
  266.                 'time_add' => time()
  267.             ]);
  268.         } else {
  269.             if(!empty($group) && $group['group_id'] != $post['group_id']){
  270.                 echo json_encode([
  271.                     'code' => 1,
  272.                     'msg' => '修改失败，部门已存在'
  273.                 ]);
  274.                 exit;
  275.             }
  276.             $ret = Db::table('bew_admin_user_group')->where('group_id',$post['group_id'])->update([
  277.                 'group_name' => $post['group_name'],
  278.                 'status' => $post['status'],
  279.                 'rights' => json_encode($post['checkList']),
  280.                 'time_add' => time(),
  281.                 'time_last' => time()
  282.             ]);
  283.         }
  285.         if($post['group_id'] == 0 ){
  286.             if(empty($ret)){
  287.                 echo json_encode([
  288.                     'code' => 1,
  289.                     'msg' => '添加失败，请重试'
  290.                 ]);
  291.                 exit;
  292.             }
  293.             echo json_encode([
  294.                 'code' => 0,
  295.                 'msg' => '添加成功'
  296.             ]);
  297.         } else {
  298.             if(empty($ret)){
  299.                 echo json_encode([
  300.                     'code' => 1,
  301.                     'msg' => '修改失败，请重试'
  302.                 ]);
  303.                 exit;
  304.             }
  305.             echo json_encode([
  306.                 'code' => 0,
  307.                 'msg' => '修改成功'
  308.             ]);
  309.         }
  310.     }
  312.     // 删除管理组
  313.     public function GroupDel(){
  314.         $group_id = input('post.group_id',0);
  315.         if($group_id == 0){
  316.             echo json_encode([
  317.                 'code' => 1,
  318.                 'msg' => '请选择要删除的管理组'
  319.             ]);
  320.             exit;
  321.         }
  323.         $ret = Db::table('bew_admin_user_group')->where('group_id',$group_id)->update([
  324.             'status' => 0,
  325.             'time_last' => time()
  326.         ]);
  329.         if(empty($ret)){
  330.             echo json_encode([
  331.                 'code' => 1,
  332.                 'msg' => '删除失败，请重试'
  333.             ]);
  334.             exit;
  335.         }
  337.         echo json_encode([
  338.             'code' => 0,
  339.             'msg' => '删除成功'
  340.         ]);
  341.     }
  343.     // =======================菜单方法===============================
  345.     /**
  346.      * 一般分php文件，是根据功能来分
  347.      * 用户相关放一个文件，并且统一处理
  348.      * 用户个人中心、订单列表、订单详情、充值功能、登录日志等
  349.      * 登录、注册放在一个文件，用户的未登录文件，统一处理的
  350.      *
  351.      * @return void
  352.      */
  353.     public function MenuLists(){
  354.         $p = input('post.p',1);
  355.         // 接收数据 mid
  356.         $mid = input('post.mid',0);
  357.         $count = Db::table('bew_admin_sys_menu')->where('parent_id',$mid)->count();
  358.         $menu = Db::table('bew_admin_sys_menu')->where('parent_id',$mid)->order('sort DESC')->page($p,10)->select()->toArray();
  361.         //需要把一级菜单获取出来，作为添加时选择项
  362.         $ss = Db::table('bew_admin_sys_menu')->where('parent_id',0)->where('type',0)->order('sort DESC')->select()->toArray();
  365.         $arr = [
  366.             'menu' => $menu,
  367.             'count' => $count,
  368.             'ss' => $ss,
  369.         ];
  371.         echo json_encode([
  372.             'code' => 0,
  373.             'msg' => '成功',
  374.             'data' => $arr
  375.         ]);
  376.     }
  378.     // 添加 修改 菜单方法
  379.     public function MenuAdd(){
  380.         $post = input('post.');
  382.         $data = [
  383.             'label' => $post['label'],
  384.             'parent_id' => $post['parent_id'],
  385.             'type' => $post['type'],
  386.             'src' => $post['src'],
  387.             'sort' => $post['sort'],
  388.             'status' => $post['status'],
  389.             'time_last' => time(),
  390.         ];
  392.         if($post['mid'] == 0){
  393.             $ret = Db::table('bew_admin_sys_menu')->insert($data);
  394.         } else {
  395.             $ret = Db::table('bew_admin_sys_menu')->where('mid',$post['mid'])->update($data);
  396.         }
  399.         if($post['mid'] == 0 ){
  400.             if(empty($ret)){
  401.                 echo json_encode([
  402.                     'code' => 1,
  403.                     'msg' => '添加失败，请重试'
  404.                 ]);
  405.                 exit;
  406.             }
  407.             echo json_encode([
  408.                 'code' => 0,
  409.                 'msg' => '添加成功'
  410.             ]);
  411.         } else {
  412.             if(empty($ret)){
  413.                 echo json_encode([
  414.                     'code' => 1,
  415.                     'msg' => '修改失败，请重试'
  416.                 ]);
  417.                 exit;
  418.             }
  419.             echo json_encode([
  420.                 'code' => 0,
  421.                 'msg' => '修改成功'
  422.             ]);
  423.         }
  425.     }
  428.     // 删除菜单方法
  429.     public function MenuDel(){
  430.         $mid = input('post.mid',0);
  432.         if($mid == 0){
  433.             echo json_encode([
  434.                 'code' => 1,
  435.                 'msg' => '请选择要删除的菜单'
  436.             ]);
  437.             exit;
  438.         }
  440.         $del = Db::table('bew_admin_sys_menu')->where('mid',$mid)->update([
  441.             'status' => 2,
  442.             'time_last' => time(),
  443.         ]);
  445.         if(empty($del)){
  446.             echo json_encode([
  447.                 'code' => 1,
  448.                 'msg' => '删除失败，请重试'
  449.             ]);
  450.             exit;
  451.         }
  453.         echo json_encode([
  454.             'code' => 0,
  455.             'msg' => '删除菜单成功'
  456.         ]);
  458.     }
  461.     public function hello($name = 'ThinkPHP6')
  462.     {
  463.         return 'hello,' . $name;
  464.     }
  465. }

4、Index.vue文件代码

  1. <!-- 1、新建 /src/views/Index/Index.vue 文件 -->
  2. <template>
  3.   <el-container class="layout" style="height: 100%">
  4.       <aside style="height: 100%">
  5.           <el-menu default-active="-1" class="el-menu-vertical-demo" :collapse="isCollapse" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff">
  6.               <div class="logo">
  7.                   <router-link to="/index/home" class="router">
  8.                       <!--<img src="@/assets/logo.jpg" alt="logo" />-->
  9.                       <h1>phpAdmin</h1>
  10.                   </router-link>
  11.               </div>
  12.               <router-link to="/index/home">
  13.                 <el-menu-item index="-1">
  14.                   <template #title>首页</template>
  15.                 </el-menu-item>
  16.               </router-link>
  17.               <router-link to="/index/home">
  18.                 <el-menu-item index="-2">
  19.                   <template #title>个人中心</template>
  20.                 </el-menu-item>
  21.               </router-link>
  23.               <template v-for="(item,index,key) in menu">
  24.                 <el-sub-menu :index="item.mid" v-if="item.type == 0">
  26.                   <template #title>
  27.                       <span>{{ item.label }}</span>
  28.                   </template>
  30.                   <template v-for="(items,indexs,keys) in item.son">
  31.                     <router-link :to="items.src" v-if="items.type == 1">
  32.                       <el-menu-item :index="item.mid + items.mid">
  33.                         <span>{{ items.label }}</span>
  34.                       </el-menu-item>
  35.                     </router-link>
  36.                     <a :href="items.src" target="_blank" v-if="items.type == 2">
  37.                       <el-menu-item :index="item.mid + items.mid">
  38.                         <span>{{ items.label }}</span>
  39.                       </el-menu-item>
  40.                     </a>
  41.                   </template>
  43.                 </el-sub-menu>
  45.                 <router-link :to="item.src" v-if="item.type == 1">
  46.                   <el-menu-item :index="index + item.mid">
  47.                     <template #title>{{ item.label }}</template>
  48.                   </el-menu-item>
  49.                 </router-link>
  53.               </template>
  54.             </el-menu>
  55.           <div class="flexible" @click="isCollapse = !isCollapse">
  56.               <el-icon v-if="isCollapse" color="white" :size="40"><ArrowRight /></el-icon>
  57.               <el-icon v-else color="white" :size="40"><ArrowLeft /></el-icon>
  58.           </div>
  59.       </aside>
  60.       <el-container>
  61.           <el-header style="text-align: right; font-size: 20px">
  62.               <div class="toolbar">
  63.                   <el-dropdown size="large" type="primary">
  64.                       <span>{{name}}<el-icon style="margin-left: 8px; margin-top: 1px"><ArrowDown /></el-icon></span>
  65.                       <template #dropdown>
  66.                           <el-dropdown-menu>
  67.                               <el-dropdown-item>个人中心</el-dropdown-item>
  68.                               <el-dropdown-item>退出</el-dropdown-item>
  69.                           </el-dropdown-menu>
  70.                       </template>
  71.                   </el-dropdown>
  72.               </div>
  73.           </el-header>
  74.           <el-main>
  75.               <router-view></router-view>
  76.           </el-main>
  77.       </el-container>
  78.   </el-container>
  79. </template>
  80. <script>
  81. import { reactive, toRefs } from "vue";
  82. import { Index } from "../network/index";
  83. export default {
  84.   name: "App",
  85.   setup() {
  86.       // 获取左侧菜单和用户信息
  87.       const state = reactive({
  88.           isCollapse: false,
  89.           name : "欧阳克",
  90.           menu : []
  91.       });
  93.       Index().then( (e) => {
  94.         state.menu = e.data.data;
  95.         console.log(state);
  96.       })
  98.       return {
  99.           ...toRefs(state),
  100.       };
  101.   }
  102. };
  103. </script>
  104. <style>
  105. body,
  106. html{
  107.   margin : 0px 0px;
  108.   height: 100%;
  109. }
  110. a {
  111.   text-decoration: none;
  112. }
  113. .layout {
  114.   background-color: #f0f2f5;
  115. }
  116. .layout .el-header {
  117.   position: relative;
  118.   background-color: white;
  119.   color: var(--el-text-color-primary);
  120. }
  121. .layout aside {
  122.   color: var(--el-text-color-primary);
  123.   background: #001529;
  124. }
  125. .layout .el-menu {
  126.   border-right: none;
  127. }
  128. .layout .el-main {
  129.   margin: 30px 10px;
  130.   background-color: white;
  131. }
  132. .layout .toolbar {
  133.   display: inline-flex;
  134.   align-items: center;
  135.   justify-content: center;
  136.   height: 100%;
  137.   right: 20px;
  138. }
  139. aside {
  140.   position: relative;
  141. }
  142. .flexible {
  143.   background-color: #002140;
  144.   text-align: center;
  145.   position: absolute;
  146.   bottom: 0px;
  147.   left: 0px;
  148.   right: 0px;
  149. }
  150. .el-menu-vertical-demo:not(.el-menu--collapse) {
  151.   width: 200px;
  152.   min-height: 100vh;
  153. }
  154. .layout aside .logo .router {
  155.   display: flex;
  156.   justify-content: space-evenly;
  157.   align-items: center;
  158.   animation-duration: 0.1s;
  159.   overflow: hidden;
  160.   text-decoration: none;
  161.   padding-left: 1px;
  162.   position: relative;
  163.   left: 2px;
  164. }
  165. .layout aside .logo .router h1 {
  166.   margin-left: 10px;
  167.   color: aliceblue;
  168.   overflow: hidden;
  169. }
  170. .layout aside .logo .router img {
  171.   padding-left: 5px;
  172.   width: 48px;
  173.   height: 48px;
  174. }
  175. </style>

5、运行截图

5.1、菜单添加效果：

5.2、菜单修改效果：

5.3、菜单删除效果：


5.4、左侧菜单循环展示：

6、记录遇到的两个问题

6.1、管理人员列表多页，在第4页进行修改，修改成功后返回第1页，但是页码还是保留在原页码上

6.2、菜单栏目多页，在第二页点击进入下一级（无法进入），会跳回第一页

以上两个问题，应该都是页码问题导致，还需要研究！

Correcting teacher：PHPzPHPz

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