讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > 博客列表 > 实战4 ele与tp：登录状态路由跳转，ticket加密登录，用户部门新增修改
博主信息
博文 77
粉丝 0
评论 0
访问量 85170
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
实战4 ele与tp：登录状态路由跳转，ticket加密登录，用户部门新增修改
Jet的博客
原创
738人浏览过

一、涉及代码文件

文件：

  • /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、用户部门


批改老师：PHPzPHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录