Home > List of blog posts > 实战ele与tp：左侧菜单、管理员列表、翻页与搜索功能

Blogger Information

Blog 77

fans 0

comment 0

visits 55174

Special Recommendation

More>

Related recommendations

一、总体代码：

文件：

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 (新建)

<template>
    <div class="container">
        <div style="text-align: center">
            <!--<img src="@/assets/logo.jpg" alt="logo" />-->
            <h3>后台管理</h3>
        </div>
        <div class="main">
            <!-- label-width="auto" 导致ElementPlusError: [ElForm] unexpected width 0 -->
            <el-form :model="form" size="large">
                <el-form-item prop="account">
                    <el-input v-model="form.account" name="account" class="w-50 m-2" placeholder="请输入账号">
                        <template #prefix>
                            <el-icon class="el-input__icon" style="color: #1890ff"><Avatar /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" name="password" type="password" class="w-50 m-2" placeholder="请输入密码" show-password>
                        <template #prefix>
                            <el-icon class="el-input__icon" style="color: #1890ff"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="remember">
                    <el-checkbox v-model="form.remember" label="1" size="large">保存账密</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" @click="onSubmit()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style>
.container {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 110px 0 144px;
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
}
.main {
    width: 368px;
    min-width: 260px;
    margin: 50px auto;
}
.el-icon {
    color: #359eff;
}
</style>
<script>
import { reactive } from "vue";
//import { request } from "../network/request.js";
import { login } from "../network/index.js";
// 登录成功用路由进行跳转:
import { useRouter } from "vue-router";
export default {
    setup() {
        const form = reactive({
            account: "123",
            password: "123",
            remember: true,
        });
        const router = useRouter();
        const onSubmit = ()=>{
            login({
                account : form.account,
                password : form.password,
            }).then(res =>{
                alert(res.data.msg);
                if(res.data.code == 0){
                    // 跳转到新页面
                    router.push("/Index");
                }
            })
        }
        return {
            form,
            onSubmit
        };
    }
};
</script>

2、Index.vue文件代码

<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['-1']">
            <!--二级路由,跳转-->
          <router-link to="/index/home">
            <el-menu-item index="-1">首页</el-menu-item>
          </router-link>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>系统管理
            </template>
            <el-menu-item-group>
              <router-link to="/index/menu">
                <el-menu-item index="1-2">菜单管理</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><User /></el-icon>管理员管理
            </template>
            <el-menu-item-group>
              <router-link to="/index/user">
                <el-menu-item index="2-1">管理员列表</el-menu-item>
              </router-link>
              <router-link to="/index/group">
                <el-menu-item index="2-2">管理组列表</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>商城相关
            </template>
            <el-menu-item-group>
              <template #title>商品</template>
              <el-menu-item index="3-1">商品列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="订单">
              <el-menu-item index="3-3">订单列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="用户">
              <el-menu-item index="3-4">用户列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  data() {
    return {
      collapsed: ref(false),
      selectedKeys: ref(["1"]),
    };
  },
});
</script>
<style scoped>
.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>

3、index.js文件代码

import { request } from "./request.js";
// 跳转至tp项目文件
export function login(data){
    return request ({
        url : "Login/index",
        data
    })
}
export function UserLists(data){
    return request ({
        url : "Index/UserLists",
        data
    })
}

4、Index.php文件代码

<?php
namespace app\admin\controller;
use app\BaseController;
use think\facade\Db;
class Index extends BaseController
{
    public function index()
    {
        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>';
    }
    // 管理员列表
    public function UserLists(){
        $p = input('post.p',1);
        $search = input('post.search','');
        // 在查询数出来的时候，
        // $user = Db::table('xpcms_admin')->select()->toArray();
        // limit方法、pgae方法
        // count方法统计数据库有多少条数据
        $where = [];
        if(!empty($search)){
            $where1 = [['username','like','%'.$search.'%']];
            $where2 = [['real_name','like','%'.$search.'%']];
            $where3 = [['mobile','like','%'.$search.'%']];
            $where = [$where1,$where2,$where3];
        }
        $count = Db::table('xpcms_admin')->whereOr($where)->count();
        $user = Db::table('xpcms_admin')->whereOr($where)->page($p,5)->select()->toArray();
        $arr = [
            'count' => $count,
            'user' => $user,
        ];
        // php接口、只能有一次输出结果值
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $arr
        ]);
    }
    public function hello($name = 'ThinkPHP6')
    {
        return 'hello,' . $name;
    }
}

