实战ele与tp：左侧菜单、管理员列表、翻页与搜索

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、总体代码：文件：
  • shop\src\view\Login.vue (更新)
  • shop\src\view\Index.vue (更新)
  • shop\src\network\index.js (更新)
  • tp6\app\admin\controller\index.php (更新)
  • shop\src\view\User.vue (新建)
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: "123",
  66.             password: "123",
  67.             remember: true,
  68.         });
  69.         const router = useRouter();
  70.         const onSubmit = ()=>{
  71.             login({
  72.                 account : form.account,
  73.                 password : form.password,
  74.             }).then(res =>{
  75.                 alert(res.data.msg);
  77.                 if(res.data.code == 0){
  78.                     // 跳转到新页面
  79.                     router.push("/Index");
  80.                 }
  81.             })
  82.         }
  83.         return {
  84.             form,
  85.             onSubmit
  86.         };
  87.     }
  88. };
  89. </script>
2、Index.vue文件代码
  1. <template>
  2.   <el-container class="layout-container-demo" style="height: 500px">
  3.     <el-aside width="200px">
  4.       <el-scrollbar>
  5.         <el-menu :default-openeds="['-1']">
  6.             <!--二级路由,跳转-->
  7.           <router-link to="/index/home">
  8.             <el-menu-item index="-1">首页</el-menu-item>
  9.           </router-link>
  10.           <el-sub-menu index="1">
  11.             <template #title>
  12.               <el-icon><message /></el-icon>系统管理
  13.             </template>
  14.             <el-menu-item-group>
  15.               <router-link to="/index/menu">
  16.                 <el-menu-item index="1-2">菜单管理</el-menu-item>
  17.               </router-link>
  18.             </el-menu-item-group>
  19.           </el-sub-menu>
  20.           <el-sub-menu index="2">
  21.             <template #title>
  22.               <el-icon><User /></el-icon>管理员管理
  23.             </template>
  24.             <el-menu-item-group>
  25.               <router-link to="/index/user">
  26.                 <el-menu-item index="2-1">管理员列表</el-menu-item>
  27.               </router-link>
  28.               <router-link to="/index/group">
  29.                 <el-menu-item index="2-2">管理组列表</el-menu-item>
  30.               </router-link>
  31.             </el-menu-item-group>
  32.           </el-sub-menu>
  33.           <el-sub-menu index="3">
  34.             <template #title>
  35.               <el-icon><setting /></el-icon>商城相关
  36.             </template>
  37.             <el-menu-item-group>
  38.               <template #title>商品</template>
  39.               <el-menu-item index="3-1">商品列表</el-menu-item>
  40.             </el-menu-item-group>
  41.             <el-menu-item-group title="订单">
  42.               <el-menu-item index="3-3">订单列表</el-menu-item>
  43.             </el-menu-item-group>
  44.             <el-menu-item-group title="用户">
  45.               <el-menu-item index="3-4">用户列表</el-menu-item>
  46.             </el-menu-item-group>
  47.           </el-sub-menu>
  48.         </el-menu>
  49.       </el-scrollbar>
  50.     </el-aside>
  52.     <el-container>
  53.       <el-main>
  55.         <router-view></router-view>
  56.       </el-main>
  57.     </el-container>
  58.   </el-container>
  59. </template>
  61. <script>
  62. import { defineComponent, ref } from "vue";
  63. export default defineComponent({
  64.   data() {
  65.     return {
  66.       collapsed: ref(false),
  67.       selectedKeys: ref(["1"]),
  68.     };
  69.   },
  70. });
  71. </script>
  72. <style scoped>
  73. .logo {
  74.   height: 32px;
  75.   margin: 16px;
  76.   background: rgba(255, 255, 255, 0.3);
  77. }
  79. .site-layout .site-layout-background {
  80.   background: #fff;
  81. }
  82. [data-theme="dark"] .site-layout .site-layout-background {
  83.   background: #141414;
  84. }
  85. .layout-container-demo .el-header {
  86.   position: relative;
  87.   background-color: var(--el-color-primary-light-7);
  88.   color: var(--el-text-color-primary);
  89. }
  90. .layout-container-demo .el-aside {
  91.   color: var(--el-text-color-primary);
  92.   background: var(--el-color-primary-light-8);
  93. }
  94. .layout-container-demo .el-menu {
  95.   border-right: none;
  96. }
  97. .layout-container-demo .el-main {
  98.   padding: 0;
  99. }
  100. .layout-container-demo .toolbar {
  101.   display: inline-flex;
  102.   align-items: center;
  103.   justify-content: center;
  104.   height: 100%;
  105.   right: 20px;
  106. }
  107. </style>
