实战3 ele于tp：菜单操作(增删改）、左侧栏目循环

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、涉及代码文件文件：
  • 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、菜单栏目多页，在第二页点击进入下一级（无法进入），会跳回第一页

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

【文章出处:香港站群多ip服务器 http://www.558idc.com/hkzq.html提供，感恩】
更多阅读