5、User.vue文件代码

<template>
    <div>
    <el-input v-model="data.search" size="small" placeholder="Type to search" />
    <el-button type="" @click="search()">搜索</el-button>
    <el-table 
        :data="data.table" 
        stripe 
        style="width: 100%"
        @select="select"
    >
      <el-table-column label="选择" type="selection" />
      <el-table-column prop="id" label="id" />
      <el-table-column prop="username" label="username" />
      <el-table-column prop="real_name" label="姓名1" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="status" label="状态">
        <!--插槽-->
        <!-- scope 相当于循环里的一次数据
            foreach ( $data['table] as $v)
            scope.row 就是相当于是 $v
            -->
        <template #default="scope">
            <span>
                {{ scope.row.status == 0 ? "正常" : "冻结" }}
            </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
        layout="prev,pager,next" 
        :total="data.total" 
        :page-size="5"
        @current-change="fun"
    />
    <!--
        total:总条数
        page-size:一页显示多少条
    -->
</div>
</template>
<script>
import { reactive } from "vue"; // 引入动态创建
import { UserLists } from "../network/index";
export default{
    setup () {
        const data = reactive({
            table : [],
            total : 0,
        });
        UserLists().then( (e)=>{
            data.table = e.data.data.user;
            data.total = e.data.data.count;
            console.log(data.table);
        })
        const select = (selection,row)=>{
            alert('这是选择事件')
            console.log(selection);
            console.log(row);
        }
        const fun = (p) => {
            UserLists({p:p}).then( (e)=>{
                data.table = e.data.data.user;
                data.total = e.data.data.count;
            })
            // Index.php接收传值
        }
        const search = () => {
            UserLists({search:data.search}).then( (e)=>{
                data.table = e.data.data.user;
                data.total = e.data.data.count;
            })
        }
        return {
            data,
            select,
            fun,
            search,
        }
    }
}
</script>

二、一些细节点

1、左侧菜单栏 Index.vue

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

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

2、管理员列表 User.vue\Index.js\Index.php

使用ele框架，引入动态创建 import { reactive } from "vue";

    // 管理员列表
    public function UserLists(){
        // 在查询数出来的时候，
        $user = Db::table('xpcms_admin')->select()->toArray();
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $user
        ]);
    }

        UserLists().then( (e)=>{
            data.table = e.data.data.user;
        })

3、翻页 User.vue\Index.php

    <el-pagination
        layout="prev,pager,next"
        :total="data.total"
        :page-size="5"
        @current-change="fun"
    />
    <!--
        total:总条数
        page-size:一页显示多少条
    -->
        const fun = (p) => {
            UserLists({p:p}).then( (e)=>{
                data.table = e.data.data.user;
                data.total = e.data.data.count;
            })
            // Index.php接收传值
        }

public function UserLists(){
        $p = input('post.p',1);
        // 在查询数出来的时候，
        // $user = Db::table('xpcms_admin')->select()->toArray();
        // limit方法、pgae方法
        // count方法统计数据库有多少条数据
        $count = Db::table('xpcms_admin')->count();
        $user = Db::table('xpcms_admin')->page($p,5)->select()->toArray();
        $arr = [
            'count' => $count,
            'user' => $user
        ];
        // php接口、只能有一次输出结果值
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $arr
        ]);
    }

4、搜索

    public function UserLists(){
        $p = input('post.p',1);
        $search = input('post.search','');
        // 在查询数出来的时候，
        // $user = Db::table('xpcms_admin')->select()->toArray();
        // limit方法、pgae方法
        // count方法统计数据库有多少条数据
        $where = [];
        if(!empty($search)){
            $where1 = [['username','like','%'.$search.'%']];
            $where2 = [['real_name','like','%'.$search.'%']];
            $where3 = [['mobile','like','%'.$search.'%']];
            $where = [$where1,$where2,$where3];
        }
        $count = Db::table('xpcms_admin')->whereOr($where)->count();
        $user = Db::table('xpcms_admin')->whereOr($where)->page($p,5)->select()->toArray();
        $arr = [
            'count' => $count,
            'user' => $user,
        ];
        // php接口、只能有一次输出结果值
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $arr
        ]);
    }

        const search = () => {
            UserLists({search:data.search}).then( (e)=>{
                data.table = e.data.data.user;
                data.total = e.data.data.count;
            })
        }

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

运行效果图：

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

匿名函数与命名空间_0929

2019-10-08 13:01:48