实战4 ele与tp：登录状态路由跳转，ticket加密登录

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、涉及代码文件文件：
  • /shop/src/views/Login.vue（更新登录成功路由跳转验证）
  • /shop/src/views/Index.vue（更新登录成功路由跳转验证。更新查询所有组）
  • /tp6/extend/ouyangke/Ticket.php（新建ticket登录认证）
  • /tp6/app/admin/controller/Login.php（更新）
  • /shop/src/views/User.vue（更新部门列表，新增修改用户部门）
  • /tp6/app/admin/controller/Index.php（更新部门查询）
1、Login.vue文件代码
  1. <template>
  2.     <div class="container">
  3.         <div style="text-align: center">
  4.             <!--<img src="@/assets/logo.jpg" alt="logo" />-->
  5.             <h3>后台管理</h3>
  6.         </div>
  7.         <div class="main">
  8.             <!-- label-width="auto" 导致ElementPlusError: [ElForm] unexpected width 0 -->
  9.             <el-form :model="form" size="large">
  10.                 <el-form-item prop="account">
  11.                     <el-input v-model="form.account" name="account" class="w-50 m-2" placeholder="请输入账号">
  12.                         <template #prefix>
  13.                             <el-icon class="el-input__icon" style="color: #1890ff"><Avatar /></el-icon>
  14.                         </template>
  15.                     </el-input>
  16.                 </el-form-item>
  17.                 <el-form-item prop="password">
  18.                     <el-input v-model="form.password" name="password" type="password" class="w-50 m-2" placeholder="请输入密码" show-password>
  19.                         <template #prefix>
  20.                             <el-icon class="el-input__icon" style="color: #1890ff"><Lock /></el-icon>
  21.                         </template>
  22.                     </el-input>
  23.                 </el-form-item>
  24.                 <el-form-item prop="remember">
  25.                     <el-checkbox v-model="form.remember" label="1" size="large">保存账密</el-checkbox>
  26.                 </el-form-item>
  27.                 <el-form-item>
  28.                     <el-button type="primary" style="width: 100%" @click="onSubmit()">登录</el-button>
  29.                 </el-form-item>
  30.             </el-form>
  31.         </div>
  32.     </div>
  34. </template>
  36. <style>
  37. .container {
  38.     position: relative;
  39.     width: 100%;
  40.     min-height: 100%;
  41.     padding: 110px 0 144px;
  42.     background-repeat: no-repeat;
  43.     background-position: center 110px;
  44.     background-size: 100%;
  45. }
  46. .main {
  47.     width: 368px;
  48.     min-width: 260px;
  49.     margin: 50px auto;
  50. }
  51. .el-icon {
  52.     color: #359eff;
  53. }
  54. </style>
  56. <script>
  57. import { reactive } from "vue";
  58. //import { request } from "../network/request.js";
  59. import { login } from "../network/index.js";
  60. // 登录成功用路由进行跳转:
  61. import { useRouter } from "vue-router";
  62. export default {
  63.     setup() {
  64.         const form = reactive({
  65.             account: "428188207@qq.com",
  66.             password: "123456",
  67.             remember: true,
  68.         });
  69.         const router = useRouter();
  70.         // 读取保存在缓存中的用户uid信息
  71.         let ticket = window.localStorage.getItem('ticket');
  72.         // 如果有登录就跳转到home页面
  73.         if(ticket){
  74.             router.push({
  75.                 path: "/index/home"
  76.             });
  77.         }
  78.         const onSubmit = ()=>{
  79.             login({
  80.                 account : form.account,
  81.                 password : form.password,
  82.             }).then(res =>{
  83.                 console.log(res.data);
  84.                 // html5有个保存到本地的缓存机制.
  85.                 // 把用户的唯一标识,用户UID.保存到缓存中.
  86.                 // 接入ticket
  87.                 window.localStorage.setItem("ticket", res.data.data.ticket);
  89.                 if(res.data.code == 0){
  90.                     // 跳转到新页面
  91.                     router.push("/Index");
  92.                     // 另外一种写法
  93.                     // router.push({
  94.                     //    path: "/index"
  95.                     //});
  96.                 }
  97.             })
  98.         }
  99.         return {
  100.             form,
  101.             onSubmit
  102.         };
  103.     }
  104. };
  105. </script>