3、index.js文件代码
  1. import { request } from "./request.js";
  3. // 跳转至tp项目文件
  4. export function login(data){
  5.     return request ({
  6.         url : "Login/index",
  7.         data
  8.     })
  9. }
  11. export function UserLists(data){
  12.     return request ({
  13.         url : "Index/UserLists",
  14.         data
  15.     })
  16. }
4、Index.php文件代码
  1. <?php
  2. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Db;
  7. class Index extends BaseController
  8. {
  9.     public function index()
  10.     {
  11.         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>';
  12.     }
  14.     // 管理员列表
  15.     public function UserLists(){
  16.         $p = input('post.p',1);
  17.         $search = input('post.search','');
  19.         // 在查询数出来的时候，
  20.         // $user = Db::table('xpcms_admin')->select()->toArray();
  22.         // limit方法、pgae方法
  23.         // count方法统计数据库有多少条数据
  25.         $where = [];
  26.         if(!empty($search)){
  27.             $where1 = [['username','like','%'.$search.'%']];
  28.             $where2 = [['real_name','like','%'.$search.'%']];
  29.             $where3 = [['mobile','like','%'.$search.'%']];
  30.             $where = [$where1,$where2,$where3];
  31.         }
  32.         $count = Db::table('xpcms_admin')->whereOr($where)->count();
  33.         $user = Db::table('xpcms_admin')->whereOr($where)->page($p,5)->select()->toArray();
  35.         $arr = [
  36.             'count' => $count,
  37.             'user' => $user,
  38.         ];
  40.         // php接口、只能有一次输出结果值
  41.         echo json_encode([
  42.             'code' => 0,
  43.             'msg' => '成功',
  44.             'data' => $arr
  45.         ]);
  46.     }
  48.     public function hello($name = 'ThinkPHP6')
  49.     {
  50.         return 'hello,' . $name;
  51.     }
  52. }