2、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>
  51.                 <router-link :to="item.src" v-if="item.type == 2">
  52.                   <el-menu-item :index="index + item.mid">
  53.                     <template #title>{{ item.label }}</template>
  54.                   </el-menu-item>
  55.                 </router-link>
  59.               </template>
  60.             </el-menu>
  61.           <div class="flexible" @click="isCollapse = !isCollapse">
  62.               <el-icon v-if="isCollapse" color="white" :size="40"><ArrowRight /></el-icon>
  63.               <el-icon v-else color="white" :size="40"><ArrowLeft /></el-icon>
  64.           </div>
  65.       </aside>
  66.       <el-container>
  67.           <el-header style="text-align: right; font-size: 20px">
  68.               <div class="toolbar">
  69.                   <el-dropdown size="large" type="primary">
  70.                       <span>{{name}}<el-icon style="margin-left: 8px; margin-top: 1px"><ArrowDown /></el-icon></span>
  71.                       <template #dropdown>
  72.                           <el-dropdown-menu>
  73.                               <el-dropdown-item>个人中心</el-dropdown-item>
  74.                               <el-dropdown-item @click="out()">退出</el-dropdown-item>
  75.                           </el-dropdown-menu>
  76.                       </template>
  77.                   </el-dropdown>
  78.               </div>
  79.           </el-header>
  80.           <el-main>
  81.               <router-view></router-view>
  82.           </el-main>
  83.       </el-container>
  84.   </el-container>
  85. </template>
  86. <script>
  87. import { reactive, toRefs } from "vue";
  88. import { Index } from "../network/index";
  89. import { useRouter } from "vue-router";
  90. import { ElMessage } from 'element-plus';
  91. export default {
  92.   name: "App",
  93.   setup() {
  94.       // 获取左侧菜单和用户信息
  95.       const state = reactive({
  96.           isCollapse: false,
  97.           name : "",
  98.           menu : []
  99.       });
  100.       // 读取保存在缓存中的用户uid信息
  101.       let ticket = window.localStorage.getItem('ticket');
  102.       // 如果没有获取到登录信息,就跳转
  103.       const router = useRouter();
  104.       if(!ticket){
  105.           router.push({
  106.               path: "/"
  107.           });
  108.       }
  110.       // console.log(uid);
  111.       Index({ticket:ticket}).then( (e) => {
  112.         if(e.data.code == 1){
  113.           alert(e.data.msg);
  114.           router.push({
  115.               path: "/"
  116.           });
  117.         } else if(e.data.code == 2){
  118.           alert(e.data.msg);
  119.         } else{
  120.           state.menu = e.data.data.menu;
  121.         }
  122.         state.name = e.data.data.name;
  123.         console.log(state);
  124.         console.log(e.data);
  125.         ElMessage('登录成功');
  126.       })
  128.       const out = ()=>{
  129.         window.localStorage.setItem('ticket','');
  130.         ElMessage('退出成功');
  131.         setTimeout( ()=>{
  132.           router.push({
  133.             path : "/"
  134.           });
  135.         }, 500 )
  136.       }
  138.       return {
  139.           ...toRefs(state),
  140.           out,
  141.       };
  142.   }
  143. };
  144. </script>
  145. <style>
  146. body,
  147. html{
  148.   margin : 0px 0px;
  149.   height: 100%;
  150. }
  151. a {
  152.   text-decoration: none;
  153. }
  154. .layout {
  155.   background-color: #f0f2f5;
  156. }
  157. .layout .el-header {
  158.   position: relative;
  159.   background-color: white;
  160.   color: var(--el-text-color-primary);
  161. }
  162. .layout aside {
  163.   color: var(--el-text-color-primary);
  164.   background: #001529;
  165. }
  166. .layout .el-menu {
  167.   border-right: none;
  168. }
  169. .layout .el-main {
  170.   margin: 30px 10px;
  171.   background-color: white;
  172. }
  173. .layout .toolbar {
  174.   display: inline-flex;
  175.   align-items: center;
  176.   justify-content: center;
  177.   height: 100%;
  178.   right: 20px;
  179. }
  180. aside {
  181.   position: relative;
  182. }
  183. .flexible {
  184.   background-color: #002140;
  185.   text-align: center;
  186.   position: absolute;
  187.   bottom: 0px;
  188.   left: 0px;
  189.   right: 0px;
  190. }
  191. .el-menu-vertical-demo:not(.el-menu--collapse) {
  192.   width: 200px;
  193.   min-height: 100vh;
  194. }
  195. .layout aside .logo .router {
  196.   display: flex;
  197.   justify-content: space-evenly;
  198.   align-items: center;
  199.   animation-duration: 0.1s;
  200.   overflow: hidden;
  201.   text-decoration: none;
  202.   padding-left: 1px;
  203.   position: relative;
  204.   left: 2px;
  205. }
  206. .layout aside .logo .router h1 {
  207.   margin-left: 10px;
  208.   color: aliceblue;
  209.   overflow: hidden;
  210. }
  211. .layout aside .logo .router img {
  212.   padding-left: 5px;
  213.   width: 48px;
  214.   height: 48px;
  215. }
  216. </style>