5、User.vue文件代码
  1. <template>
  2.     <div>
  4.     <el-input v-model="data.search" size="small" placeholder="Type to search" />
  5.     <el-button type="" @click="search()">搜索</el-button>
  6.     <el-table 
  7.         :data="data.table" 
  8.         stripe 
  9.         style="width: 100%"
  10.         @select="select"
  11.     >
  12.       <el-table-column label="选择" type="selection" />
  13.       <el-table-column prop="id" label="id" />
  14.       <el-table-column prop="username" label="username" />
  15.       <el-table-column prop="real_name" label="姓名1" />
  16.       <el-table-column prop="mobile" label="手机号" />
  17.       <el-table-column prop="status" label="状态">
  18.         <!--插槽-->
  19.         <!-- scope 相当于循环里的一次数据
  20.             foreach ( $data['table] as $v)
  21.             scope.row 就是相当于是 $v
  22.             -->
  23.         <template #default="scope">
  24.             <span>
  25.                 {{ scope.row.status == 0 ? "正常" : "冻结" }}
  26.             </span>
  27.         </template>
  28.       </el-table-column>
  29.     </el-table>
  30.     <el-pagination 
  31.         layout="prev,pager,next" 
  32.         :total="data.total" 
  33.         :page-size="5"
  34.         @current-change="fun"
  35.     />
  36.     <!--
  37.         total:总条数
  38.         page-size:一页显示多少条
  39.     -->
  40. </div>
  41. </template>
  42. <script>
  43. import { reactive } from "vue"; // 引入动态创建
  44. import { UserLists } from "../network/index";
  45. export default{
  46.     setup () {
  47.         const data = reactive({
  48.             table : [],
  49.             total : 0,
  50.         });
  51.         UserLists().then( (e)=>{
  52.             data.table = e.data.data.user;
  53.             data.total = e.data.data.count;
  54.             console.log(data.table);
  55.         })
  57.         const select = (selection,row)=>{
  58.             alert('这是选择事件')
  59.             console.log(selection);
  60.             console.log(row);
  61.         }
  63.         const fun = (p) => {
  64.             UserLists({p:p}).then( (e)=>{
  65.                 data.table = e.data.data.user;
  66.                 data.total = e.data.data.count;
  67.             })
  68.             // Index.php接收传值
  69.         }
  71.         const search = () => {
  72.             UserLists({search:data.search}).then( (e)=>{
  73.                 data.table = e.data.data.user;
  74.                 data.total = e.data.data.count;
  75.             })
  76.         }
  78.         return {
  79.             data,
  80.             select,
  81.             fun,
  82.             search,
  83.         }
  84.     }
  85. }
  86. </script>
二、一些细节点1、左侧菜单栏 Index.vue

实际目前只是使用ele写固定栏目，实行二级路由跳转

  1.           <router-link to="/index/home">
  2.             <el-menu-item index="-1">首页</el-menu-item>
  3.           </router-link>

2、管理员列表 User.vue\Index.js\Index.php
  1. 使用ele框架，引入动态创建 import { reactive } from "vue";
  1.     // 管理员列表
  2.     public function UserLists(){
  3.         // 在查询数出来的时候，
  4.         $user = Db::table('xpcms_admin')->select()->toArray();
  6.         echo json_encode([
  7.             'code' => 0,
  8.             'msg' => '成功',
  9.             'data' => $user
  10.         ]);
  11.     }
  1.         UserLists().then( (e)=>{
  2.             data.table = e.data.data.user;
  3.         })
3、翻页 User.vue\Index.php
  1.     <el-pagination
  2.         layout="prev,pager,next"
  3.         :total="data.total"
  4.         :page-size="5"
  5.         @current-change="fun"
  6.     />
  8.     <!--
  9.         total:总条数
  10.         page-size:一页显示多少条
  11.     -->
  12.         const fun = (p) => {
  13.             UserLists({p:p}).then( (e)=>{
  14.                 data.table = e.data.data.user;
  15.                 data.total = e.data.data.count;
  16.             })
  17.             // Index.php接收传值
  18.         }
  1. public function UserLists(){
  2.         $p = input('post.p',1);
  4.         // 在查询数出来的时候，
  5.         // $user = Db::table('xpcms_admin')->select()->toArray();
  7.         // limit方法、pgae方法
  8.         // count方法统计数据库有多少条数据
  9.         $count = Db::table('xpcms_admin')->count();
  10.         $user = Db::table('xpcms_admin')->page($p,5)->select()->toArray();
  12.         $arr = [
  13.             'count' => $count,
  14.             'user' => $user
  15.         ];
  17.         // php接口、只能有一次输出结果值
  18.         echo json_encode([
  19.             'code' => 0,
  20.             'msg' => '成功',
  21.             'data' => $arr
  22.         ]);
  23.     }
4、搜索
  1.     public function UserLists(){
  2.         $p = input('post.p',1);
  3.         $search = input('post.search','');
  5.         // 在查询数出来的时候，
  6.         // $user = Db::table('xpcms_admin')->select()->toArray();
  8.         // limit方法、pgae方法
  9.         // count方法统计数据库有多少条数据
  11.         $where = [];
  12.         if(!empty($search)){
  13.             $where1 = [['username','like','%'.$search.'%']];
  14.             $where2 = [['real_name','like','%'.$search.'%']];
  15.             $where3 = [['mobile','like','%'.$search.'%']];
  16.             $where = [$where1,$where2,$where3];
  17.         }
  18.         $count = Db::table('xpcms_admin')->whereOr($where)->count();
  19.         $user = Db::table('xpcms_admin')->whereOr($where)->page($p,5)->select()->toArray();
  21.         $arr = [
  22.             'count' => $count,
  23.             'user' => $user,
  24.         ];
  26.         // php接口、只能有一次输出结果值
  27.         echo json_encode([
  28.             'code' => 0,
  29.             'msg' => '成功',
  30.             'data' => $arr
  31.         ]);
  32.     }
  1.         const search = () => {
  2.             UserLists({search:data.search}).then( (e)=>{
  3.                 data.table = e.data.data.user;
  4.                 data.total = e.data.data.count;
  5.             })
  6.         }

  1. 搜索与一开始读取用户列表，用一个语句，涉及到多个条件查询使用whereOr，若没有输入搜索条件，则全部展示，若输入条件，则判断3个where条件进行查询。
  2. 分页使用page(data1,data2)，data1：第几页；data2：一页显示多少条
运行效果图：

【文章原创作者：阜宁网页制作公司 http://www.1234xp.com/funing.html 欢迎留下您的宝贵建议】
更多阅读