3、Ticket.php
  1. <?php
  2. namespace ouyangke;
  3. /**
  4.  * ticket
  5.  * @author ouyangke
  6.  */
  7. class Ticket {
  8.     /**
  9.      * 创建ticket
  10.      *
  11.      * @param integer $uid 用户id
  12.      * @param integer $bind 关键词
  13.      * @param number $time 有效期
  14.      * @param string $durable
  15.      * @return multitype:number string
  16.      */
  17.     public static function create($uid, $bind='ouyangke',$time=7*24*60*60, $durable = false) {
  18.         $expire = time() + $time;
  19.         // 获取key
  20.         $key = self::_genKey($uid, $bind, $expire);
  21.         // 生成票据 ticket
  22.         $ticket = self::_buildTicket($bind, $uid, $key, $expire, $durable);
  23.         return $ticket;
  24.         // return array('ticket' => $ticket, 'expire_time' => $expire);
  25.     }
  26.     /**
  27.      * 获取ticket信息
  28.      *
  29.      * @param integer $ticket
  30.      * @param boolean $checked
  31.      * @return Ambigous <mixed, NULL, multitype:number >
  32.      */
  33.     public static function get($ticket, $bind='ouyangke', $checked = false) {
  34.         $checked || self::checkFormat($ticket);
  35.         $uid        = 0;
  36.         $key        = 0;
  37.         $expire     = 0;
  38.         $durable    = false;
  40.         $info = self::_parseTicket($ticket, $bind, $uid, $key, $expire, $durable);
  42.         if (time() < $expire) {
  43.             $info = array();
  44.             $info['uid'] = $uid;
  45.             $info['expire'] = $expire;
  46.             return $uid;
  47.             return $info;
  48.         }
  49.         return false;
  50.     }
  51.     /**
  52.      * 生成ticket
  53.      * @param string  $bind
  54.      * @param integer $uid
  55.      * @param integer $key
  56.      * @param integer $expire
  57.      * @param boolean $durable
  58.      * @return string
  59.      */
  60.     protected static function _buildTicket($bind, $uid, $key, $expire, $durable = false) {
  61.         // decbin 函数把十进制数转换为二进制数
  62.         $uBit = decbin($uid);
  63.         // strlen 函数返回字符串的长度
  64.         $uLen = strlen($uBit);
  65.         // sprintf 把百分号（%）符号替换成一个作为参数进行传递的变量
  66.         $eBit = sprintf('%032b', $expire);
  67.         $kBit = sprintf('%032b', $key);
  68.         // mt_rand 生成随机数
  69.         // uniqid 生成一个唯一的 ID
  70.         // md5 函数计算字符串的 MD5 散列
  71.         // substr 函数返回字符串的一部分
  72.         // base_convert 把十六进制数转换为八进制数
  73.         $rBit = sprintf('%058s%05b%d', substr(base_convert(substr(md5(uniqid(mt_rand(), true)), mt_rand(0, 16), 16), 16, 2), 0, 58), $uLen % 32, $durable ? 1 : 0);
  74.         $cBit = sprintf('%032b', crc32($uBit . $eBit . $kBit . $rBit . $bind));
  75.         $uBit .= substr(sprintf('%032b', mt_rand()), $uLen - 32);
  77.         $bin = '';
  78.         for ($i = 0; $i < 32; $i++) {
  79.             $bin .= $rBit[$i * 2];
  80.             $bin .= $eBit[$i];
  81.             $bin .= $kBit[$i];
  82.             $bin .= $rBit[$i * 2 + 1];
  83.             $bin .= $uBit[$i];
  84.             $bin .= $cBit[$i];
  85.         }
  86.         // bindec 函数把二进制转换为十进制。
  87.         // chr 函数从指定的 ASCII 值返回字符
  88.         // str_split 函数把字符串分割到数组中
  89.         // array_map 函数将用户自定义函数作用到数组中的每个值上，并返回用户自定义函数作用后的带有新的值的数组。
  90.         // implode 函数返回一个由数组元素组合成的字符串。
  91.         // base64_encode 函数用base64加密
  92.         return strtr(base64_encode(implode('', array_map(function($item){ return chr(bindec($item)); }, str_split($bin, 8)))), '+/', '-_');
  93.     }
  94.     /**
  95.      * 解析Ticket
  96.      *
  97.      * @param string $ticket
  98.      * @param string  $bind
  99.      * @param integer $uid
  100.      * @param integer $key
  101.      * @param integer $expire
  102.      * @param boolean $durable
  103.      * @return boolean
  104.      */
  105.     protected static function _parseTicket($ticket, $bind, &$uid = NULL, &$key = NULL, &$expire = NULL, &$durable = NULL) {
  106.         $rBit = '';
  107.         $eBit = '';
  108.         $kBit = '';
  109.         $uBit = '';
  110.         $cBit = '';
  111.         // strtr 函数转换字符串中特定的字符
  112.         // base64_decode 函数用base64解密
  113.         // str_split 函数把字符串分割到数组中
  114.         // sprintf 把百分号（%）符号替换成一个作为参数进行传递的变量
  115.         // array_map 函数将用户自定义函数作用到数组中的每个值上，并返回用户自定义函数作用后的带有新的值的数组
  116.         // implode 函数返回一个由数组元素组合成的字符串
  117.         $bin = implode('', array_map(function($item){ return sprintf('%08b', ord($item)); }, str_split(base64_decode(strtr($ticket, '-_', '+/')), 1)));
  118.         for ($i = 0; $i < 192; $i += 6) {
  119.             $rBit .= $bin[$i];
  120.             $eBit .= $bin[$i + 1];
  121.             $kBit .= $bin[$i + 2];
  122.             $rBit .= $bin[$i + 3];
  123.             $uBit .= $bin[$i + 4];
  124.             $cBit .= $bin[$i + 5];
  125.         }
  126.         // substr 函数返回字符串的一部分
  127.         // bindec 函数把二进制转换为十进制
  128.         $uLen = bindec(substr($rBit, 58, 5));
  129.         if ($uLen < 32) {
  130.             $uBit = substr($uBit, 0, $uLen);
  131.         }
  132.         // crc32 函数计算字符串的 32 位 CRC（循环冗余校验）
  133.         //32位系统会产生整型溢出，必需输出格式化
  134.         // bindec 函数把二进制转换为十进制
  135.         // sprintf 把百分号（%）符号替换成一个作为参数进行传递的变量
  136.         if (sprintf('%u', crc32($uBit . $eBit . $kBit . $rBit . $bind)) == bindec($cBit)) {
  137.             $uid = bindec($uBit);
  138.             if ($uid > 0) {
  139.                 $expire     = bindec($eBit);
  140.                 $key        = bindec($kBit);
  141.                 $durable    = ($rBit[63] === '1');
  142.                 return true;
  143.             }
  144.         }
  145.         return false;
  146.     }
  147.     /**
  148.      * 生成key
  149.      *
  150.      * @param integer $uid
  151.      * @param string $bind
  152.      * @param integer $expire
  153.      * @return integer
  154.      */
  155.     protected static function _genKey($uid, $bind, $expire) {
  156.         // sprintf 把百分号（%）符号替换成一个作为参数进行传递的变量
  157.         // md5 函数计算字符串的 MD5 散列
  158.         // crc32 函数计算字符串的 32 位 CRC（循环冗余校验）
  159.         return crc32(md5(sprintf('%d|%s|%d', $uid, $bind, $expire), true));
  160.     }
  161.     /**
  162.      * 发送ticket http头
  163.      *
  164.      * @param string $ticket
  165.      * @param integer $uid
  166.      * @param integer $ttl
  167.      */
  168.     protected static function _headerTicket($ticket, $uid, $ttl) {
  169.         header(sprintf('Set-Ticket: %s; uid=%d; expires=%s; Max-Age=%d', $ticket, $uid, Request::httpDate(time() + $ttl), $ttl));
  170.     }
  171.     /**
  172.      * 判断格式是否正确
  173.      *
  174.      * @param string $ticket
  175.      * @return boolean
  176.      */
  177.     protected static function _isTicket($ticket) {
  178.         return strlen($ticket) == 32 && strspn($ticket, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_') == 32;
  179.     }
  180.     /**
  181.      * 检查格式是否正确
  182.      *
  183.      * @param string $ticket
  184.      */
  185.     public static function checkFormat($ticket) {
  186.         if (!self::_isTicket($ticket)) {
  187.             return false;
  188.         }
  189.     }
  190. }
4、Login.php文件代码
  1. <?php
  2. namespace app\admin\controller;
  3. use think\facade\Db;
  4. use ouyangke\Ticket;
  7. class Login
  8. {
  9.     public function index()
  10.     {
  11.         // 跨域请求
  12.         header("Access-Control-Allow-Origin:*");
  13.         // 一个接口有3段
  14.         // 1、获取传值的数据，并且检查这些信息(非必须)
  15.         // 2、通过传值进行数据查询，并处理这些数据（非必须）,可以自己组装数据
  16.         // 3、返回查询的数据结果（必须）
  18.         $account = input('post.account');
  19.         $password = input('post.password');
  20.         $password = md5($password);
  22.         $user = Db::table('bew_admin_user')->where('account', $account)->find();
  23.         //print_r($user);
  25.         if(empty($user)){
  26.             echo json_encode(['code'=>1, 'msg'=>'账号不存在']);
  27.             exit;
  28.         }
  29.         if($user['password'] != $password){
  30.             echo json_encode(['code'=>1, 'msg'=>'密码错误']);
  31.             exit;
  32.         }
  34.         $user['ticket'] = Ticket::create($user['uid']);
  36.         echo json_encode(['code'=>0,'msg'=>'成功','data'=>$user]);
  37.     }
  38. }
4、User.vue
  1. <template>
  2.     <div>
  3.     <el-space wrap style="margin-bottom:20px;">
  4.         <el-input v-model="data.search" size="small" placeholder="Type to search" />
  5.         <el-button type="" @click="search()">搜索</el-button>
  6.     </el-space>
  7.     <el-space wrap>
  8.         <el-button type="" @click="add()">添加</el-button>
  9.     </el-space>
  11.     <el-table 
  12.         :data="data.table" 
  13.         border 
  14.         style="width: 100%"
  15.         @select="select"
  16.     >
  17.     <!--
  18.     <el-table-column align="right">
  19.     </el-table-column>
  20.       <el-table-column label="选择" type="selection" />-->
  21.       <el-table-column prop="uid" label="ID" min-width="50" />
  22.       <el-table-column prop="name" label="Name" />
  23.       <el-table-column prop="account" label="账号" />
  24.       <el-table-column prop="group" label="部门" />
  25.       <el-table-column prop="phone" label="手机号" />
  26.       <el-table-column prop="qq" label="QQ">
  27.       </el-table-column>
  28.       <el-table-column prop="sex" label="性别">
  29.         <!--插槽-->
  30.         <!-- scope 相当于循环里的一次数据
  31.             foreach ( $data['table] as $v)
  32.             scope.row 就是相当于是 $v
  33.             -->
  34.         <template #default="scope">
  35.             <span v-if="scope.row.sex == 'mimi'">
  36.                 保密
  37.             </span>
  38.             <span v-else-if="scope.row.sex == 'nan'">
  39.                 男
  40.             </span>
  41.             <span v-else-if="scope.row.sex == 'nv'">
  42.                 女
  43.             </span>
  44.         </template>
  45.       </el-table-column>
  46.       <el-table-column prop="uid" label="修改" width="160px;">
  48.         <template #default="scope">
  49.             <el-space wrap>
  50.                 <!--传点击这条数据的( scope.row )-->
  51.                 <el-button type="warning" @click="add(scope.row)">修改</el-button>
  52.             </el-space>
  53.             <el-space wrap>
  54.                 <el-button type="danger" @click="del(scope.row)">删除</el-button>
  55.             </el-space>
  56.         </template>
  57.       </el-table-column>
  58.     </el-table>
  59.     <el-pagination 
  60.         layout="prev, pager, next" 
  61.         :total="data.total"
  62.         :page-size="5"
  63.         :default-current-page="1"
  64.         @current-change="fun"
  65.     />
  66.     <!--
  67.         total:总条数
  68.         page-size:一页显示多少条
  69.     -->
  71.     <!--添加/修改 弹窗-->
  72.     <el-dialog v-model="data.add_form" :title="data.title">
  73.         <el-form :model="form" label-width="120px">
  74.             <el-form-item label="账号">
  75.                 <el-input v-model="form.account" />
  76.             </el-form-item>
  77.             <el-form-item label="密码">
  78.                 <el-input v-model="form.password" />
  79.             </el-form-item>
  80.             <el-form-item label="姓名">
  81.                 <el-input v-model="form.name" />
  82.             </el-form-item>
  83.             <el-form-item label="部门">
  84.                 <el-select v-model="form.group_id" class="m-2" placeholder="Select" size="large">
  85.                     <el-option :label="item.group_name" :value="item.group_id" v-for="(item,index,key) in data.group" />
  86.                 </el-select>
  87.             </el-form-item>
  88.             <el-form-item label="手机号">
  89.                 <el-input v-model="form.phone" />
  90.             </el-form-item>
  91.             <el-form-item label="QQ号">
  92.                 <el-input v-model="form.qq" />
  93.             </el-form-item>
  94.             <el-form-item label="性别">
  95.                 <el-select v-model="form.sex" class="m-2" placeholder="Select" size="large">
  96.                     <el-option label="男" value="nan" />
  97.                     <el-option label="女" value="nv" />
  98.                     <el-option label="保密" value="mimi" />
  99.                 </el-select>
  100.             </el-form-item>
  101.         </el-form>
  103.         <template #footer>
  104.             <span class="dialog-footer">
  105.                 <el-button @click="data.add_form = false">取消</el-button>
  106.                 <el-button type="primary" @click="add_form_json()">
  107.                     {{ data.title }}
  108.                 </el-button>
  109.             </span>
  110.         </template>
  112.     </el-dialog>
  114. </div>
  115. </template>
  116. <script>
  117. import { reactive } from "vue"; // 引入动态创建
  118. import { UserLists , UserAdd ,UserDel } from "../network/index";
  119. export default{
  120.     setup () {
  121.         // 展示数据
  122.         const data = reactive({
  123.             table : [],
  124.             total : 0,
  125.             group : [],
  126.             search : '',
  127.             add_form : false,
  128.             title : '添加',
  129.         });
  131.         // 展示的请求接口
  132.         UserLists().then( (e)=>{
  133.             data.table = e.data.data.user;
  134.             data.total = e.data.data.count;
  135.             data.group = e.data.data.group;
  136.             console.log(data.table);
  137.         })
  139.         // 选择事件
  140.         const select = (selection,row)=>{
  141.             console.log(selection);
  142.             console.log(row);
  143.         }
  145.         // 翻页方法
  146.         const fun = (p) => {
  147.             UserLists({p:p}).then( (e)=>{
  148.                 data.table = e.data.data.user;
  149.                 data.total = e.data.data.count;
  150.             })
  151.             // Index.php接收传值
  152.         }
  154.         // 搜索方法
  155.         const search = () => {
  156.             UserLists({search:data.search}).then( (e)=>{
  157.                 data.table = e.data.data.user;
  158.                 data.total = e.data.data.count;
  159.             })
  160.         }
  162.         // 添加 修改
  163.         // 展开form表单
  164.         const form = reactive({
  165.             uid : 0,
  166.             account: '',
  167.             password: '',
  168.             name : '',
  169.             group_id: '',
  170.             phone : '',
  171.             qq: '',
  172.             sex: 'nan',
  173.         })
  174.         // 添加方法,如果为真,打开表单
  175.         // 点击接收传uid数据,若有
  176.         const add = (e) => {
  177.             console.log(e);
  178.             data.add_form = true;
  179.             if(e){
  180.                 form.uid = e.uid;
  181.                 form.account = e.account;
  182.                 form.password = '';
  183.                 form.name = e.name;
  184.                 form.group_id = e.group_id;
  185.                 form.phone = e.phone;
  186.                 form.qq = e.qq;
  187.                 form.sex = e.sex;
  188.                 data.title = '修改';
  189.             }else{
  190.                 form.uid = 0;
  191.                 form.account = '';
  192.                 form.password = '';
  193.                 form.name = '';
  194.                 form.group_id = '';
  195.                 form.phone = '';
  196.                 form.qq = '';
  197.                 form.sex = 'nan';
  198.                 data.title = '添加';
  199.             }
  200.         }
  201.         // 确定提交添加的数据
  202.         const add_form_json = () => {
  203.             // 需要把数据提交给php接口
  204.             // console.log(form);
  205.             UserAdd(form).then((e) =>{
  206.                 // console.log(e);
  207.                 alert(e.data.msg);
  208.                 if(e.data.code == 0){
  209.                     UserLists().then( (e)=>{
  210.                         // 添加成功后自动刷新数据
  211.                         data.table = e.data.data.user;
  212.                         data.total = e.data.data.count;
  213.                         data.group = e.data.data.group;
  214.                         console.log(data.table);
  215.                         // 关闭添加表单
  216.                         data.add_form = false;
  217.                     })
  218.                 }
  219.             })
  221.         }
  223.         // 删除
  224.         const del = (e) => {
  225.             UserDel({uid:e.uid}).then( (res) => {
  226.                 alert(res.data.msg);
  227.                 if( res.data.code == 0 ){
  228.                     UserLists().then( (e)=>{
  229.                         // 添加成功后自动刷新数据
  230.                         data.table = e.data.data.user;
  231.                         data.total = e.data.data.count;
  232.                         data.add_form = false;
  233.                     })
  234.                 }
  235.             })
  236.         }
  238.         // 数据暴露出去
  239.         return {
  240.             data,
  241.             select,
  242.             fun,
  243.             search,
  244.             add,
  245.             form,
  246.             add_form_json,
  247.             del,
  248.         }
  249.     }
  250. }
  251. </script>
5、Index.php
  1. <?php
  2. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Db;
  6. use ouyangke\Ticket;
  8. class Index extends BaseController
  9. {
  10.     public function __construct(){
  11.         // 跨域请求
  12.         header("Access-Control-Allow-Origin:*");
  13.     }
  15.     // 首页左侧菜单 
  16.     public function index(){
  17.         $ticket = input('post.ticket');
  18.         $uid = Ticket::get($ticket);
  19.         if(empty($uid)){
  20.             echo json_encode([
  21.                 'code' => 1,
  22.                 'msg' => '用户已过期'
  23.             ]);
  24.             exit;
  25.         }
  27.         $user = Db::table('bew_admin_user')->where('uid',$uid)->find();
  28.         if(empty($user)){
  29.             echo json_encode([
  30.                 'code' => 1,
  31.                 'msg' => '请重新登录',
  32.                 'data' => [
  33.                     'name' => $user['name']
  34.                 ]
  35.             ]);
  36.             exit;
  37.         }
  39.         $group = Db::table('bew_admin_user_group')->where('group_id',$user['group_id'])->find(); 
  40.         if(empty($group)){
  41.             echo json_encode([
  42.                 'code' => 2,
  43.                 'msg' => '用户还没添加组,请联系管理员',
  44.                 'data' => [
  45.                     'name' => $user['name']
  46.                 ]
  47.             ]);
  48.             exit;
  49.         }
  51.         // 状态为1的全部展示出来，但是1级和2级的都在一起
  52.         $tmp = Db::table('bew_admin_sys_menu')->where('status',1)->where('mid','in',json_decode($group['rights'],true))->order('parent_id')->select()->toArray();
  53.         //print_r($tmp);
  54.         $menu = [];
  55.         foreach ($tmp as $v){
  56.             if($v['parent_id'] == 0){
  57.                 // 将 menu为1000或者100的下标 保存到 这个菜单
  58.                 $menu[ $v['mid'] ] = $v;
  59.             } else {
  60.                 // 现在时二级菜单，它的上一级，就是parent_id，找到它自己的parent_id
  61.                 // $v['mid']  一级菜单的下标   $v['parent_id'] 二级菜单的上级下标
  62.                 $menu[ $v['parent_id'] ] ['son'] [] = $v;
  63.             }
  64.         }
  66.         echo json_encode([
  67.             'code' => 0,
  68.             'msg' => '成功',
  69.             'data' => [
  70.                 'menu' => $menu,
  71.                 'name' => $user['name'],
  72.             ]
  73.         ]);
  74.     }
  76.     /*
  77.     public function index()
  78.     {
  79.         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>';
  80.     }
  81.     */
  82.     // =======================管理员方法===============================
  84.     // 管理员列表
  85.     public function UserLists(){
  86.         $p = input('post.p',1);
  87.         $search = input('post.search','');
  89.         // 在查询数出来的时候，
  90.         // $user = Db::table('xpcms_admin')->select()->toArray();
  92.         // limit方法、pgae方法
  93.         // count方法统计数据库有多少条数据
  95.         $where = [];
  96.         if(!empty($search)){
  97.             $where1 = [['account','like','%'.$search.'%']];
  98.             $where2 = [['name','like','%'.$search.'%']];
  99.             $where3 = [['phone','like','%'.$search.'%']];
  100.             $where = [$where1,$where2,$where3];
  101.         }
  102.         $count = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->count();
  103.         $user = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->page($p,5)->select()->toArray();
  104.         // toArray 数组形式，显示时间戳
  106.         // 查询所有组
  107.         $tmp = Db::table('bew_admin_user_group')->where('status',1)->select()->toArray();
  108.         $group = [];
  109.         foreach($tmp as $v){
  110.             $group[$v['group_id']] = $v; 
  111.         }
  113.         foreach($user as &$u){
  114.             $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
  115.             if($u['group_id'] != 0 ){
  116.                 $u['group'] = $group [ $u['group_id'] ] ['group_name'];
  117.             }
  118.         }
  121.         $arr = [
  122.             'count' => $count,
  123.             'user' => $user,
  124.             'group' => $group
  125.         ];
  127.         // php接口、只能有一次输出结果值
  128.         echo json_encode([
  129.             'code' => 0,
  130.             'msg' => '成功',
  131.             'data' => $arr
  132.         ]);
  133.     }
  135.     // 添加&修改管理员，接收数据
  136.     public function UserAdd(){
  137.         $post = input('post.');
  139.         $data = [
  140.             'account' => $post['account'],
  141.             'name' => $post['name'],
  142.             'group_id' => $post['group_id'],
  143.             'phone' => $post['phone'],
  144.             'qq' => $post['qq'],
  145.             'sex' => $post['sex'],
  146.             'time_last' => time(),
  147.         ];
  149.         // 查询单条数据
  150.         $user = Db::table('bew_admin_user')->where('account',$post['account'])->find();
  153.         if ( $post['uid'] == 0 ){
  155.             // 判断查询出来的用户是否存在，若存在就退出，否则新建
  156.             if(!empty($user)){
  157.                 echo json_encode([
  158.                     'code' => 1,
  159.                     'msg' => '账号已存在'
  160.                 ]);
  161.                 exit;
  162.             }
  164.             // 如果为0.就添加
  165.             $data['password'] = md5($post['password']);
  166.             $data['time_add'] = time();
  167.             $ret = Db::table('bew_admin_user')->insert($data);
  169.         } else {
  171.             // 判断查询出来的用户名是否存在，且是不等于查询出来的uid，则修改
  172.             if(!empty($user) && $post['uid'] != $user['uid']){
  173.                 echo json_encode([
  174.                     'code' => 1,
  175.                     'msg' => '账号已存在'
  176.                 ]);
  177.                 exit;
  178.             }
  180.             // 如果不为0 就修改
  181.             if(!empty($post['password'])){
  182.                 $data['password'] = md5($post['password']);
  183.             }
  184.             $ret = Db::table('bew_admin_user')->where('uid', $post['uid'])->update($data);
  186.         }
  188.         // 添加&修改 后输出结果
  189.         if( $post['uid'] == 0 ){
  190.             if(empty($ret)){
  191.                 echo json_encode([
  192.                     'code' => 1,
  193.                     'msg' => '添加失败，请重试'
  194.                 ]);
  195.                 exit;
  196.             };    
  197.             echo json_encode([
  198.                 'code' => 0,
  199.                 'msg' => '添加成功'
  200.             ]);
  201.         } else {        
  202.             if(empty($ret)){
  203.                 echo json_encode([
  204.                     'code' => 1,
  205.                     'msg' => '修改失败，请重试'
  206.                 ]);
  207.                 exit;
  208.             };    
  209.             echo json_encode([
  210.                 'code' => 0,
  211.                 'msg' => '修改成功'
  212.             ]);
  213.         }
  214.     }
  216.     // 删除方法
  217.     public function UserDel(){
  218.         $uid = input('post.uid',0);
  219.         if($uid ==0){
  220.             echo json_encode([
  221.                 'code' => 1,
  222.                 'msg' => '请选择要删除的账号'
  223.             ]);
  224.             exit;
  225.         }
  227.         $del = Db::table('bew_admin_user')->where('uid', $uid)->update([
  228.             'status'=>2,
  229.             'time_last' => time(),
  230.         ]);
  232.         if(empty($del)){
  233.             echo json_encode([
  234.                 'code' => 1,
  235.                 'msg' => '删除失败，请重试'
  236.             ]);
  237.             exit;
  238.         }
  240.         echo json_encode([
  241.             'code' => 0,
  242.             'msg' => '删除成功'
  243.         ]);
  244.         exit;
  245.     }
  247.     // =======================管理组方法===============================
  249.     // 管理组列表接口
  250.     public function GroupLists(){
  251.         $p = input('post.p',1);
  252.         $search = input('post.search','');
  253.         $where = [];
  254.         if(!empty($search)){
  255.             $where[] = ['group_name','like','%'.$search.'%'];
  256.         }
  258.         $count = Db::table('bew_admin_user_group')->where($where)->count();
  259.         $group = Db::table('bew_admin_user_group')->where($where)->page($p,8)->select()->toArray();
  260.         foreach($group as &$u){
  261.             $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
  262.         }
  265.         // =================================================================================================
  266.         // 新增权限管理
  267.         // 状态为1的全部展示出来，但是1级和2级的都在一起
  268.         $tmp = Db::table('bew_admin_sys_menu')->where('status',1)->order('parent_id')->select()->toArray();
  270.         $menu = [];
  271.         foreach ($tmp as $v){
  272.             if($v['parent_id'] == 0){
  273.                 // 将 menu为1000或者100的下标 保存到 这个菜单
  274.                 $menu[ $v['mid'] ] = $v;
  275.             } else {
  276.                 // 现在时二级菜单，它的上一级，就是parent_id，找到它自己的parent_id
  277.                 // $v['mid']  一级菜单的下标   $v['parent_id'] 二级菜单的上级下标
  278.                 $menu[ $v['parent_id'] ] ['son'] [] = $v;
  279.             }
  280.         }
  282.         // =================================================================================================
  285.         $arr = [
  286.             'count' => $count,
  287.             'group' => $group,
  288.             'menu' => $menu,
  289.         ];
  291.         // php接口、只能有一次输出结果值
  292.         echo json_encode([
  293.             'code' => 0,
  294.             'msg' => '成功',
  295.             'data' => $arr
  296.         ]);
  298.     }
  300.     // 添加管理组
  301.     public function GroupAdd(){
  302.         $post = input('post.');
  304.         $group = Db::table('bew_admin_user_group')->where('group_name', $post['group_name'])->find();
  306.         if($post['group_id'] == 0){
  307.             if(!empty($group)){
  308.                 echo json_encode([
  309.                     'code' => 1,
  310.                     'msg' => '添加失败，部门已存在'
  311.                 ]);
  312.                 exit;
  313.             }
  314.             $ret = Db::table('bew_admin_user_group')->insert([
  315.                 'group_name' => $post['group_name'],
  316.                 'status' => $post['status'],
  317.                 'rights' => json_encode($post['checkList']),
  318.                 'time_add' => time()
  319.             ]);
  320.         } else {
  321.             if(!empty($group) && $group['group_id'] != $post['group_id']){
  322.                 echo json_encode([
  323.                     'code' => 1,
  324.                     'msg' => '修改失败，部门已存在'
  325.                 ]);
  326.                 exit;
  327.             }
  328.             $ret = Db::table('bew_admin_user_group')->where('group_id',$post['group_id'])->update([
  329.                 'group_name' => $post['group_name'],
  330.                 'status' => $post['status'],
  331.                 'rights' => json_encode($post['checkList']),
  332.                 'time_add' => time(),
  333.                 'time_last' => time()
  334.             ]);
  335.         }
  337.         if($post['group_id'] == 0 ){
  338.             if(empty($ret)){
  339.                 echo json_encode([
  340.                     'code' => 1,
  341.                     'msg' => '添加失败，请重试'
  342.                 ]);
  343.                 exit;
  344.             }
  345.             echo json_encode([
  346.                 'code' => 0,
  347.                 'msg' => '添加成功'
  348.             ]);
  349.         } else {
  350.             if(empty($ret)){
  351.                 echo json_encode([
  352.                     'code' => 1,
  353.                     'msg' => '修改失败，请重试'
  354.                 ]);
  355.                 exit;
  356.             }
  357.             echo json_encode([
  358.                 'code' => 0,
  359.                 'msg' => '修改成功'
  360.             ]);
  361.         }
  362.     }
  364.     // 删除管理组
  365.     public function GroupDel(){
  366.         $group_id = input('post.group_id',0);
  367.         if($group_id == 0){
  368.             echo json_encode([
  369.                 'code' => 1,
  370.                 'msg' => '请选择要删除的管理组'
  371.             ]);
  372.             exit;
  373.         }
  375.         $ret = Db::table('bew_admin_user_group')->where('group_id',$group_id)->update([
  376.             'status' => 0,
  377.             'time_last' => time()
  378.         ]);
  381.         if(empty($ret)){
  382.             echo json_encode([
  383.                 'code' => 1,
  384.                 'msg' => '删除失败，请重试'
  385.             ]);
  386.             exit;
  387.         }
  389.         echo json_encode([
  390.             'code' => 0,
  391.             'msg' => '删除成功'
  392.         ]);
  393.     }
  395.     // =======================菜单方法===============================
  397.     /**
  398.      * 一般分php文件，是根据功能来分
  399.      * 用户相关放一个文件，并且统一处理
  400.      * 用户个人中心、订单列表、订单详情、充值功能、登录日志等
  401.      * 登录、注册放在一个文件，用户的未登录文件，统一处理的
  402.      *
  403.      * @return void
  404.      */
  405.     public function MenuLists(){
  406.         $p = input('post.p',1);
  407.         // 接收数据 mid
  408.         $mid = input('post.mid',0);
  409.         $count = Db::table('bew_admin_sys_menu')->where('parent_id',$mid)->count();
  410.         $menu = Db::table('bew_admin_sys_menu')->where('parent_id',$mid)->order('sort DESC')->page($p,5)->select()->toArray();
  413.         //需要把一级菜单获取出来，作为添加时选择项
  414.         $ss = Db::table('bew_admin_sys_menu')->where('parent_id',0)->where('type',0)->order('sort DESC')->select()->toArray();
  417.         $arr = [
  418.             'menu' => $menu,
  419.             'count' => $count,
  420.             'ss' => $ss,
  421.         ];
  423.         echo json_encode([
  424.             'code' => 0,
  425.             'msg' => '成功',
  426.             'data' => $arr
  427.         ]);
  428.     }
  430.     // 添加 修改 菜单方法
  431.     public function MenuAdd(){
  432.         $post = input('post.');
  434.         $data = [
  435.             'label' => $post['label'],
  436.             'parent_id' => $post['parent_id'],
  437.             'type' => $post['type'],
  438.             'src' => $post['src'],
  439.             'sort' => $post['sort'],
  440.             'status' => $post['status'],
  441.             'time_last' => time(),
  442.         ];
  444.         if($post['mid'] == 0){
  445.             $ret = Db::table('bew_admin_sys_menu')->insert($data);
  446.         } else {
  447.             $ret = Db::table('bew_admin_sys_menu')->where('mid',$post['mid'])->update($data);
  448.         }
  451.         if($post['mid'] == 0 ){
  452.             if(empty($ret)){
  453.                 echo json_encode([
  454.                     'code' => 1,
  455.                     'msg' => '添加失败，请重试'
  456.                 ]);
  457.                 exit;
  458.             }
  459.             echo json_encode([
  460.                 'code' => 0,
  461.                 'msg' => '添加成功'
  462.             ]);
  463.         } else {
  464.             if(empty($ret)){
  465.                 echo json_encode([
  466.                     'code' => 1,
  467.                     'msg' => '修改失败，请重试'
  468.                 ]);
  469.                 exit;
  470.             }
  471.             echo json_encode([
  472.                 'code' => 0,
  473.                 'msg' => '修改成功'
  474.             ]);
  475.         }
  477.     }
  481.     // 删除菜单方法
  482.     public function MenuDel(){
  483.         $mid = input('post.mid',0);
  485.         if($mid == 0){
  486.             echo json_encode([
  487.                 'code' => 1,
  488.                 'msg' => '请选择要删除的菜单'
  489.             ]);
  490.             exit;
  491.         }
  493.         $del = Db::table('bew_admin_sys_menu')->where('mid',$mid)->update([
  494.             'status' => 2,
  495.             'time_last' => time(),
  496.         ]);
  498.         if(empty($del)){
  499.             echo json_encode([
  500.                 'code' => 1,
  501.                 'msg' => '删除失败，请重试'
  502.             ]);
  503.             exit;
  504.         }
  506.         echo json_encode([
  507.             'code' => 0,
  508.             'msg' => '删除菜单成功'
  509.         ]);
  511.     }
  514.     public function hello($name = 'ThinkPHP6')
  515.     {
  516.         return 'hello,' . $name;
  517.     }
  518. }
6、运行截图6.1、登录退出

6.2、用户部门


【转自：美国cn2服务器 http://www.558idc.com/mg.html欢迎留下您的宝贵建议】
更多阅读